three.js r81：我怎樣才能製作一個立方體，每個面上都有不同的紋理

我剛剛更新到three.js的最新版本，和THREE.ImageUtils.loadTexture不再工作。所以我搜索了不同面孔的立方體，但他們都使用舊技術「new THREE.ImageUtils.loadTexture」。我試着用「new THREE.TextureLoader.load（'texture1.png'）」來製作一個。這是我有：three.js r81：我怎樣才能製作一個立方體，每個面上都有不同的紋理

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>three.js webgl - geometry - cube</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       margin: 0px; 
       background-color: #000000; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 

     <script src="library/threejs/build/three.js"></script> 

     <script> 
      var camera, scene, renderer; 
      var head; 
      var loader = new THREE.TextureLoader(); 
      init(); 
      animate(); 
      function init() { 
       camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
       camera.position.z = 400; 
       scene = new THREE.Scene(); 
      materials = [ 
      new THREE.TextureLoader().load('textures/mob/zombie/zombie_headfront.png'), 
      new THREE.TextureLoader().load('textures/mob/zombie/zombie_headback.png'), 
      new THREE.TextureLoader().load('textures/mob/zombie/zombie_headleft.png'), 
      new THREE.TextureLoader().load('textures/mob/zombie/zombie_headright.png'), 
      new THREE.TextureLoader().load('textures/mob/zombie/zombie_headup.png'), 
      new THREE.TextureLoader().load('textures/mob/zombie/zombie_headdown.png')]; 

    head = new THREE.Mesh(
      new THREE.BoxBufferGeometry(80, 80, 80, 1, 1, 1, materials), 
      new THREE.MeshBasicMaterial({ map: materials }) 
    ); 
       scene.add(head); 
       renderer = new THREE.WebGLRenderer(); 
       renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       document.body.appendChild(renderer.domElement); 
       window.addEventListener('resize', onWindowResize, false); 
      } 
      function onWindowResize() { 
       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
      } 
      function animate() { 
       requestAnimationFrame(animate); 
       head.rotation.x += 0.005; 
       head.rotation.y += 0.01; 
       renderer.render(scene, camera); 
      } 
     </script> 

    </body> 
</html>

但我得到的錯誤：

TypeError: offset is undefined

和

THREE.WebGLShader: Shader couldn't compile

也

THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:238: 
'mapTexelToLinear' : no matching overloaded function found

所以如果你知道如何解決這個問題或只是知道如何製作6個不同側面的立方體，真是太棒了！謝謝！

來源

2016-09-27 nelsoncookie 23

THREE.js有一個無證材料，THREE.MeshFaceMaterial已被棄用了一段時間，但仍然工作在R81。

// Make an array of six regular materials 
var materials = [ 
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/8B1rYNY.png")}), 
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/8w6LAV6.png")}), 
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/aVCY4ne.png")}), 
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/tYOW02D.png")}), 
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/nVAIICM.png")}), 
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/EDr3ed3.png")}) 
]; 
var geometry = new THREE.BoxBufferGeometry(200, 200, 200); 

// Use THREE.MeshFaceMaterial for the cube, using the array as the parameter 
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

Demo

顯然這內部工作原理是通過爲立方體的每個面創建THREE.BufferGeometry平面以及將每一個材料的面（mrdoob himself）的方式。換句話說，如果這種方法停止工作，您的替代方法是手動從6個平面中製作一個多維數據集，使它們成爲空對象的子對象，以便將它們視爲單個多維數據集，然後分別將您的材料應用於每個平面。

如果您不需要在運行時動態確定立方體的面並可以將它們「烘烤」成紋理，技術上更好（但更困難）的選擇是使用UV映射。

來源

2016-09-27 17:58:27 jered

非常感謝！仍然很奇怪，它沒有在線文檔。：d –

three.js r81：我怎樣才能製作一個立方體，每個面上都有不同的紋理

回答

相關問題