Dziwna wizualna tekstura ThreeJS Cube

Mam dziwny efekt wizualny (nie wiem jak to nazwać) w moim projekcie. Zrobiłem sześcian i umożliwiłem obrót. Poniżej mam kod, który tworzy kostkę.

Zobacz także obraz. Jeśli zwiększę mojesegmentsWidth isegmentsHeight trochę lepiej będzie wyglądać z boku, ale z przodu linie nie będą proste. Obraz zostanie wykonany za pomocą kodu pokazanego poniżej. To, co chciałbym zobaczyć, to linie na przedniej prostej i bocznych drogach, w których nie powinna mieć litery V.

Jeśli mamoverdraw = false niż zobaczę białe linie, których nie chcę, ale nie mam bałaganu. Ale kiedy ustawię go na true, będę miał niechlujny obraz.

czy to możliwe?

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

questionAnswers(1)

yourAnswerToTheQuestion