將圖像添加到立方體的一側

Question

我想將幾張圖像附加到立方體的幾側，然後將其他邊留空。我要讓這個工作很困難。如果我將所有邊都設置爲一種材質，我可以加載該文件並將其顯示得很好，但如果我嘗試僅設置一面來顯示圖像，則只是空白。

var textureLoader = new THREE.TextureLoader();        
var texture0 = textureLoader.load('images/0.png');      
var texture1 = textureLoader.load('images/1.png');      
var texture2 = textureLoader.load('images/2.png');      
var texture3 = textureLoader.load('images/3.png');      
var texture4 = textureLoader.load('images/4.png');      
var texture5 = textureLoader.load('images/5.png'); 

var cubeMaterials = [              
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 cubegeometry = new THREE.CubeGeometry(3,2,3);       
let cube = new THREE.Mesh(cubegeometry, cubeMaterials);     
group.add(cube); 

Answer 1

THREE.ImageUtils.crossOrigin = ''; 
var texture = THREE.ImageUtils.loadTexture('your-img-url'); 
texture.anisotropy = renderer.getMaxAnisotropy(); 

var cubeMaterial = new THREE.MeshFaceMaterial([ 
     new THREE.MeshBasicMaterial({ 
      map: texture //left 
     }), 
     new THREE.MeshBasicMaterial({ 
      color: 'orange' //right 
     }), 
     new THREE.MeshBasicMaterial({ 

      color: 'green' // top 
     }), 
     new THREE.MeshBasicMaterial({ 
      color:'blue' // bottom 
     }), 
     new THREE.MeshBasicMaterial({ 
      color: 'pink' // front 
     }), 
     new THREE.MeshBasicMaterial({ 
      color: 'yellow' //back 
     }) 
    ]);