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