ThreeVideo

ThreeJS的视频实现,支持任意旋转,支持三维展示。

提示

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

基础示例

静态属性

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

名称类型说明
videoString,Array,HTMLVideoElement视频地址
videoTranslate{x:number, y:number, z: number}视频位置偏移,主要用于配合背景使用
videoWidthNumber视频宽度,不填写时默认使用实际宽度
videoHeightNumber视频高度,不填写时默认使用实际高度
canvasHTMLCanvasElement背景Canvas
alwaysFrontBoolean是否一直面朝屏幕,默认false

动态属性

支持响应式。

名称类型说明
visibleBoolean是否显示,默认 true
zIndexNumber图层叠加的顺序值,1 表示最底层。默认 zIndex:0
opacityNumber透明度,默认 1
positionArray位置经纬度
altitudeNumber视频海拔高度
rotation{x:number, y:number, z:number}旋转角度
scaleNumber, Array缩放大小
angleNumber旋转角度

ref 可用方法

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

函数返回说明
$$getInstance()Object3D获取实例
$$start播放视频
$$pause暂停视频

事件

事件参数说明
initThreeVideo实例初始化结束
最后更新时间:
贡献者: gu