Sebastian ViereckHier gibt es eine sehr gut Abbildung der möglichen Animation (Tweens) in Three.js:
http://www.grasshopper3d.com/profiles/blogs/port-of-robert-penner-s-easing-equations?xg_source=activity (siehe sehr gute Abbildung in den Kommentaren)
Zum Einbinden ist das sehr hilfreich: Tutorial Tween three.js
Ein kleines Beispiel für einen Tween:
new TWEEN.Tween( cube.rotation )
.to( { y: (cube.rotation.y + Math.PI/2)}, 1500 )
.easing( TWEEN.Easing.Back.EaseInOut).start();
Um mit der Tastatur (a,w,s,d und q,e und t,g,f,h) in einem three.js 3D-Projekt die Kamera zu bewegen, sind ein paar einfach Schritte nötig.
in der init-Methode
document.addEventListener( 'keypress', onDocumentKeyPress, false );
und eine einfache Methode
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):
