我一直在网上搜索我如何在threejs上添加补间到orbitControls .
实际目标:
根据鼠标移动在物体周围旋转相机 .
补间动画,使平滑的相机缓和
我可以通过在动画循环中移动摄像机位置来实现#2,但是我不熟悉将摄像机围绕物体移动同时将其向后倾斜到中心点(轨道)的数学运算 . 这解决了#2,但不是#1
在另一个人orbitControls完成#1,但我不知道如何与控件交互以在其更新上添加补间 .
谢谢!迈克尔
只需使用正弦和余弦,就可以围绕点旋转任何对象 . 您选择targetPosition(或目标对象),并在运行时更新 camera.position 和 lookAt 方法 . 我添加 z 而不是 y 的原因是因为我假设您想要深度旋转而不是垂直旋转 . 在 Math.cos 和 Math.sin 里面有一个时间参考,你可以用它来改变旋转的速度 .
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() 上添加
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); }
1 回答
只需使用正弦和余弦,就可以围绕点旋转任何对象 . 您选择targetPosition(或目标对象),并在运行时更新
camera.position
和lookAt
方法 . 我添加z
而不是y
的原因是因为我假设您想要深度旋转而不是垂直旋转 . 在Math.cos
和Math.sin
里面有一个时间参考,你可以用它来改变旋转的速度 .如果你只是想从位置A到位置B做补间,当用户点击一个按钮时(例如)你应该创建一个目标
THREE.Vector3
并将该矢量补间到所需的位置,并在update()
上添加