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

将图像添加到多维数据集的一侧

1 个答案: