Three.js - 使用CubeTextureLoader在立方體的每個面上創建不同的圖像

Question

我試圖用CubeTextureLoader在每一面上創建一個具有不同圖像的立方體。我的過程是：

1. 負載使用new THREE.CubeTextureLoader()
2. 使用立方體貼圖
3. 創建一個新的材料立方體貼圖使用這種材料
4. 繪製立方體

有關創建多維數據集代碼如下。我可以使用THREE.TextureLoader()，但是當我使用CubeTextureLoader時，我無法在屏幕上或任何控制檯錯誤中得到任何面板的單一材質的立方體。

var textureLoader = new THREE.CubeTextureLoader(); 

textureLoader.load([ 
    'textures/face-1.jpg', 
    'textures/face-2.jpg', 
    'textures/face-3.jpg', 
    'textures/face-4.jpg', 
    'textures/face-5.jpg', 
    'textures/face-6.jpg' 
], function (texture) { 
    var material = new THREE.MeshBasicMaterial({ 
     color: 0xffffff, 
     map: texture 
    }); 

    var cube = new THREE.Mesh(
     new THREE.BoxGeometry(20, 20, 20), 
     material 
    ); 

    // add & draw calls happen after all this 
}); 

我猜我使用了錯誤的材料類型或模型，但無法找到如何正確地做到這一點的任何信息或實例。有任何想法嗎？

Answer 1

正如Micnil提到的，CubeTextureLoader是用於SkyBox或EnvMap的CubeMap。

改爲使用MeshFaceMaterial。

var textureLoader = new THREE.TextureLoader(); 

var texture0 = textureLoader.load('./0.jpg'); 
var texture1 = textureLoader.load('./1.jpg'); 
var texture2 = textureLoader.load('./2.jpg'); 
var texture3 = textureLoader.load('./3.jpg'); 
var texture4 = textureLoader.load('./4.jpg'); 
var texture5 = textureLoader.load('./5.jpg'); 

var materials = [ 
    new THREE.MeshBasicMaterial({ map: texture0 }), 
    new THREE.MeshBasicMaterial({ map: texture1 }), 
    new THREE.MeshBasicMaterial({ map: texture2 }), 
    new THREE.MeshBasicMaterial({ map: texture3 }), 
    new THREE.MeshBasicMaterial({ map: texture4 }), 
    new THREE.MeshBasicMaterial({ map: texture5 }) 
]; 
var faceMaterial = new THREE.MeshFaceMaterial(materials); 

var geometry = new THREE.BoxGeometry(20, 20, 20); 
var boxMesh = new THREE.Mesh(geometry, faceMaterial);