10

問題：私は（楽しみのために）単純なポーカーカード（カードの裏側と表側のカード）を作成しようとしています。背面と前面の2つの異なる画像があります。両側に単一のテクスチャを使用して平面ジオメトリを簡単に作成しましたが、一方にテクスチャを割り当て、もう一方にもう一方のテクスチャを割り当てる方法が本当にわかりません...これを試しました（成功しませんでした:(）：

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

助けてください？:)

4

2 に答える 2

12

すべてのジオメトリを複製せずに解決策を探していました。

ここにあなたは紳士淑女に行きます...

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、ループは、より多くの面を持つジオメトリでも機能し、各面を複製して、BackSideテクスチャを適用します。

楽しみ！

于 2013-07-11T20:17:08.193 に答える
6

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.jsr.69に更新

于 2012-07-29T18:29:28.763 に答える