ThreeJS Cube纹理怪异视觉 [英] ThreeJS Cube texture strange visual

问题描述

我的项目中有一种奇怪的视觉效果（不知道如何调用它）。我做了一个立方体，可以旋转。下面我得到了创建立方体的代码。

I'm having a strange visual effect (don't know how to call it) in my project. I've made a cube and made it possible to rotate. Below I got the code which creates the cube.

另见图片。如果我升级我的 segmentsWidth 和 segmentsHeight 它会在侧面看起来更好看，但在前面线条不会要直。图像使用下面显示的代码制作。我希望看到的是正面的直线和侧面不应该有V的线。

Also see the image. If I upscale my segmentsWidth and segmentsHeight it's kinda gonna look better on the side, but on the front the lines will not be straight. The image is made with the code shown below. What I would like to see is the lines at the front straight and side ways it should not have a V in it.

如果我有 overdraw = false 比我看到的我不想要的白线但没有弄乱的画面。但当我把它设置为真时，我会有一张凌乱的画面。

If I have the overdraw = false than I will see white lines which I don't want but don't got a messy picture. But when I set it to true I will have a messy picture.

这可能吗？

    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 );

推荐答案

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

This is a well-known issue with CanvasRenderer.

可以在这篇文章。

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

Your best solution is to increase the tessellation of your geometry.

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

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

P.S. Notice there are 6, not 5, args to this constructor.

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

updated for three.js r.67

这篇关于ThreeJS Cube纹理怪异视觉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！