如何延迟Tween.js动画直到单击按钮? (three.js)
问题描述:
我想使它成为我的相机的补间动画仅在单击对象时开始。这个对象可能是我的three.js场景中的一个对象,或者只是一个HTML按钮。这里是我的相机动画,其工作代码:如何延迟Tween.js动画直到单击按钮? (three.js)
// initial position of camera
var camposition = { x : 0, y: 0, z:3100 };
// target position that camera tweens to
var camtarget = { x : 0, y: 0, z:8500 };
var tweencam = new TWEEN.Tween(camposition).to(camtarget, 1600);
tweencam.onUpdate(function(){
camera.position.x = camposition.x;
camera.position.y = camposition.y;
camera.position.z = camposition.z;
});
// delay tween animation by three seconds
tweencam.delay(3000);
tweencam.easing(TWEEN.Easing.Exponential.InOut);
tweencam.start();
三秒延迟动画相反的,我想mouse1按钮被点击时检测,然后再启动动画。不知道如何做到这一点,或者如果有更简单的替代方法?
答
所有你需要做的就是换一个函数内部的补间开始,然后调用上的按钮点击此功能:
function launchTween() {
tweencam.start();
}
<button onclick="launchTween()">Launch Tween</button>
整个代码将如下所示:
// initial position of camera
var camposition = {
x: 0,
y: 0,
z: 3100
};
// target position that camera tweens to
var camtarget = {
x: 0,
y: 0,
z: 8500
};
var tweencam = new TWEEN.Tween(camposition).to(camtarget, 1600);
tweencam.onUpdate(function() {
camera.position.x = camposition.x;
camera.position.y = camposition.y;
camera.position.z = camposition.z;
});
tweencam.easing(TWEEN.Easing.Exponential.InOut);
function launchTween() {
tweencam.start();
}
<button onclick="launchTween()">Launch Tween</button>
希望这有助于! :)
啊,谢谢!有用 :) – Ben