मैं विमान के आगे और पीछे दो अलग-अलग बनावट कैसे रख सकता हूं?

Question

प्रोबलेम: मैं एक साधारण पोकर कार्ड (कार्ड के पीछे और कार्ड फ्रंट के साथ) बनाने के लिए (बस मस्ती के लिए) बनाने की कोशिश कर रहा हूं। मेरे पास पीछे और आगे के लिए दो अलग-अलग छवियां हैं। मैंने आसानी से दोनों पक्षों के लिए एक बनावट के साथ एक प्लेन ज्यामिति बनाई है, लेकिन मुझे वास्तव में नहीं पता कि दूसरी तरफ एक बनावट और अन्य बनावट के लिए एक बनावट कैसे असाइन करें ... मैंने कोशिश की (बिना सफलता के :():

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

आप सामग्री लोड, meshes बनाते हैं, और उन्हें एक "कार्ड" वस्तु के बच्चों के रूप में जोड़े जाने के बाद।

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

Answer 2

मेरे सभी ज्यामिति को डुप्लिकेट के बिना समाधान के लिए खोज रहा था अपडेट किया गया।

यहाँ आप देवियों और सज्जनों जाना ...

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

बूम फिर के लिए एक दो सामना विमान, पाश भी अधिक चेहरे के साथ ज्यामिति के साथ, काम करेंगे प्रत्येक चेहरे नकल और यह करने के पीछे बनावट लागू करने।

का आनंद लें!