ThreeJS Cube 纹理奇怪的视觉效果答案

【问题标题】：ThreeJS Cube texture strange visualThreeJS Cube 纹理奇怪的视觉效果
【发布时间】：2014-07-03 08:34:45
【问题描述】：

我的项目中有一个奇怪的视觉效果（不知道怎么称呼它）。我制作了一个立方体并使其可以旋转。下面我得到了创建立方体的代码。

另见图片。如果我升级我的segmentsWidth 和segmentsHeight，它的侧面看起来会更好，但前面的线条不会是直的。该图像是使用下面显示的代码制作的。我想看到的是前面的直线和侧面的线条不应该有V。

如果我有overdraw = false，我会看到我不想要但没有乱七八糟的图片的白线。但是当我将它设置为 true 时，我会得到一个凌乱的画面。

这可能吗？

    container = document.createElement( 'div' );
    document.body.appendChild( container );

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

    scene = new THREE.Scene();

    // Cube

    var geometry = new THREE.CubeGeometry( 100, 200, 8, 1, 1 );

    cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial([
        new THREE.MeshBasicMaterial({ color: 0xefefef }),
        new THREE.MeshBasicMaterial({ color: 0xefefef }),
        new THREE.MeshBasicMaterial({ color: 0xefefef }),
        new THREE.MeshBasicMaterial({ color: 0xefefef }),
        new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('img/door.jpg'),
            overdraw: false
        }),
        new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('img/door.jpg'),
            overdraw: false
        })
    ]));
    cube.position.y = 150;
    scene.add( cube );

【问题讨论】：

可能增加了多边形的数量：THREE.CubeGeometry( 100, 200, 8, 4, 4 );
这确实让它变得更好，但我放的越多，前面就越模糊。这是一条直线，里面会有很多S线。
这还记得我 PS1 的图形 :)

标签： javascript three.js

【解决方案1】：

这是CanvasRenderer 的一个众所周知的问题。

可以在this post 的后半部分找到对该问题的出色描述。

您最好的解决方案是增加几何体的细分。

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

附：请注意，此构造函数有 6 个参数，而不是 5 个参数。

编辑：更新为 three.js r.67

【讨论】：

是的，今天我已经更改为 WebGLRenderer 并且已修复，但我需要为不支持 WebGL 的浏览器备份，并想知道是否有可能更好地呈现。所以我会接受这是正确的答案，因为画布没有任何改进。