补间相机围绕地球 three.js 和 tween.js 的运动
tween camera movement around globe three.js and tween.js
试图让相机在按下按钮时围绕地球平滑地旋转到新位置。我已经通过以下方式完成了位置证明,以检查坐标是否正常
camera.position.set(posX,posY,posZ);
camera.lookAt(new THREE.Vector3(0,0,0));
然而,当我执行以下操作以尝试使其补间时,没有任何动作。似乎没有调用 .onupdate,我不知道我做错了什么
var from = {
x : camera.position.x,
y : camera.position.y,
z : camera.position.z
};
var to = {
x : posX,
y : posY,
z : posZ
};
var tween = new TWEEN.Tween(from)
.to(to,600)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function () {
camera.position.set(this.x, this.y, this.z);
camera.lookAt(new THREE.Vector3(0,0,0));
})
.onComplete(function () {
camera.lookAt(new THREE.Vector3(0,0,0));
})
.start();
感谢任何帮助
您是否在动画函数中添加了 TWEEN.update()?因为您的代码确实有效。参见 fiddle。 http://jsfiddle.net/Komsomol/r4nctoxy/
function animate() {
TWEEN.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
试图让相机在按下按钮时围绕地球平滑地旋转到新位置。我已经通过以下方式完成了位置证明,以检查坐标是否正常
camera.position.set(posX,posY,posZ);
camera.lookAt(new THREE.Vector3(0,0,0));
然而,当我执行以下操作以尝试使其补间时,没有任何动作。似乎没有调用 .onupdate,我不知道我做错了什么
var from = {
x : camera.position.x,
y : camera.position.y,
z : camera.position.z
};
var to = {
x : posX,
y : posY,
z : posZ
};
var tween = new TWEEN.Tween(from)
.to(to,600)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function () {
camera.position.set(this.x, this.y, this.z);
camera.lookAt(new THREE.Vector3(0,0,0));
})
.onComplete(function () {
camera.lookAt(new THREE.Vector3(0,0,0));
})
.start();
感谢任何帮助
您是否在动画函数中添加了 TWEEN.update()?因为您的代码确实有效。参见 fiddle。 http://jsfiddle.net/Komsomol/r4nctoxy/
function animate() {
TWEEN.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}