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

我想将几张图像附加到立方体的几侧，然后将其他边留空。我要让这个工作很困难。如果我将所有边都设置为一种材质，我可以加载该文件并将其显示得很好，但如果我尝试仅设置一面来显示图像，则只是空白。将图像添加到立方体的一侧

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

来源

2017-05-04 Marc Tanis

你想不同的图像应用到立方体的每一面？ – prisoner849

您使用的是什么版本的THREE.js？ 'THREE.CubeGeometry'已被弃用，以支持'THREE.BoxGeometry'和'THREE.BoxBufferGeometry'。 – TheJim01

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

来源

2017-08-05 14:02:14

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

回答

相关问题