All geek questions in one place

Animated TripleJS Animation

I have a cube in ThreeJS, and I would like to rotate it 90 degrees clockwise every time I press the button. I think I have a basic gist: create an instance of Three.Animation, bind it to the cube, and then start the animation every time I click the right button. However, I am having difficulty understanding the threeJS APIs because it does not seem to contain any examples for its methods.

This is the animation constructor THREE.js: (root, data, interpolationType, JITCompile) I do not understand what is included in the fields. I assume that the root will be when I put the cube, but what about the rest?

Is it also possible to just call animation.play() to call the animation whenever I want? And how does Handler animation work?

+4
source share
1 answer

I think that to rotate the object 90 degrees clockwise using the TWEEN class, this will do. I think the Animation class is suitable for heavier materials (e.g. bone / skin morphs, etc.).

To use the twin class, follow 3 main steps:

  • include the class in your file ( <script src="js/Tween.js"></script> )
  • add your animation for the required event ( new TWEEN.Tween( cube.rotation ).to( { y:Math.random()}, 1000 ).easing( TWEEN.Easing.Quadratic.EaseOut).start(); )
  • update animation in rendering loop ( TWEEN.update(); )

You can see an example of tween cubes for a start.

I changed the default cube example to enable animation:

three.js cube tween

 <!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>
+10
source

Source: https://habr.com/ru/post/1394164/

More articles:


All Articles