立方体脸上的图像具有正确的视角 - three.js

我在立方体的脸上显示图片，但不幸的是图像没有按预期投影。图片在立方体的三角形表面中朝向中心折断处有畸变。 Please look at this image for a clear example线应该在一条直线上。立方体脸上的图像具有正确的视角 - three.js

如何在不破坏视角的情况下在立方体的正面显示图片？

出于兼容性原因，我正在使用CanvasRenderer进行渲染。

下面是相关代码（CoffeeScript的）：

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)

来源

2016-03-25 ig-dev

你们看到的是CanvasRenderer神器。您可以做的最好的方法是镶嵌您的几何图形。例如，

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

three.js所r.75

来源

2016-03-25 20:26:58 WestLangley

啊，我没有看到这一切，这是正确的。但通过神器这对我来说意味着什么。 –

-1

不知道什么疯狂的事情，去你的结束。

它似乎是你的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);

来源

2016-03-25 15:57:49

立方体脸上的图像具有正确的视角 - three.js

回答

相关问题