4

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

另请参见图像。如果我升级我的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 );
4

1 回答 1

7

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

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

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

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

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

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

于 2013-05-23T17:27:51.570 回答