ThreeJS 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一个众所周知的问题。

在这篇文章的后半部分可以找到对该问题的出色描述。

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

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

PS注意这个构造函数有6个而不是5个args。

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