owl-psv

1.0.0 • Public • Published

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坐标,监听物体的点击事件,来绑定坐标位置和金蛋的交互事件处理。

数据提供

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

未来规划

  • 暂无

Readme

Keywords

none

Package Sidebar

Install

npm i owl-psv

Weekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

88.4 kB

Total Files

4

Last publish

Collaborators

  • beth