转自：https://blog.csdn.net/weixin_30924087/article/details/97260570
function initTween(geometry) {
var position = {y: 1};
tween = new TWEEN.Tween(position).to({y: 0}, 5000);
tween.easing(TWEEN.Easing.Sinusoidal.InOut);
var tweenBack = new TWEEN.Tween(position).to({y: 1}, 5000);
tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);
tween.chain(tweenBack);
tweenBack.chain(tween);
var onUpdate = function () {
var y = this.y;
//...对模型位置进行更改
};
tween.onUpdate(onUpdate);
tweenBack.onUpdate(onUpdate);
tween.start();
}</pre>
我一直好奇，为什么onUpdate回调里面的this是一个{y:0.768}这样的数据，不应该是tween对象么？
在最新的17版本的tween里面，onUpdate回调中this确实是指向tween实例的，所以我在17版本中这样实现上述代码（不在回调里面处理动画）：
var position;
function initTween(){
position = {x: 20};
var tween = new TWEEN.Tween(position).to({x: -20}, 2000);
tween.easing(TWEEN.Easing.Quadratic.Out);
var tweenBack = new TWEEN.Tween(position).to({x: 20}, 2000);
tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);
tween.chain(tweenBack);
tweenBack.chain(tween);
tween.start();
}
function render() {
sphere.position.x = position.x;
TWEEN.update();
renderer.render(scene, camera);
}</pre>
所以我们定义一个三维空间内的点P（x，y，z），按照tween已经实现的轨迹方程来定义P的运动轨迹；
并且在每帧渲染的时候，同步更新所有的补间（此时点P位置也会跟着变化），并根据点P的最新位置来改变物体的位置，从而实现物体运动。
评论 (0)