@realsee/five 5.0.0-alpha.13 → 5.0.0-alpha.132

package/README.md

@@ -1,5 +1,7 @@
 # Five.js
 
+[![npm version](https://img.shields.io/npm/v/@realsee/five.svg?style=flat-square&logo=npm&label=npm%20install%20@realsee/five)](https://www.npmjs.com/package/@realsee/five)
+
 贝壳如视三维渲染框架
 
 ## 什么是**Five**
@@ -19,13 +21,13 @@
 目前依赖的**three**版本为 115 ~ 117 的版本
 
 ```shell
-npm install @realsee/five@next three@0.117.1
+npm install @realsee/five three@0.117.1
 ```
 
 如果您使用**React Hooks API**，那么也请同时安装**React**的相关依赖。
 
 ```shell
-npm install @realsee/five@next three@0.117.1 react react-dom @types/react @types/react-dom
+npm install @realsee/five three@0.117.1 react react-dom @types/react @types/react-dom
 ```
 
 接下来便可以在您的项目使用**Five**了。
@@ -37,6 +39,12 @@ import { useFiveState } from "@realsee/five/react";
 
 ```
 
+## 浏览器兼容性
+
+| Safari | Safari on iOS | Chrome  | Chrome for Android | Edge | Firefox |
+|:------:|:-------------:|--------:|:------------------:|:----:|:-------:|
+| >= 9   | >= 9          | >= 49   | >= 93              | >= 13| >= 45   |
+
 ## 快速上手
 
 **Five**提供了快速上手体验的项目生成工具，您可以通过他熟悉**Five**的功能以及尝试基于**Five**开发功能。
@@ -51,7 +59,7 @@ mkdir five-quick-start && cd five-quick-start && npm init -y
 2. 安装**Five**
 
 ```shell
-npm install @realsee/five@next
+npm install @realsee/five
 ```
 
 3. 通过**Five**的内置的`five-quick-start-init`脚本来快速补完当前项目
@@ -121,7 +129,7 @@ fetch(`./work.json`)
 ```tsx
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import {Five, parseWork} from "@realsee/five";
+import {Five, Work, parseWork} from "@realsee/five";
 import {createFiveProvider, FiveCanvas} from "@realsee/five/react";
 
 // 创建 Provider, 参数与 new Five 参数类似
@@ -188,7 +196,7 @@ ReactDOM.render(<App></App>, document.getElementById("app"));
 
 ## **Five API**文档
 
-欢迎查看 [Five API 文档](https://developers.realsee.com/static/docs/external/five/docs/) 。
+欢迎查看 [Five API 文档](https://unpkg.com/@realsee/five/docs/index.html) 。
 
 该文档由 [TypeDoc](https://typedoc.org/) 生成，您可以详细查看 api 使用方式，调用参数，数据结构。
 
@@ -338,15 +346,17 @@ interface State {
 **State**的数据描述
 
 - `mode`: 当前的模态
-  Five 有 5 种模态，可以使用 `Five.Mode` 获得
-    - Floorplan: 模型查看模式, 该模式下视图以模型为中心，手势操作可以旋转/放大模型/切换楼层，适合查看模型的整体效果。
-    - Topview: 户型图模式，该模式下视图以模型为中心，垂直俯视模型，手势操作可以平移/放大模型/切换楼层，适合查看模型平面结构。
-    - Panorama: 全景图游走模式，该模式下视图将在采集点间游走，手势操作可以旋转/放大视角/切换采集点，适合查看采集的全景信息。
-    - Model: 模型游走模式，该模式下视图将在模型中自由游走，手势操作可以旋转/放大视角/位移，适合查看模型的细节，做一些定位操作。
-    - VRPanorama: VR 眼镜模式，该模式下可以使用 [Cardboard 眼镜](https://arvr.google.com/cardboard/) 或者他的第三方衍生产品，实现 VR 虚拟显示效果。
+  Five 常用有 5 种模态，可以使用 `Five.Mode` 获得
+    - Panorama: 全景游走模态，该模态下视图将在采集点间游走，手势操作可以旋转/放大视角/切换采集点，适合查看采集的全景信息。
+    - Floorplan: 空间总览模态, 该模态下视图以模型为中心，手势操作可以旋转/放大模型/切换楼层，适合查看模型的整体效果。
+    - Topview: 户型图模态，该模态下视图以模型为中心，垂直俯视模型，手势操作可以平移/放大模型/切换楼层，适合查看模型平面结构。
+    - Model: 模型游走模态，该模态下视图将在模型中自由游走，手势操作可以旋转/放大视角/位移，适合查看模型的细节，做一些定位操作。
+    - VRPanorama: VR 眼镜模态，该模态下可以使用 [Cardboard 眼镜](https://arvr.google.com/cardboard/) 或者他的第三方衍生产品，实现 VR 虚拟显示效果。
 
 - `panoIndex`: 采集点位
 
 - `longitude` / `latitude`: 相机的水平角 / 相机的偏航角（弧度），我们使用类似经纬度的方式描述相机位置。
 
 - `fov`: 相机垂直方向的可视角度 (角度)
+
+

package/docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

package/docs/assets/highlight.css

@@ -0,0 +1,134 @@
+:root {
+    --light-hl-0: #000000;
+    --dark-hl-0: #D4D4D4;
+    --light-hl-1: #AF00DB;
+    --dark-hl-1: #C586C0;
+    --light-hl-2: #001080;
+    --dark-hl-2: #9CDCFE;
+    --light-hl-3: #A31515;
+    --dark-hl-3: #CE9178;
+    --light-hl-4: #008000;
+    --dark-hl-4: #6A9955;
+    --light-hl-5: #795E26;
+    --dark-hl-5: #DCDCAA;
+    --light-hl-6: #0070C1;
+    --dark-hl-6: #4FC1FF;
+    --light-hl-7: #0000FF;
+    --dark-hl-7: #569CD6;
+    --light-hl-8: #267F99;
+    --dark-hl-8: #4EC9B0;
+    --light-hl-9: #800000;
+    --dark-hl-9: #808080;
+    --light-hl-10: #FF0000;
+    --dark-hl-10: #9CDCFE;
+    --light-hl-11: #000000FF;
+    --dark-hl-11: #D4D4D4;
+    --light-hl-12: #0451A5;
+    --dark-hl-12: #9CDCFE;
+    --light-hl-13: #098658;
+    --dark-hl-13: #B5CEA8;
+    --light-hl-14: #EE0000;
+    --dark-hl-14: #D7BA7D;
+    --light-hl-15: #000000;
+    --dark-hl-15: #C8C8C8;
+    --light-code-background: #F5F5F5;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --hl-14: var(--light-hl-14);
+    --hl-15: var(--light-hl-15);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --hl-14: var(--dark-hl-14);
+    --hl-15: var(--dark-hl-15);
+    --code-background: var(--dark-code-background);
+} }
+
+body.light {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --hl-14: var(--light-hl-14);
+    --hl-15: var(--light-hl-15);
+    --code-background: var(--light-code-background);
+}
+
+body.dark {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --hl-14: var(--dark-hl-14);
+    --hl-15: var(--dark-hl-15);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+.hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
+.hl-12 { color: var(--hl-12); }
+.hl-13 { color: var(--hl-13); }
+.hl-14 { color: var(--hl-14); }
+.hl-15 { color: var(--hl-15); }
+pre, code { background: var(--code-background); }