キューブの片側に画像を追加する

Question

キューブのいくつかの面にいくつかの画像を添付し、もう一方の面を空白のままにします。私はこれを動作させるのに非常に困難な時期を抱えています。すべての面を1つの素材にするとファイルを読み込んで表示できますが、画像を表示するには片面のみを設定しようとすると空白になります。

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 
     }) 
    ]);