Kategorien
three.js WebGL

Anordnen von WebGl 3D Objekten mit 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);

Ergebnis (Perspektive ist geändert worden):