Bild auf Würfel Gesicht mit der richtigen Perspektive - three.js

Question

Ich zeige ein Bild auf einer Fläche eines Würfels, aber leider wird das Bild nicht wie erwartet projiziert. Das Bild weist eine Verzerrung in Richtung der Mittenbrechung in der triangulierten Fläche des Würfels auf. Please look at this image for a clear example Die Linien sollten in einer geraden Linie sein.

Wie kann ich ein Bild auf der Vorderseite eines Würfels anzeigen, ohne die Perspektive zu verändern?

Ich bin Rendering mit einem CanvasRenderer aus Kompatibilitätsgründen.

Hier ist der relevante Code (Coffee):

scene = new THREE.Scene() 
camera = new THREE.PerspectiveCamera(60, windowWidth/windowHeight, 1, 1000) 
renderer = new THREE.CanvasRenderer() 
renderer.setSize(windowWidth, windowHeight) 
document.body.appendChild(renderer.domElement) 

geometry = new THREE.BoxGeometry(10, 10, 10) 
materials = [ 
    new THREE.MeshBasicMaterial({map: textureLoader.load('./grid.gif')}) 
    new THREE.MeshLambertMaterial({color: 0x0000AA}) 
    # ... 
] 
faceMaterial= new THREE.MeshFaceMaterial(materials) 
cube = new THREE.Mesh(geometry, faceMaterial) 
scene.add(cube) 
renderer.render(scene, camera) 

Answer 1

Was Sie sehen, ist ein Artefakt von CanvasRenderer. Das Beste, was Sie tun können, ist Ihre Geometrie zu tessellieren. Zum Beispiel

var geometry = new THREE.BoxGeometry(10, 10, 10, 4, 4, 4); 

three.js r.75

Answer 2

Keine Ahnung, was verrückt Dinge, die Ihr Ende geht.

Es scheint, dass Ihre FaceVertexUvs für die Geometrie nicht korrekt sind, aber dies sollte nicht passieren, überprüfen Sie diesen Code, es könnte Lösung für Ihr Problem sein.

  camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
      camera.position.z = 400; 

      scene = new THREE.Scene(); 
      scene.add(new THREE.HemisphereLight(0xffffff,0xffffff,1.0)) 


      var geometry = new THREE.BoxGeometry(200, 200, 200); 

      var texture = new THREE.TextureLoader().load("textures/UV_Grid_Sm.jpg"); 
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
      var material1 = new THREE.MeshBasicMaterial({ color:0xff0000 }); 
      var material2 = new THREE.MeshBasicMaterial({ color:0x00ff00 }); 
      var material3 = new THREE.MeshBasicMaterial({ map:texture }); 
      var material4 = new THREE.MeshBasicMaterial({ color:0xffff00 }); 
      var material5 = new THREE.MeshBasicMaterial({ color:0x00ffff }); 
      var material6 = new THREE.MeshBasicMaterial({ map:texture }); 

      var material = [ material1,material2,material3,material4,material5,material6] 

      var mat = new THREE.MeshFaceMaterial(material); 
      mesh = new THREE.Mesh(geometry, mat); 

      scene.add(mesh); 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement);