三个JS Cube纹理怪异的视觉效果

Question

我的项目中有一种奇怪的视觉效果（不知道如何调用它）。我做了一个立方体，可以旋转。下面我得到了创建立方体的代码。

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

如果我有overdraw = false而不是我会看到我不想要的白线，但没有弄乱的图片。但是当我把它设置为真时，我会有一个凌乱的画面。

这可能吗？

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

Answer 1

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

this post的后半部分可以找到对问题的精彩描述。

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

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

P.S。请注意，此构造函数有6个而不是5个args。

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