ThreeJS立方体纹理奇怪的视觉效果

Question

我在项目中遇到了一种奇怪的视觉效果（不知道该如何称呼）。我制作了一个立方体并使其可以旋转。下面是创建立方体的代码。

同时请参见图片。如果我增加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 );

- Niels

---

也许增加多边形数量：THREE.CubeGeometry(100, 200, 8, 4, 4); - Zevan

这确实会使它变得更好，但我放得越多，前面就会越模糊。这是一条直线，其中会有很多S形线条。 - Niels

这让我想起了PS1的图形 :) - drtobal

Answer 1

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

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

最好的解决方法是增加几何图形的镶嵌。

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

注意：这个构造函数有6个参数，而不是5个。

编辑：已更新至three.js r.67

- WestLangley

---

是的，今天我已经更改为WebGLRenderer，然后问题就解决了，但我需要一个备份，以备那些不支持WebGL的浏览器，并想知道是否有可能会更好地渲染。因此，我将接受这个答案，因为canvas无法得到任何改进。 - Niels