将纹理应用于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？edit = 001

查看Three.js并加载跨域图像以获得解释.

代码:

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

应该:

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