owl-psv

owl-psv 是一款3D全景生成插件，满足多场景切换、VR模式、全景缩放、内点定位等功能

Example

安装

npm install owl-psv

依赖

three.js, sphoords.js, stats.js, tween.js

<script src="%PUBLIC_URL%/static/three-71.min.js"></script>
<script src="%PUBLIC_URL%/static/sphoords.js"></script>
<script src="%PUBLIC_URL%/static/stats.min.js"></script>
<script src="%PUBLIC_URL%/static/Tween.min.js"></script>

使用文档

初始化

var psv = new owlPSV()

初始化配置

参数 | 类型 | 含义 | 默认值 :---|:----|:----|:---- audios | object | 埋点点击音效 | 无 images | object | 埋点显示的帧动画 | 无 panoramas | array | 全景列表 | 无 data | array | 埋点坐标位置 | 无 container | element | 全景加载的div容器 | body max_fov | number | 最大仰视角 | 90 default_position | object | 默认的位置 | { long: 0, lat: 0 } anim_complated | function | 初始化加载动画完成 | 无 progress | function | 监听全景加载进度 | (msg) => ({ console.log(msg); })

实例API

API | 类型 | 含义 | 默认值 :---|:----|:----|:---- animateFrame | object | wegl中渲染帧动画的对象 | 详细API查看 createTween | function | 实现3D过渡动画 | orginObj,targetObj,delay,callback controlMusic | function | 控制音乐 | false initVideo | function | 初始化视频 | 无 controlVideo | function | 控制视频 | false closeVideo | function | 关闭视频 | 无 changeColor | function | 改变场景叠加颜色 | [color] changeMode | function | 改变场景模式 | 球体中心，球体外围 changeLong | function | 改变坐标经度 | [0-6] zoomOut | function | 放大场景 | 无 zoom | function | 修改场景的视场角 | [fov] zoomIn | function | 缩小场景 | 无 toggleFullscreen | function | 切换全屏 | 无 toggleAutorotate | function | 切换自动旋转 | 无 toggleAuto | function | 切换自动FPS刷新 | 无 updatePanorama | function | 切换场景 | [texture] toggleStereo | function | 切换VR | 无 toggleDeviceOrientation | function | 切换陀螺仪 | 无 fitToContainer | function | 重新计算屏幕可视范围 | 无 init | function | 场景初始化 | 无

效果展示

功能列表

• 多场景切换
• 自动旋转
• 放大缩小
• 全屏展示
• VR模式
• 陀螺仪
• 砸金蛋
• 全景内地里标志可触发

整体设计

插件结构

插件的设计如上所示。全景图片贴图到一个球体上面。人眼相机处于球体的中心。不断改变相机的观察点，一次来实现所有上下左右移动的人眼视觉效果。而不同的物体都有固定的x,y,z坐标，监听物体的点击事件，来绑定坐标位置和金蛋的交互事件处理。

数据提供

核心数据准备如下图所示：

未来规划

• 暂无