首页 文章

Threejs OrbitControls和Tween

提问于
浏览
2

我一直在网上搜索我如何在threejs上添加补间到orbitControls .

实际目标:

  • 根据鼠标移动在物体周围旋转相机 .

  • 补间动画,使平滑的相机缓和

我可以通过在动画循环中移动摄像机位置来实现#2,但是我不熟悉将摄像机围绕物体移动同时将其向后倾斜到中心点(轨道)的数学运算 . 这解决了#2,但不是#1

在另一个人orbitControls完成#1,但我不知道如何与控件交互以在其更新上添加补间 .

谢谢!迈克尔

1 回答

  • 0

    只需使用正弦和余弦,就可以围绕点旋转任何对象 . 您选择targetPosition(或目标对象),并在运行时更新 camera.positionlookAt 方法 . 我添加 z 而不是 y 的原因是因为我假设您想要深度旋转而不是垂直旋转 . 在 Math.cosMath.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);
    }
    

相关问题