three.js r81：各面に異なるテクスチャでキューブを作るにはどうすればいいですか？

最新のthree.jsに更新しました。とTHREE.ImageUtils.loadTextureはもう動作しません。私は異なる顔を持つキューブを検索しましたが、それらのすべてがという古いテクニック "new THREE.ImageUtils.loadTexture"を使用しています。 "新しい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面から立方体を作成し、それを1つの立方体として扱うことができるようにヌルオブジェクトの子とし、材料を各平面に別々に適用することです。

実行時にキューブの面を動的に決定する必要がなく、テクスチャに「ベーク」することができれば、技術的に優れた（ただし難しい）オプションはUVマッピングを使用することです。

出典

2016-09-27 17:58:27 jered

ありがとうございました！それでもオンラインドキュメントはありません。：D –

three.js r81：各面に異なるテクスチャでキューブを作るにはどうすればいいですか？

答えて

関連する問題