Question

我一直在网上搜索我如何在3j上添加补间到orbitControls。

实际目标：

根据鼠标移动在物体周围旋转相机。
补间平滑移动的动作

我可以通过在动画循环中移动相机位置来实现＃2，但是我不熟悉数学运算将相机绕着物体移动，同时将其向后倾斜到中心点（轨道运行）。这解决了＃2，但没有解决＃1

另一个人orbitControls完成＃1，但我不确定如何与控件交互以在其更新中添加补间。

谢谢！迈克尔

Answer 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);
}

Threejs OrbitControls和Tween

1 个答案: