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：我怎样才能制作一个立方体，每个面上都有不同的纹理

回答

相关问题