Three.js 三个控件和Tween

我一直在互联网上搜索，想知道如何在threejs上的OrbitControl中添加tween

实际目标：

基于鼠标移动围绕对象旋转摄影机

在运动之间，相机会变得平滑

我可以通过在动画循环中移动摄影机位置来实现#2，但我不熟悉在对象周围移动摄影机，同时将其向后倾斜到中心点（环绕）的数学。这解决了#2，但没有解决#1

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

谢谢！

---

Michael

您可以简单地使用正弦和余弦围绕一个点旋转任何对象。 选择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);
}