正しいパースペクティブのキューブ面の画像 - three.js

Question

キューブの面に画像を表示していますが、画像が期待通りに投影されません。画像は、キューブの三角形分割された面の中央ブレークに向かって歪みがあります。 Please look at this image for a clear example線は直線である必要があります。

パースペクティブを壊すことなく、キューブの顔に画像を表示するにはどうすればよいですか？

互換性の理由からCanvasRendererを使用してレンダリングしています。狂気の事はあなたの最後を行く何

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

あなたが見ているものは、CanvasRendererというアーティファクトです。あなたができることは、ジオメトリをテッセレーションすることです。例えば、

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

three.js r.75

Answer 2

ないアイデア：

は、ここで関連するコード（のCoffeeScript）です。

あなたのfaceVertexUvsはジオメトリに対して正しくないようですが、このコードをチェックしても問題は解決できません。

  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);