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

问题:我正在尝试创建(只是为了好玩)一张简单的扑克牌(背面有卡，正面有卡)。
我有两个不同的图像，分别是背面和正面。
我很容易地创建了一个平面几何体，两侧都具有单个纹理，但是我真的不知道如何为一侧分配一个纹理，而为另一侧分配另一个纹理...
我尝试了这个(没有成功:():

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

var material1 = new THREE.MeshBasicMaterial( { map: textureBack } );
var material2 = new THREE.MeshBasicMaterial( { map: textureFront } );

var geometry = new THREE.PlaneGeometry( 90, 110, 1, 1 );
geometry.faces[ 0 ].materials.push( material1 );
geometry.faces[ 1 ].materials.push( material2 );

var card = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());

有什么帮助吗？ :)

最佳答案

您需要背对背放置两个平面几何。

首先，为正面创建一个几何。

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

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

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

如果使用WebGLRenderer，您会更轻松。

fiddle :http://jsfiddle.net/mdAb7/11/

更新为three.js r.69