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

Rob*_*b B 8 javascript three.js

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

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);
Run Code Online (Sandbox Code Playgroud)

Lee*_*ski 14

有关重复纹理的示例,请查看以下示例的源代码:

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);
Run Code Online (Sandbox Code Playgroud)

  • `plane.side = THREE.DoubleSide` < - 我想你可能在这里打错了.然而,'plane.material.side = THREE.DoubleSide`似乎工作正常. (2认同)

mat*_*yer 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)));
Run Code Online (Sandbox Code Playgroud)

BOOM a Two Faced Plane for ya,该循环还将处理具有更多面的几何图形,复制每个面并将背面纹理应用于它。

享受!