Question

我在立方体的脸上显示图片，但遗憾的是图像未按预期投影。图片在立方体的三角形面中向中心断开扭曲。 Please look at this image for a clear example线条应该是直线。

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

出于兼容性原因，我使用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)

Answer 1

您所看到的是CanvasRenderer的工件。您可以做的最好的是细分您的几何体。例如，

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

three.js r.75

Answer 2

不知道结束了什么疯狂的事情。

看起来你的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 );

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

2 个答案: