Question

PRoblem：我正在尝试创建（仅仅是为了好玩）一张简单的扑克牌（带有卡片背面和卡片正面）。我有两个不同的图像，背面和正面。我轻松地创建了一个平面几何体，两面都有一个纹理，但我真的不知道如何为一侧指定纹理而另一面指定另一个纹理...... 我试过这个（没有成功:(）：

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

请帮忙吗？：）

Answer 1

正在寻找解决方案而不重复我的所有几何体。

在这里，女士们，先生们......

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是一个双面平面，循环也可以处理具有更多面的几何，复制每个面并将BackSide纹理应用于它。

享受！

Answer 2

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

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

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

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

// 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，则可以更轻松地完成此操作。

小提琴：http://jsfiddle.net/mdAb7/11/

更新为three.js r.69

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

2 个答案: