Javascript 创建平面，在两侧添加纹理并在其一侧旋转对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11325548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a plane, adding a texture on both sides and rotating the object on its side
提问by Rob B
I'm trying to create a long corridor with a repeating texture. How do I add a repeating texture and rotate a object (in this case a plane) at right angles to create the corridor wall's and ceiling?
我正在尝试创建一个具有重复纹理的长走廊。如何添加重复纹理并以直角旋转对象（在本例中为平面）以创建走廊墙壁和天花板？
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);
回答by Lee Stemkoski
For an example of a repeating texture, check out the source of the example at:
有关重复纹理的示例，请查看示例的来源：
http://stemkoski.github.com/Three.js/Texture-Repeat.html
http://stemkoski.github.com/Three.js/Texture-Repeat.html
I recommend the following changes to your code:
我建议对您的代码进行以下更改：
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);
回答by mattdlockyer
Was searching for solution without duplicating all my geometry.
正在寻找解决方案而不复制我所有的几何图形。
Here you go ladies and gentlemen...
来吧，女士们，先生们……
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 a Two Faced Plane for ya, the loop will also work with geometries with more faces, replicating each face and applying the BackSide texture to it.
BOOM a Two Faced Plane for ya，该循环还将处理具有更多面的几何图形，复制每个面并将背面纹理应用于它。
Enjoy!
享受！
回答by JeanSaigne
I was looking for the same thing and you've just used the property THREE.DoubleSide on the wrong object. You should use it on the material rather than on the mesh itself:
我一直在寻找同样的东西，而您刚刚在错误的对象上使用了属性 THREE.DoubleSide。您应该在材质上而不是在网格本身上使用它：
material.side = THREE.DoubleSide;
...nothing more !
……仅此而已！
回答by Hitesh Sahu
Update 2019: Imageutil.loadTextureis deprecated,
2019 年更新：Imageutil.loadTexture已弃用，
Use THREE.TextureLoader() instead
使用 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);
}
);
