GLTF

ThreeJS的gltf加载器封装的组件,用于加载gltf模型

提示

来源 @vuemap/vue-amap-extra 组件库

基础示例

使用缓存,生成大量相同模型

静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
urlString模型地址,只支持gltf
configLoaderFunction(loader: GLTFLoader) => void配置loader,用于添加draco等扩展
useModelCacheBoolean是否启用模型缓存,开启后模型批量加载同一个模型地址时只有第一个执行下载,后续模型将直接使用clone能力,使用clone将会共用材质,可以减少内存占用。默认false

动态属性

支持响应式。

名称类型说明
scaleNumber,Array缩放大小,可以传入number那么X Y Z都会以该值缩放,也可以传入数组[x,y,z]将按该顺序缩放
positionArray车辆位置经纬度
visibleBoolean是否显示,默认 true
rotationObject {x:number,y: number, z: number}旋转角度,通过该参数调整模型方向
angleNumber模型绕Y轴旋转角度,该参数主要用于车辆模型的位置调整
heightNumber模型高度
moveAnimationObject {duration: number, smooth: boolean}是否开启移动动画,开启动画后position和angle都会以线性改变

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()Object3D获取实例
$$startAnimations开始动画,当模型自带动画时,调用该方法将触发动画
$$stopAnimations停止动画

事件

事件参数说明
initObject3D, 组件实例实例初始化结束
clickObject3D点击事件
mouseoverObject3D鼠标悬浮
mouseoutObject3D鼠标离开
最后更新时间:
贡献者: gu, gyy