创建一个平面，在两侧添加纹理并在其侧面旋转对象

Question

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

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);

Answer 1

有关重复纹理的示例，请在以下位置查看示例的来源：

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);

Answer 2

正在寻找解决方案而不重复我的所有几何体。

在这里，女士们，先生们......

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纹理应用于它。

享受！

Answer 3

我一直在寻找同样的东西你刚刚在错误的物体上使用了属性THREE.DoubleSide。你应该在材料而不是网格本身上使用它：

material.side = THREE.DoubleSide;

......仅此而已！

Answer 4

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);
          }
        );