javascript THREE.JS 中动画的最佳选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11739926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best options for animation in THREE.JS
提问by soil
What is the best options for animations (texture animations, moving objects, hiding/showing object,...) in three.js ? Do you use extra lib. such as tween.js or something else ? Thanks.
Three.js 中动画（纹理动画、移动对象、隐藏/显示对象...）的最佳选择是什么？你使用额外的库吗？例如 tween.js 或其他什么？谢谢。
回答by Lee Stemkoski
Tween.js is the popular way to go... check the article at: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/
Tween.js 是流行的方式……查看文章：http: //learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/
回答by BishopZ
Many agree that you need RequestAnimationFrameto manage browser performance. Three.js even includes a cross-browser shim for it.
许多人同意您需要RequestAnimationFrame来管理浏览器性能。Three.js 甚至为它包含了一个跨浏览器的 shim。
I would also recommend Frame.jsfor managing timeline-based renders. RequestAnimationFrame does a great job, but only maintains a minimum frame-rate based on the performance of the browser. Better flow control libraries like Frame offer the ability to have a maximum frame-rate, and better manage multiple intensive operations.
我还推荐Frame.js来管理基于时间线的渲染。RequestAnimationFrame 做得很好，但仅根据浏览器的性能维持最低帧率。像 Frame 这样更好的流控制库能够提供最大帧率，并更好地管理多个密集型操作。
Also, Javascript FSMhas become an essential part of my three.js applications. Whether you are building a UI or a Game, the objects have to have states, and careful management of transitioning animations and rules are essential for any complex application logic.
此外，Javascript FSM已成为我的 Three.js 应用程序的重要组成部分。无论您是在构建 UI 还是游戏，对象都必须具有状态，并且仔细管理过渡动画和规则对于任何复杂的应用程序逻辑都是必不可少的。
And yes, you need an easing library. I often use the jQuery.easing plugin. It is a plugin for jQuery.animate, but the easing functions can also be accessed like this:
是的，你需要一个缓动库。我经常使用jQuery.easing 插件。它是 jQuery.animate 的插件，但也可以像这样访问缓动函数：
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 easing plugins are based on Robert Penner's ActionScript2 easing library, which is worth checking out if the t,b,c,d thing above looks strange.
这个 jQuery 插件和大多数缓动插件都基于Robert Penner 的 ActionScript2 缓动库，如果上面的 t,b,c,d 东西看起来很奇怪，值得检查一下。
回答by Flavien Volken
Copy paste 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)
}
The original author is: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
原作者为：http: //paulirish.com/2011/requestanimationframe-for-smart-animating/
回答by coderofsalvation
回答by Chris Glasier
I made this to emulate orbiting with human characteristics (jerky) but it can be used for other animations like object translations, positions and rotations.
我这样做是为了模拟具有人类特征（生涩）的轨道运行，但它可以用于其他动画，如对象平移、位置和旋转。
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();
}
