three.js 路径导航

Posted 2023-03-13

参考技术A 模型按照指定的路径移动（以消防车为例）

使用组件Line2、LineGeometry、LineMaterial和坐标画出移动的路径，根据需求确定是否有这一步。（同工艺流程-管道线条步骤）

消防车从起始位置移动到路径的起始位置也需要计算，计算角度时，需要在原有的路径坐标增加两个坐标，分别是消防车朝向相反的任意一坐标和消防车位置坐标，方便计算第一个转向的角度值。接下来定义欧拉角，用于设置转向。

上面我们已经定义好了要用到的数据，现在要定义一个函数（用于循环），设置欧拉角数据为消防车的quaternion属性，取数组中的三项计算角度（注意此处计算的角度是转向的角度还是转向角度的补角），并转换为弧度值，改变欧拉角的y值（绕y轴旋转）。

使用tween设置动画，消防车的位置的改变，注意动画时间依据移动的距离设置，在动画结束的回调函数中调用上面定义的函数。

在消防车移动位置时，也可以设置相机的位置和镜头跟随消防车移动。