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

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

为你准备一个两面平面，循环也适用于具有更多面的几何图形，复制每个面并对其应用 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);
          }
        );