使用Three.js的对象视图不良

Question

I have problems with a simple code with three.js, where I'm trying to draw a room with three walls and a floor ... everything is perfect, according to the codes I used of the references of three.js page... but you may notice that the walls are not aligned...

why are not aligned?, if my code is right (I think).

The Code:

    //scene-camera
    var scene = new THREE.Scene ();
    var camera =  new THREE.PerspectiveCamera (90, window.innerWidth/window.innerHeight, 1, 1000);
    camera.position.z = 13;
    camera.updateMatrixWorld (true);
    scene.add (camera);

    //renderer
    var renderer = new THREE.WebGLRenderer ();
    renderer.setSize (window.innerWidth, window.innerHeight);
    document.body.appendChild (renderer.domElement);

    //geometry      
    var geometryPlane = new THREE.PlaneGeometry (10, 5);
    var geometryPlane2 = new THREE.PlaneGeometry (10, 10);

    //materials
    var materialBlue = new THREE.MeshBasicMaterial ({color: 0x3C64C8, side: THREE.DoubleSide});
    var materialGreen = new THREE.MeshBasicMaterial ({color: 0x3CC864, side: THREE.DoubleSide});
    var materialRed = new THREE.MeshBasicMaterial ({color: 0xFF33C3C, side: THREE.DoubleSide});
    var materialYellow = new THREE.MeshBasicMaterial ({color: 0xFFD700, side: THREE.DoubleSide});

    //objets-plane      
    var plane1 = new THREE.Mesh (geometryPlane, materialBlue);
    var plane2 = new THREE.Mesh (geometryPlane, materialGreen);
    var plane3 = new THREE.Mesh (geometryPlane, materialRed);
    var plane4 = new THREE.Mesh (geometryPlane2, materialYellow);

    //vectors
    var vecY = new THREE.Vector3(0, 1, 0);
    var vecX = new THREE.Vector3(1, 0, 0);
    var vec0 = new THREE.Vector3(0, 0, 0);

    //add scene-camera position of the objects
    scene.add (plane1);
    scene.add (plane2);
    scene.add (plane3);
    scene.add (plane4);

    var render = function (){
        //translate
        plane1.translateOnAxis (vecX, 5);
        plane3.translateOnAxis (vecX, -5);
        plane4.translateOnAxis (vecY, -2.5);

        //rotate            
        plane1.rotation.y = THREE.Math.degToRad(95);
        plane3.rotation.y = THREE.Math.degToRad(95);
        plane4.rotation.x = THREE.Math.degToRad(95);

        renderer.render (scene, camera);
    }
    render ();

Thanks for any help!

Answer 1

Try

    plane1.rotation.y = THREE.Math.degToRad(90);
    plane3.rotation.y = THREE.Math.degToRad(90);
    plane4.rotation.x = THREE.Math.degToRad(90);

instead of

    plane1.rotation.y = THREE.Math.degToRad(95);
    plane3.rotation.y = THREE.Math.degToRad(95);
    plane4.rotation.x = THREE.Math.degToRad(95);