ThreeJS Cube texture strange visual

Question

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?

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

Answer 1

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

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

EDIT: updated for three.js r.67