ThreeJS实现船行效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ThreeJS实现船行效果相关的知识，希望对你有一定的参考价值。
参考技术A 解决方法:
官方提供了射线捕获的接口 raycaster.intersectObjects , 但是只能识别自建的 Mesh 模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来
所以我们需要在模型导入后, 在 onProgress 回调中对其进行递归获取子 Mesh , 将所有 Mesh 存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给 raycaster.intersectObjects , 即可识别
1. 递归函数
2.mtlLoader的onProgress事件
3.鼠标点击事件
2D平面展示有两种, 一种是这个项目里的鼠标触碰直升机的提示牌, 时刻与摄像头在同一角度的2D平面; 另一种是只在一个方向上可见的2D平面
封装的canvas函数
解决方法: 动画一般就放在固定的动画函数里, 通过 requestAnimationFrame 维持60帧
解决方法:
以上是关于ThreeJS实现船行效果的主要内容，如果未能解决你的问题，请参考以下文章