Three.js单击事件后沿路径移动摄像机

时间:2013-08-12 16:49:15

标签: javascript animation camera three.js

对于过去......很多小时,我已经尝试过,搜索过并阅读了如何让摄像机沿着Three.js中的路径移动。我似乎无法找到它,或者我已经饱和,无法看到答案,即使它让我满脸。

我想要的并不是那么难。我在3D空间中有几个类似于图标的东西,我希望能够点击它。我有它的THREEx扩展,所以这部分很好。现在,相机沿预定路径平滑移动的部分,以及它的外观Y轴,使其面向下一个“图标”。

我的第一个方法是使用Bezier曲线制作一条路径,并找出如何使其中一个呈螺旋状略微向上,然后找出如何在点击事件后沿着该路径为相机设置动画。我仍然坚持 - 努力 - 试图找出如何制作一条向上弯曲的简单路径,更不用说令人生畏的部分。

我是否在正确的轨道上?如果是这样,我该如何制作这样的路径?或者我应该制作一个常规的贝塞尔曲线并旋转和编辑它,直到它符合我的需要?最后,我如何使相机沿着(短)动画,平滑运动的路径前进?

提前致谢!

1 个答案:

答案 0 :(得分:0)

请看一下这个链接:http://cubic.org/docs/hermite.htm

它解释了曲线计算,包括您想要了解的变体。例如,贝塞尔曲线对于动画来说不是一个好的曲线,因为它不会使点相距遥远,从而导致相机意外的速度变化。

在链接中,讨论从退出数学解释器开始,提供伪代码,然后展示如何使用相同初始数学的变体导出几种流行类型的曲线。这继续TCB:紧张,连续性和&偏差曲线,为您提供相机所需的精美控制类型。