Javascript 如何在飞机的正面和背面放置两种不同的纹理？

问题：我正在尝试创建（只是为了好玩）一张简单的扑克牌（背面有一张牌，正面有一张牌）。 我有两个不同的图像，背面和正面。 我很容易创建了一个平面几何体，两边都有一个纹理，但我真的不知道如何为一个边指定纹理，为另一个边指定另一个纹理。。。 我试过这个（没有成功：（）：

---

有什么帮助吗？：）

您需要背靠背放置两个平面几何图形

首先，为正面创建几何图形

var geometry1 = new THREE.PlaneGeometry( 90, 110, 1, 1 );

现在为背面创建另一个几何体

var geometry2 = new THREE.PlaneGeometry( 90, 110, 1, 1 );

旋转180度

geometry2.applyMatrix( new THREE.Matrix4().makeRotationY( Math.PI ) );

加载材质后，创建网格，并将其添加为“卡片”对象的子对象

如果使用

WebGLRenderer

，您将更轻松地处理此问题

小提琴：

---

更新为three.js r.69

正在搜索解决方案，但没有复制我的所有几何体

女士们先生们，给你们

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

var materials=[new THREE.MeshBasicMaterial（{map:texture，side:THREE.FrontSide}），
新的3.MeshBasicMaterial（{map:textureBack，side:THREE.BackSide}）；
var几何=新的三个平面几何（宽度、高度）；
对于（变量i=0，len=geometry.faces.length；i

为ya打开一个双面平面，循环还将处理具有更多面的几何体，复制每个面并将背面纹理应用于其

---

享受吧

好的！我已经尝试了第一个解决方案，它成功了！！！！非常感谢：）有一点（也许可以避免浪费时间给某人…）：代码“geometry1.applyMatrix（新的三个.Matrix4（）.makeRotationX（Math.PI/2））；“不起作用，因为进行旋转的方法名为“makeRotationX”，尽管在文档中是“makeRotationX”，但它是“setRotationX”：D现在我也要尝试第二种解决方案；）我尝试了第二种解决方案，它也很有效。。。但我看到，在第二种解决方案中，所有动画都很慢。。。无论如何，再次谢谢你！问题已解决：D

setRotationX

来自旧版本的库。您需要更新到r.49.Ops：我真的确信我有正确的版本，我将更新；）PS：对不起，但是。。。我怎么能接受这个答案？编辑：好的，好的，我刚做完嘿，伙计们，请看下面我的答案，以节省一些额外的内存/几何调用、更新或下面一个稍微精简的解决方案，花了很长时间，所以我想我会与大家分享！你能帮我翻转纹理吗？有一个镜像效果，你必须穿过UV并翻转它们。将几何体对象临时设置为全局变量，然后运行应用程序。在Chrome中，使用javascript控制台，键入几何体对象的变量名（现在是全局的）并遍历其内容。您应该看到存储在那里的纹理UV坐标，按照您希望看到纹理的方式翻转它们的顺序。这对于动态几何体对象（例如，拍动平面）很好，因为您只需更新1个几何体。通过将镜像图像文件用作平面背面的输入，可以避免镜像问题。但对于简单的旗帜，例如星条旗，仅使用“双面”即可。

// textures
var textureFront = new THREE.ImageUtils.loadTexture('images/cardFront.png' );      
var textureBack = new THREE.ImageUtils.loadTexture('images/cardBack.png' );

// material
var material1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: textureFront } );
var material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: textureBack } );

// card
card = new THREE.Object3D();
scene.add( card );

// mesh
mesh1 = new THREE.Mesh( geometry1, material1 );
card.add( mesh1 );
mesh2 = new THREE.Mesh( geometry2, material2 );
card.add( mesh2 );

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