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