为什么three.js纹理面在旋转时看起来歪斜？答案

【问题标题】：Why three.js textured faces are looking askew when rotated?为什么three.js纹理面在旋转时看起来歪斜？
【发布时间】：2015-10-12 10:37:04
【问题描述】：

下面的例子有什么问题？

当面部不平行于视口时，它们看起来是歪斜的。

http://jsfiddle.net/mneja2mr/

    geometry = new THREE.CubeGeometry(10, 10, 10);

    texture=new THREE.ImageUtils.loadTexture(dataUrl);                                          

    material = new THREE.MeshBasicMaterial({
        map: texture
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

【问题讨论】：

您确定要使用 CanvasRenderer 吗？你可以使用 WebGLRenderer。
该示例适用于 WebGLRenderer 我觉得很愚蠢:-)，但我在设置平面顶点位置的 WebGLRenderer 页面中遇到了同样的问题 - 我想我未能使顶点共面由于一些旋转...我分叉了一个现有的 jsfiddle 来检查它，而没有注意到渲染器类型.. :-)
还请注意，您的纹理不是 2 的幂，可能 Canvas 渲染器对此有问题。如果这是真的，你可以打开一个问题。

标签： three.js texture-mapping uv-mapping

【解决方案1】：

CanvasRenderer 无法正确插入透视相机的属性；这打破了纹理映射。如果需要使用 CanvasRenderer 进行渲染，一个快速的解决方法是细分几何体：http://jsfiddle.net/41g0ffb3/2/

geometry = new THREE.CubeGeometry(10, 10, 10, 10, 10, 10);

【讨论】：