demo
react-krpanokrpano in react
安装 Install
npm install --save react-krpano
依赖 Dependency
-
渲染引擎 A Krpano player globally referenced by
<script>
:
使用 Usage
import React Component from 'react' import Krpano from 'react-krpano' { return <Krpano/> }
开发流程 workflow
- 使用Krpano官方提供的切片工具生成全景图分片(或者使用精简包)
- 下载定制开发包,将全景图分片包放入
krpano/pano/
- 安装并引入组件,
props
方式传入配置文件的路径 - 对配置文件
krpano/tour.xml
进行二次开发
切图方式
MAKE VTOUR (VR-OPT) Droplet
(推荐)
普通加载,调用方式:
<!-- tour/xml --> <!-- ... --> <!-- ... -->
MAKE VTOUR (NORMAL) Droplet
多级加载,适用于对图片缩放效果要求较高的场景,调用方式:
<!-- tour/xml --> <!-- ... --> <!-- ... -->
通信 Communication
Xml => React (e.g.)
需要props
传入所有回调函数
{ //... thishooks = this this //... { return <Krpano ='krpano/tour.xml' = /> } //...
无内部参数 No-Params
携带内部参数 Params
jscall(calc('krpano.hooks.param("' + scene[get(xml.scene)].name + '")'));
React => Xml (e.g.)
需要使用全局变量window.krpano
Get
方法
windowkrpanowindowkrpano
Call
方法
windowkrpano
Set
方法
windowkrpano
Props 接口参数
Name | Description | Defalt | Example |
---|---|---|---|
xml |
配置文件的路径 | krpano/tour.xml | tour.xml |
hooks |
提供给Krpano 调用的方法 |
null | {foo:()=>this.foo()} |
mounted |
资源加载完毕的回调函数 | null | {this.mounted} |
Loading | 加载页文本配置 | Null | loading={'loading'} |
dev | 开发者模式 | false | true |
gray | 重力感应 | true | true |
Config 配置文件
新建场景
<!-- 场景模块 --> <!-- 视窗配置 --> <!-- 预览配置 --> <!-- 全景配置 -->
添加热点
<!-- tour.xml -->...
<!-- style/style.xml -->......
动态热点
<!-- style/style.xml -->... ...
调整缩放范围
view
的fov
属性控制缩放(单位%)
... ...
限制视角
view
的fov
属性控制缩放(单位%)
... ...
限制视角不要与行星入场混用
自动旋转
配置是否允许自动旋转视角
<!-- style/style.xml -->......
锁定视角
参数 | 释义 |
---|---|
h | 锁定垂直视角 |
v | 锁定水平视角 |
windowkrpanohooks
window.krpano.hooks.unlocalView()
移镜入场
参数 | 释义 | 类型 |
---|---|---|
fov | 初始景深 | number |
angle | 视角偏移 | number |
call | 回调函数(须在hooks中注册过才能调用) | function |
<!-- style/style.xml -->......
星球入场
配置是否开启星球视角入场
<!-- style/style.xml -->......
光晕
<!-- tour.xml -->......
<!-- style/lensflare/lenflaresettings.xml -->
控制方式
drag | moveto
<!-- style/style.xml -->... set(control.mouse, drag); set(control.touch, moveto); ...
Q&A 常见问题
缩放视角失真
需要设置禁用用户缩放
热点控制
显示隐藏
windowkrpano
更新样式
设置两个样式不同但位置重合的热点,同时切换显示/隐藏状态,达到切换样式的目的:
windowkrpanowindowkrpano
Update 更新日志
0.0.7
- 新增移镜入场效果
- 内置多维锁定/解锁视角方法
0.0.6
- 优化内部逻辑,提高稳定性
- 文档补充
- 注意 调整了参数
loading
的属性
License
MIT © browniu