three.js에서 큐브 내부에 텍스처 적용

Question

큐브의 각면에 다른 이미지를 적용하려고합니다.

var material = [ 
       new THREE.MeshLambertMaterial({ 
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); }) 
}), 
       new THREE.MeshLambertMaterial({ 
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); }) 
}), 
       new THREE.MeshLambertMaterial({ 
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); }) 
}), 
       new THREE.MeshLambertMaterial({ 
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); }) 
}), 
       new THREE.MeshLambertMaterial({ 
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); }) 
}), 
       new THREE.MeshLambertMaterial({ 
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); }) 
}) 
]; 

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, new THREE.MeshFaceMaterial(material)); 

mesh.doubleSided = true; 

을 그리고 그것은 작동하지 않습니다 http://codepen.io/anon/pen/mymOKe

나는이 같은 이미지를로드 :

나는 여기에 동작하는 예제가 있습니다. 코드에서 82 행부터 시작합니다. 107 행에는 텍스처 대신 색상으로 큐브를 작성하는 주석 처리 된 부분이 있으며 그 부분이 작동합니다.

Answer 1

재료에 THREE.BackSide을 정의하면됩니다. 예를 들면 다음과 같습니다에 대한 설명 Three.js and loading a cross-domain image에서 http://codepen.io/anon/pen/OVLVVr?editors=001

봐 :

var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide }); 

편집

는 코드를 업데이트했습니다. 또한

코드 :

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, new THREE.MeshFaceMaterial(material)); 

가 있어야한다 :

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, material);