I have a cube in ThreeJS and I would like to rotate it 90 degrees clockwise every time I press a button. I think I have the basic gist of it: create a Three.Animation instance, bind it to the cube, and then have the animation begin every time I press the correct button. However, I'm having a difficult time understanding ThreeJS's API, because it doesn't seem to contain any examples for its methods.
This is THREE.js's Animation constructor: ( root, data, interpolationType, JITCompile ) I don't understand what goes into the fields. I'm guessing root would be where I put my cube, but what about the rest?
Also can I just call animation.play() to cause the animation whenever I want? And how does the animationHandler work?
I think for for rotating an object 90 degrees clockwise, using the TWEEN class will do. I think the Animation class is handy for heavier stuff (like bones/skin morphs/etc.)
To use the tween class there are 3 basic steps:
- include the class in your file (
<script src="js/Tween.js"></script>) - add your tween for the event you need (
new TWEEN.Tween( cube.rotation ).to( { y:Math.random()}, 1000 ).easing( TWEEN.Easing.Quadratic.EaseOut).start();) - update the tween in your render loop (
TWEEN.update();)
You can have a have a look at the cubes tween example for a start.
I've modified the default cube example to have the tween in:
<!doctype html> <html lang="en"> <head> <title>three.js canvas - geometry - cube</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <script src="../build/Three.js"></script> <script src="js/Tween.js"></script> <script src="js/RequestAnimationFrame.js"></script> <script src="js/Stats.js"></script> <script> var container, stats; var camera, scene, renderer; var cube, plane; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var rad90 = Math.PI * .5; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); var info = document.createElement( 'div' ); info.style.position = 'absolute'; info.style.top = '10px'; info.style.width = '100%'; info.style.textAlign = 'center'; info.innerHTML = 'click to tween'; container.appendChild( info ); camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.y = 150; camera.position.z = 500; scene = new THREE.Scene(); // Cube var materials = []; for ( var i = 0; i < 6; i ++ ) { materials.push( [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ] ); } cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() ); cube.position.y = 150; cube.overdraw = true; scene.add( cube ); // Plane plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) ); plane.rotation.x = - 90 * ( Math.PI / 180 ); plane.overdraw = true; scene.add( plane ); renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild( stats.domElement ); document.addEventListener( 'mousedown', onDocumentMouseDown, false ); } // function onDocumentMouseDown( event ) { event.preventDefault(); new TWEEN.Tween( cube.rotation ).to( { y: cube.rotation.y + rad90}, 1000 ).easing( TWEEN.Easing.Quadratic.EaseOut).start(); new TWEEN.Tween( plane.rotation ).to( { z: plane.rotation.z + rad90}, 1000 ).easing( TWEEN.Easing.Quadratic.EaseOut).start(); console.log("click"); } // function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { TWEEN.update(); renderer.render( scene, camera ); } </script> </body> </html>
