9

我正在尝试创建一个具有重复纹理的长走廊。如何添加重复纹理并以直角旋转对象（在本例中为平面）以创建走廊墙壁和天花板？

var texture, material, plane;

texture = THREE.ImageUtils.loadTexture( "../img/texture.jpg" );
texture.wrapT = THREE.RepeatWrapping;  // This doesn't seem to work;
material = new THREE.MeshLambertMaterial({ map : texture });
plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 3500), material);
plane.doubleSided = true;
plane.position.x = 100;
plane.rotation.z = 2;  // Not sure what this number represents.
scene.add(plane);
4

4 回答 4

15

有关重复纹理的示例，请查看示例的源代码：

http://stemkoski.github.com/Three.js/Texture-Repeat.html

我建议对您的代码进行以下更改：

var texture, material, plane;

texture = THREE.ImageUtils.loadTexture( "../img/texture.jpg" );

// assuming you want the texture to repeat in both directions:
texture.wrapS = THREE.RepeatWrapping; 
texture.wrapT = THREE.RepeatWrapping;

// how many times to repeat in each direction; the default is (1,1),
//   which is probably why your example wasn't working
texture.repeat.set( 4, 4 ); 

material = new THREE.MeshLambertMaterial({ map : texture });
plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 3500), material);
plane.material.side = THREE.DoubleSide;
plane.position.x = 100;

// rotation.z is rotation around the z-axis, measured in radians (rather than degrees)
// Math.PI = 180 degrees, Math.PI / 2 = 90 degrees, etc.
plane.rotation.z = Math.PI / 2;

scene.add(plane);
于 2012-07-04T12:45:18.147 回答
5

在不复制我所有的几何图形的情况下寻找解决方案。

来了，女士们，先生们……

var materials = [new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}),
                 new THREE.MeshBasicMaterial({map: textureBack, side: THREE.BackSide})];

var geometry = new THREE.PlaneGeometry(width, height);

for (var i = 0, len = geometry.faces.length; i < len; i++) {
    var face = geometry.faces[i].clone();
    face.materialIndex = 1;
    geometry.faces.push(face);
    geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
}

scene.add(new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)));

BOOM 一个两面平面，循环也适用于具有更多面的几何图形，复制每个面并对其应用 BackSide 纹理。

享受！

于 2013-07-11T20:18:20.730 回答
3

我一直在寻找同样的东西，而您只是在错误的对象上使用了属性 THREE.DoubleSide。您应该在材质上而不是在网格本身上使用它：

material.side = THREE.DoubleSide;

...仅此而已！

于 2014-01-07T16:04:52.650 回答
2

2019 年更新：Imageutil.loadTexture已弃用，

改用 THREE.TextureLoader()

 new THREE.TextureLoader().load(
          WOOD,
          //use texture as material Double Side
          texture => {
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.offset.x = 90/(2*Math.PI);
            var woodMaterial = new THREE.MeshPhongMaterial({
              map: texture,
              side: THREE.DoubleSide
            });

            // Add Ground
            groundMesh = new THREE.Mesh(
              new THREE.PlaneGeometry(GRID_SIZE, GRID_SIZE, 32),
              woodMaterial
            );

            //rotate
            groundMesh.rotation.x = Math.PI / 2;
            this.scene.add(groundMesh);
          }
        );
于 2019-09-11T14:03:19.120 回答