Having some issues with a basic code using three.js. I'm attempting to create a room with three walls and a floor, everything seems to be in order based on the references from the three.js page. However, there is an alignment issue with the walls...
Why aren't they aligned when my code appears to be correct (at least, I think so)?
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});
//objects-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 ();
Appreciate any assistance you can provide!