Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

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.

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.

Is this possible?

Example doors

    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 );
like image 959
Niels Avatar asked Mar 24 '23 20:03

Niels


1 Answers

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

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

EDIT: updated for three.js r.67

like image 76
WestLangley Avatar answered Mar 28 '23 20:03

WestLangley