ThreeJS实现船行效果

JavaScript020

ThreeJS实现船行效果,第1张

解决方法:

官方提供了射线捕获的接口 raycaster.intersectObjects , 但是只能识别自建的 Mesh 模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来

所以我们需要在模型导入后, 在 onProgress 回调中对其进行递归获取子 Mesh , 将所有 Mesh 存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给 raycaster.intersectObjects , 即可识别

1. 递归函数

2.mtlLoader的onProgress事件

3.鼠标点击事件

2D平面展示有两种, 一种是这个项目里的鼠标触碰直升机的提示牌, 时刻与摄像头在同一角度的2D平面另一种是只在一个方向上可见的2D平面

封装的canvas函数

解决方法: 动画一般就放在固定的动画函数里, 通过 requestAnimationFrame 维持60帧

解决方法:

您好，嘉善县第四航运公司船队编号是JSS-04。该船队由嘉善县第四航运公司组建，其中包括一艘货轮、一艘拖轮和一艘游艇。该船队主要负责运输货物和乘客，以及提供港口服务。该船队的船只均符合国家船舶安全法规，并具有良好的安全记录。该船队的船员均经过严格的培训，并具有丰富的船舶运营经验。