相机姿态的俯仰角和偏航角
是否用户触发
相机姿态中可视角度变化
相机的可视角度
是否用户触发
相机姿态中相机位置变化
相机位置
是否用户触发
相机姿态变化
相机姿态
是否用户触发
抛出错误
抛出错误
手势 触发
手势类型
手指位置
是否手势结束
模态间切换动画结束
当前点位
相机姿态
是否用户触发
模态间切换动画开始
当前点位
相机姿态
是否用户触发
pan 手势(滑动屏幕) 的惯性运动
意图的相机姿态
是否手势结束
鼠标焦点环被隐藏
鼠标焦点环位置被重新计算
焦点碰撞结果
焦点环 mesh
鼠标滚轮被触发
滚轮数值
是否手势结束
开始加载并移动到某个观察点位
移动到的点位下标
是否用户触发
移动到某个观察点位被取消
对应的点位下标
移动中， 会告知移动状态（耗时百分比）
将要移动到的点位下标
上一个点位下标
整个过程经度 [0-1]
pan 手势(滑动屏幕) 被触发
相机姿态
是否手势结束
移动到某个观察点位
移动到点位下标
相机姿态
是否用户触发
某个观察点的全景资源加载失败
错误对象
对应的点位下标
某个观察点的全景资源加载完成
对应的点位下标
观察点位被选择
选择的点位
开始移动到某个观察点位
移动到点位下标
相机姿态
是否用户触发
开始加载某个观察点的全景资源
移动到的点位下标
pinch 手势(双指缩放) 被触发
缩放数值
是否手势结束
tap 手势(点击屏幕) 被触发
点击对应的三维射线
点击对应的屏幕位置
长按持续时间
tap 手势(点击屏幕) 被触发
点击对应的三维射线
点击对应的屏幕位置
是否手势结束
观察点的全景资源加载被中止
加载点位下标
对应的 observer 详情
观察点的全景资源加载失败
错误对象
加载点位下标
对应的 observer 详情
观察点的全景资源加载完成
加载点位下标
对应的 observer 详情
观察点的全景资源加载中，可获取到进度
加载进度 [0-1]
加载点位下标
对应的 observer 详情
观察点的全景资源开始加载
加载点位下标
对应的 observer 详情
意图要退出VR眼镜模式
意图要变化相机的可视角度 可以通过 return false 阻止
意图要变化相机的可视角度
可以通过 return false 阻止
意图要触发手势， 可以通过 return false 阻止
手势类型
手指位置
是否手势结束
可以通过 return false 阻止
意图要触发 pan 手势(滑动屏幕) 的惯性运动, 可以通过 return false 阻止
意图的相机姿态
可以通过 return false 阻止
意图要触发 鼠标滚轮 可以通过 return false 阻止
滚轮数值
意图的fov变更
是否手势结束
可以通过 return false 阻止
意图要移动到某个点位 可以通过 return false 阻止
图要移动到的点位下标
移动参数
是否用户触发
可以通过 return false 阻止
意图要触发 pan 手势(滑动屏幕)， 可以通过 return false 阻止
意图的相机姿态
是否手势结束
可以通过 return false 阻止
意图要触发 pinch 手势(双指缩放)，可以通过 return false 阻止
缩放数值
意图的fov变更
是否手势结束
可以通过 return false 阻止
意图要触发 press 手势(长按屏幕)， 可以通过 return false 阻止
长按对应的三维射线
长按对应的屏幕位置
长按持续时间
可以通过 return false 阻止
意图要展示鼠标焦点环，可以通过 return false 阻止
可以通过 return false 阻止
意图要触发 tap 手势(点击屏幕)， 可以通过 return false 阻止
点击对应的三维射线
点击对应的屏幕位置
是否手势结束
可以通过 return false 阻止
webXR模式结束,webxr session销毁
webXR模式结束,webxr session销毁
webXR模式开始，webxr session完成坐标系矫正
Five 事件列表
Five 插件
Five 提供了工厂模式的插件机制, 提供了 FivePlugin FivePluginInstance FivePluginInits 接口来帮助创建和使用插件
mkdir a-five-plugin
npm init -y
npm install @realsee/five
npx five-plugin-init
.
├── README.md
├── devtools
│ ├── external-five.js
│ ├── external-three.js
│ ├── tsconfig.build.json
│ ├── webpack.bundle.js
│ └── webpack.example.js
├── docs
├── examples
│ ├── data.json
│ ├── index.html
│ └── index.ts
├── lib
│ └── index.ts
├── package.json
└── tsconfig.json
example： 开发环境，编译 example 下的 index.ts, 监听变化，并且开启端口监听，可以通过 localhost:8080 访问build:doc: 通过 typedoc 生成项目文档，生成目标在 docs 目录下build:typescript: 通过 tsc 编译 ts 代码，生成目标在 build 目录下build:bundle: 通过 webpack 编译 unpack 包， 生成目标在 bundle 目录下build:all: npm run build:doc && npm run build:typescript && && npm run build:example && npm run build:bundle编译配置均在 devtools 目录下， 可以自行修改配置
devtools/tsconfig.build.json 下devtools/webpack.bundle.js 下build/index.js, 即通过 tsc 编译得到的代码。你可以在 package.json 中修改。build:bundle 生成的结果。type FivePlugin<Parameters, Returns>;
这是一个在当five显示界面被点击时 打印 "tap!" 的一个简单插件, 并且可以拉取历史列表
import { FivePlugin } from "@realsee/five";
// 打印的内容
type TapRecordPluginParameter = string;
// 实例方法
type TapRecordPluginReturns = {
// 一个返回历史列表的防范
getHistory: () => string[]
};
const TapRecordPlugin: FivePlugin<
TapRecordPluginParameter,
TapRecordPluginReturns
> = (five, message = "tap!") => {
const list: string[] = [];
five.on("tapGesture", () => {
console.log(message);
list.push(`${new Date().toUTCString()} ${message}`);
});
return { getHistory: () => list.slice() };
};
type FivePluginInit<FivePlugin>
就上面 TapRecordPlugin 的例子来初始化插件
import Five, { FivePluginInits } from "@realsee/five";
const five = new Five({
plugins: [
[
// 插件
TapRecordPlugin,
// 插件对象在 five.plugins 中的命名实例名称，
// 比如这个就是通过 five.plguins.tapRecord 获取到插件实例
"tapRecord",
// 插件参数，必须符合 TapRecordPluginParameter 的生命
"tap!"
] as FivePluginInit<typeof TapRecordPlugin>
]
});
// five.load(...)
as FivePluginInit 的方法声明，否则无法约束参数type FivePluginInstance<FivePlugin>;
简单例子 就上面 TapRecordPlugin 的例子来获取历时点击列表
import { FivePluginInstance } from "@realsee/five";
// five.plugins.tapRecord 可以获取到插件实例 "tapRecord" 是插件初始化声明确定的
// 通过 FivePluginInstance 在约束类型，否则均为 any
const tapRecord: FivePluginInstance<typeof TapRecordPlugin> = five.plugins.tapRecord;
// 现在就可以获取到历时列表了
const getHistory: string[] = tapRecord.getHistory();
console.log(getHistory);
import Five, { FivePlugin, FivePluginInit, FivePluginInstance } from "@realsee/five";
// 打印的内容
type TapRecordPluginParameter = string;
// 实例方法
type TapRecordPluginReturns = {
// 一个返回历史列表的防范
getHistory: () => string[]
};
const TapRecordPlugin: FivePlugin<
TapRecordPluginParameter,
TapRecordPluginReturns
> = (five, message = "tap!") => {
const list: string[] = [];
five.on("tapGesture", () => {
console.log(message);
list.push(`${new Date().toUTCString()} ${message}`);
});
return { getHistory: () => list.slice() };
};
const five = new Five({
plugins: [
[
// 插件对象在 five.plugins 中的命名实例名称，
// 比如这个就是通过 five.plguins.tapRecord 获取到插件实例
"tapRecord",
// 插件
TapRecordPlugin,
// 插件参数，必须符合 TapRecordPluginParameter 的生命
"tap!"
] as FivePluginInit<typeof TapRecordPlugin>
]
});
// five.load(...)
// five.plugins.tapRecord 可以获取到插件实例 "tapRecord" 是插件初始化声明确定的
// 通过 FivePluginInstance 在约束类型，否则均为 any
const tapRecord: FivePluginInstance<typeof TapRecordPlugin> = five.plugins.tapRecord;
// 现在就可以获取到历时列表了
const getHistory: string[] = tapRecord.getHistory();
console.log(getHistory);
new Five 时，Five 并没有调用 load 来创建VR，请通过监听事件的方式，在合适的时机获取模型。five.on("dispose") 事件来处理。插件参数, 没有参数则为 void
如果有参数则插件暴露的 api，没有参数则不传
获取插件在Five中的初始化结构
Five 插件
获取插件暴露的 api
Five 插件
Five 的显示模式，可以通过 five.changeMode five.setState 来切换
模型事件列表
模型 bvh树 计算完成
内部错误
错误对象
模型三角面片结构加载完成
模型加载完成
模型材质结构加载完成
显示楼层改变
显示的楼层
重写 work 中的资源前缀
work 中的资源使用 jsonp 方式发布
work 中模型是否计算bvh碰撞数，默认计算 true
work 中的资源地址使用短地址
Tracks one request
RequestScheduler Options
WebXR模式结束，销毁session
WebXR模式开始，session完成坐标系设置
URL 地址的转换
url 原地址
url 转换参数
url 转换结果
解析 Work 数据
work 数据，从如数开发者平台获取
配置参数， 可以在此二次设置 baseURL 等参数
配置参数， URL 解析规则
相机姿态中相机方向变化