javascript - 将图像添加到立方体的一侧

Question

我想在立方体的几个边上附加几张图片，然后将其他边留空。我很难让它发挥作用。如果我将所有面都设置为一种 Material ，我可以加载文件并正常显示它，但如果我尝试只设置一个面来显示图像，它只是空白。

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