@vuemap/vue-amap高德vue组件库常用技巧(九)- threejs

发布网友发布时间：2024-09-01 16:59

共1个回答

热心网友时间：2024-09-01 17:36

在 Vue 地图组件库 @vuemap/vue-amap 中，本文将深入探讨如何在高德地图中应用 threejs 技术。这个库基于高德JSAPI2.0和Loca2.0，支持Vue2和Vue3版本，你可以在此处了解更多信息：vue-amap.guyixi.cn/。此库已经内置了基础的threejs组件，如three图层、灯光组件等，以方便开发者在地图上实现更丰富的3D效果。
首先，让我们来看看如何在高德地图中使用GlCustomLayer加载threejs。虽然这种方法可以让图层与地图共用一个webgl上下文，实现层级叠加，但同时也存在局限性，比如无法利用threejs的后处理功能，且更新时需要地图整体渲染，影响性能。下面是加载threejs的示例：

为了处理threejs的后处理和大模型加载，组件库提供了独立的canvas图层选项。例如，当需要处理1G以上的3dtile模型时，独立canvas可以避免卡顿，但会导致无法实现层级渲染和深度显示。
此外，组件库还支持threejs图层的点击、鼠标悬停和离开事件，通过内部射线功能，自定义添加的threejs物体也能触发事件。对于大量相同的gltf模型加载，库内通过模型共用技术优化内存，避免性能问题。下面是使用共用材质的内存对比：

...

...

在实际项目中，这些技巧有助于提升在 Vue-amap 中使用threejs的效率和性能。