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 ，那么我会看到我不想要的白线，但不会有凌乱的图片.但是当我把它设置为 true 时，我的画面会很乱.

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.

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

An excellent description of the issue can be found in the last half of this post.

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

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

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

附言请注意，此构造函数有 6 个参数，而不是 5 个参数.

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屋！