three.js r81: Wie kann ich einen Würfel mit verschiedenen Texturen auf jeder Seite machen

Ich habe gerade aktualisiert, um die neueste Version von three.js, und THREE.ImageUtils.loadTexture funktioniert nicht mehr. Also habe ich nach Würfeln mit verschiedenen Gesichtern gesucht, aber alle verwenden die alte Technik "new THREE.ImageUtils.loadTexture". Ich habe versucht, einen mit "new THREE.TextureLoader.load ('texture1.png')" zu machen. Dies ist, was ich habe:three.js r81: Wie kann ich einen Würfel mit verschiedenen Texturen auf jeder Seite machen

<!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>

aber ich erhalte die Fehlermeldung:

TypeError: offset is undefined

und

THREE.WebGLShader: Shader couldn't compile

und auch

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

Also, wenn Sie wissen, wie man das repariert oder einfach weiß wie man einen Würfel mit 6 verschiedenen Seiten macht, das wäre toll! danke!

Quelle

2016-09-27 nelsoncookie 23

THREE.js hat ein undokumentiertes Material, THREE.MeshFaceMaterial, das seit einiger Zeit veraltet ist, aber immer noch in R81 funktioniert.

// 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

Anscheinend ist der Weg, um dies durch die Schaffung eines THREE.BufferGeometry Ebene für jede Seite des Würfels ist intern arbeitet und jedes Material auf eine Fläche Anwendung (mrdoob himself). Mit anderen Worten, wenn diese Methode nicht mehr funktioniert, besteht Ihre Alternative darin, einen Würfel aus 6 Ebenen manuell zu erstellen, sie zu einem Nullobjekt zu machen, damit Sie sie als einen einzelnen Würfel behandeln können und dann Ihre Materialien für jede Ebene separat anwenden.

Wenn Sie die Würfelflächen zur Laufzeit nicht dynamisch bestimmen müssen und sie in einer Textur "backen" können, ist eine technisch bessere (aber schwierigere) Option die Verwendung von UV-Mapping.

Quelle

2016-09-27 17:58:27 jered

vielen dank! immer noch seltsam, es gibt keine Online-Dokumentation dafür. : D –

three.js r81: Wie kann ich einen Würfel mit verschiedenen Texturen auf jeder Seite machen

Antwort

Verwandte Themen