在three.js中将纹理应用于立方体内部

Question

我正在尝试在立方体的每个面上应用不同的图像，在里面。

我在这里有一个工作示例：http://codepen.io/anon/pen/mymOKe

我像这样加载图像：

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;

而且它不起作用。在代码中，它从第 82 行开始。 在第 107 行有一个注释部分，用颜色而不是纹理来构建立方体，这很有效。

Answer 1

您需要在您的材料中定义THREE.BackSide。例如：

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

编辑

更新了您的代码： http://codepen.io/anon/pen/OVLVVr?editors=001

查看Three.js and loading a cross-domain image 以获得解释。

还有代码：

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

应该是：

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