Top Animation Options at THREE.JS

Question

What are the best animation options (texture animation, moving objects, hiding / showing an object, ...) in the three.js file? You are using the optional lib library. like tween.js or something else? Thanks.

Answer 1

Tween.js is a popular way to go ... check out the article at: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

Answer 2

Many agree that you need a RequestAnimationFrame to control how your browser works. Three.js even includes cross-browser firmware .

I would also recommend Frame.js for managing rendering on the timeline. RequestAnimationFrame does a great job, but only supports a minimum frame rate based on browser performance. Better flow control libraries, such as Frame, provide maximum frame rates and more efficient management of multiple intensive operations.

In addition, Javascript FSM has become an integral part of my three.js applications. If you are creating a user interface or game, objects must have states, and careful management of transient animations and rules is important for any complex application logic.

And yes, you need a weakening library. I often use jQuery.easing plugin . This is a plugin for jQuery.animate, but the relief functions can also be obtained as follows:

var x = {}; // an empty object (used when called by jQuery, but not us) var t = currentTime; var b = beginningValue; var c = potentialChangeInValue; var d = durationOfAnimation; valueAtTime = jQuery.easing.easeOutExpo(x, t, b, c, d); 

This jQuery plugin and most softening plugins are based on the Robert Penner ActionScript2 easing library , which is worth checking if the t, b, c, d thing looks weird.

Answer 3

Copy this:

 window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); (function animloop(){ requestAnimFrame(animloop); render(); })(); function render() { // DO YOUR STUFF HERE (UPDATES AND DRAWING TYPICALLY) } 

Original author: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 4

small roundup in 2017: check out this simple-lib timeline that can easily invoke the aforementioned FSM (statebased anim) and tween.js (smooth animator):

keyframes

Answer 5

I did this to emulate an orbit with the characteristics of a person (jerky), but it can be used for other animations, such as transfers of objects, position and rotation.

 function twController(node,prop,arr,dur){ var obj,first,second,xyz,i,v,tween,html,prev,starter; switch(node){ case "camera": obj = camera; break; default: obj = scene.getObjectByName(node); } xyz = "x,y,z".split(","); $.each(arr,function(i,v){ first = obj[prop]; second = {}; $.each(v,function(i,v){ second[xyz[i]] = v; }) tween = new TWEEN.Tween(first) .to(second, dur) .onUpdate(function(){ $.each(xyz,function(i,v){ obj[prop][xyz[i]] = first[xyz[i]]; }) }) .onComplete(function(){ html = []; $.each(xyz,function(i,v){ html.push(Math.round(first[xyz[i]])); }) $("#camPos").html(html.join(",")) }) if(i >0){ tween.delay(250); prev.chain(tween); } else{ starter = tween; } prev = tween; }); starter.start(); }