Threejs OrbitControls 和 Tween答案

【问题标题】：Threejs OrbitControls and TweenThreejs OrbitControls 和 Tween
【发布时间】：2016-04-02 01:31:02
【问题描述】：

我一直在互联网上搜索，以了解如何在threejs 上为 orbitControls 添加补间。

实际目标：

根据鼠标移动围绕对象旋转相机。
补间运动以实现平滑的相机缓动

我可以通过在动画循环中移动相机位置来实现#2，但我不熟悉在将相机倾斜到中心点（轨道）时围绕对象移动相机的数学。这解决了#2，但不是#1

另一方面，orbitControls 完成了 #1，但我不确定如何与控件交互以在其更新时添加补间。

谢谢！迈克尔

【问题讨论】：

标签： three.js tween

【解决方案1】：

您可以简单地使用正弦和余弦来围绕一个点旋转任何对象。您选择一个 targetPosition（或目标对象）并在运行时更新 camera.position 和 lookAt 方法。我添加z 而不是y 的原因是因为我假设您想要深度旋转它而不是垂直旋转它。在Math.cos 和Math.sin 内部有一个时间参考，您可以使用它来改变旋转速度。

var targetPosition = new THREE.Vector2(100, 100);
var radius = 50;

function update() {
    requestAnimationFrame(update);
    camera.position.x = targetPosition.x + Math.cos(Date.now()/1000) * radius;
    camera.position.z = targetPosition.y + Math.sin(Date.now()/1000) * radius;
    camera.lookAt(targetPosition);
}

如果您只是不想从位置 A 到位置 B 进行补间，那么当用户单击按钮（例如）时，您应该创建一个目标 THREE.Vector3 并将该向量补间到所需位置，然后update() 只需添加

var cameraPosition = new THREE.Vector3();

window.addEventListener('click', handleClick, false);

function handleClick(e) {
    TweenMax.to(cameraPosition, 1, { x: 100, y: 100, z: 100 });
}

function update() {
    requestAnimationFrame(update);
    camera.position.copy(cameraPosition);
}

【讨论】：