Arranging WebGL 3D objects with three.js


var pageRotation = 0.9; 
var pageHeight = 300; 
var pageWidth = 200; 
var pageLength = 20; 

bookPageContainer = new THREE.Object3D(); 
bookPageContainer.rotation.x = pageRotation;

//linkes Buchhälfte
 leftPageContainer = new THREE.Object3D();
 leftPageContainer.position.set( -pageLength/2, 0, 0 );
 leftPageContainer.rotation.z = -Math.PI * 0.5;
 leftPageCon = new THREE.CubeGeometry( pageWidth, pageLength, pageHeight, 1,1,1, loadLeftPageTextures());
 leftPage = new THREE.Mesh(leftPageCon, new THREE.MeshFaceMaterial());
 leftPage.position.set( -100, 0, 0 );
 leftPageContainer.add( leftPage );
 bookPageContainer.add( leftPageContainer );

//Buchrücken
 bookSideCon = new THREE.CubeGeometry( pageHeight, 1, 2* pageLength, 1,1,1, getBookSideTextureWithText("Buchrücken"));
 bookSide = new THREE.Mesh(bookSideCon, new THREE.MeshFaceMaterial());
 bookSide.position.set( 0, -pageLength/2 , 0 );
 bookSide.rotation.y = -Math.PI/2;
 bookPageContainer.add( bookSide );

//rechte Buchhälfte
 rightPageContainer = new THREE.Object3D();
 rightPageContainer.position.set( pageLength/2, 0, 0 );
 rightPageContainer.rotation.z = Math.PI * 0.5;
 rightPageCon = new THREE.CubeGeometry( pageWidth, pageLength, pageHeight, 1, 1, 1 , new THREE.MeshLambertMaterial( { color: 0x00ff00, wireframe: false, needsUpdate: true } )) ;
 rightPage = new THREE.Mesh(rightPageCon, new THREE.MeshFaceMaterial());
 rightPage.position.set( 100, 0, 0 );
 rightPageContainer.add( rightPage );
 bookPageContainer.add( rightPageContainer );

scene.add(bookPageContainer);

Result (Perspective has been changed):