npm - @realsee/five - Versions diffs - 6.7.2 → 6.8.0-alpha.1 - Mend

@realsee/five 6.7.2 → 6.8.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (701) hide show

package/docs/variables/react.FiveCanvas.html CHANGED Viewed

@@ -1,6 +1,6 @@
 <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>FiveCanvas | 如视 Five SDK</title><meta name="description" content="Documentation for 如视 Five SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">如视 Five SDK</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/react.html">react</a></li><li><a href="" aria-current="page">FiveCanvas</a></li></ul><h1>Variable FiveCanvas<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">FiveCanvas</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/react.FiveCanvasProps.html" class="tsd-signature-type tsd-kind-interface">FiveCanvasProps</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>Five 渲染区域组件</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link" id="description">Description<a href="#description" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Five 渲染区域组件，请在 FiveProvider 内使用</p>
-</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-1">&lt;</span><span class="hl-4">FiveProvider</span><span class="hl-1"> </span><span class="hl-4">initialWork</span><span class="hl-1">={</span><span class="hl-4">work</span><span class="hl-1">}&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-4">FiveCanvas</span><span class="hl-1"> </span><span class="hl-4">width</span><span class="hl-1">={</span><span class="hl-13">512</span><span class="hl-1">} </span><span class="hl-4">height</span><span class="hl-1">={</span><span class="hl-13">512</span><span class="hl-1">}/&gt;</span><br/><span class="hl-1">&lt;/</span><span class="hl-4">FiveProvider</span><span class="hl-1">&gt;</span>
+</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-1">&lt;</span><span class="hl-4">FiveProvider</span><span class="hl-1"> </span><span class="hl-4">initialWork</span><span class="hl-1">={</span><span class="hl-4">work</span><span class="hl-1">}&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-4">FiveCanvas</span><span class="hl-1"> </span><span class="hl-4">width</span><span class="hl-1">={</span><span class="hl-10">512</span><span class="hl-1">} </span><span class="hl-4">height</span><span class="hl-1">={</span><span class="hl-10">512</span><span class="hl-1">}/&gt;</span><br/><span class="hl-1">&lt;/</span><span class="hl-4">FiveProvider</span><span class="hl-1">&gt;</span>
 </code><button type="button">Copy</button></pre>
 </div></div><aside class="tsd-sources"><ul><li>Defined in lib/react/canvas.ts:30</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/docs/variables/react.useFiveScene.html CHANGED Viewed

@@ -1,6 +1,6 @@
 <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>useFiveScene | 如视 Five SDK</title><meta name="description" content="Documentation for 如视 Five SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">如视 Five SDK</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/react.html">react</a></li><li><a href="" aria-current="page">useFiveScene</a></li></ul><h1 class="deprecated">Variable useFiveScene<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">useFiveScene</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">callback</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">scene</span><span class="tsd-signature-symbol">:</span> <a href="../classes/five.Scene.html" class="tsd-signature-type tsd-kind-class">Scene</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span> <span class="tsd-signature-symbol">|</span> (<span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span>)<span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">deps</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">DependencyList</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> = useFiveSceneEffect</span></div><div class="tsd-type-declaration"><h4>Type Declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature" id="__type"><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">callback</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">scene</span><span class="tsd-signature-symbol">:</span> <a href="../classes/five.Scene.html" class="tsd-signature-type tsd-kind-class">Scene</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span> <span class="tsd-signature-symbol">|</span> (<span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span>)<span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">deps</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">DependencyList</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Five React Hooks: 操作 Five 的 Scene</p>
 </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">callback</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">scene</span><span class="tsd-signature-symbol">:</span> <a href="../classes/five.Scene.html" class="tsd-signature-type tsd-kind-class">Scene</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span> <span class="tsd-signature-symbol">|</span> (<span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span>)</span><div class="tsd-comment tsd-typography"><p>获取 Five 的 Scene 的回调函数</p>
-</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">deps</span>: <span class="tsd-signature-type">DependencyList</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code><span class="hl-0">useFiveSceneEffect</span><span class="hl-1">(</span><span class="hl-4">scene</span><span class="hl-1"> </span><span class="hl-6">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">// object is a THREE.Object3D</span><br/><span class="hl-1"> </span><span class="hl-4">scene</span><span class="hl-1">.</span><span class="hl-0">add</span><span class="hl-1">(</span><span class="hl-4">object</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> () </span><span class="hl-6">=&gt;</span><span class="hl-1"> </span><span class="hl-4">scene</span><span class="hl-1">.</span><span class="hl-0">remove</span><span class="hl-1">(</span><span class="hl-4">object</span><span class="hl-1">); </span><span class="hl-5">// 析构函数</span><br/><span class="hl-1">});</span>
+</div></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">deps</span>: <span class="tsd-signature-type">DependencyList</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code><span class="hl-0">useFiveSceneEffect</span><span class="hl-1">(</span><span class="hl-4">scene</span><span class="hl-1"> </span><span class="hl-6">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// object is a THREE.Object3D</span><br/><span class="hl-1"> </span><span class="hl-4">scene</span><span class="hl-1">.</span><span class="hl-0">add</span><span class="hl-1">(</span><span class="hl-4">object</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> () </span><span class="hl-6">=&gt;</span><span class="hl-1"> </span><span class="hl-4">scene</span><span class="hl-1">.</span><span class="hl-0">remove</span><span class="hl-1">(</span><span class="hl-4">object</span><span class="hl-1">); </span><span class="hl-8">// 析构函数</span><br/><span class="hl-1">});</span>
 </code><button>Copy</button></pre>
 </div></div></li></ul></li></ul></div><div class="tsd-comment tsd-typography"><div class="tsd-tag-deprecated"><h4 class="tsd-anchor-link" id="deprecated">Deprecated<a href="#deprecated" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>请使用 <code>useFiveSceneEffect</code> 替代</p>

package/docs/variables/vue.FiveCanvas.html CHANGED Viewed

@@ -3,7 +3,7 @@
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-width">Param: width<a href="#param-width" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>渲染区域的宽度</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-height">Param: height<a href="#param-height" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>渲染区域的高度</p>
 </div><div class="tsd-tag-returns"><h4 class="tsd-anchor-link" id="returns">Returns<a href="#returns" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Vue 元素</p>
-</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-1">&lt;</span><span class="hl-15">FiveProvider</span><span class="hl-1"> :</span><span class="hl-4">initialWork</span><span class="hl-1">=</span><span class="hl-2">&quot;work&quot;</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-4">FiveCanvas</span><span class="hl-1"> </span><span class="hl-4">width</span><span class="hl-1">=</span><span class="hl-2">&quot;512&quot;</span><span class="hl-1"> </span><span class="hl-4">height</span><span class="hl-1">=</span><span class="hl-2">&quot;512&quot;</span><span class="hl-1">/&gt;</span><br/><span class="hl-1">&lt;/</span><span class="hl-4">FiveProvider</span><span class="hl-1">&gt;</span>
+</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-1">&lt;</span><span class="hl-13">FiveProvider</span><span class="hl-1"> :</span><span class="hl-4">initialWork</span><span class="hl-1">=</span><span class="hl-2">&quot;work&quot;</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-4">FiveCanvas</span><span class="hl-1"> </span><span class="hl-4">width</span><span class="hl-1">=</span><span class="hl-2">&quot;512&quot;</span><span class="hl-1"> </span><span class="hl-4">height</span><span class="hl-1">=</span><span class="hl-2">&quot;512&quot;</span><span class="hl-1">/&gt;</span><br/><span class="hl-1">&lt;/</span><span class="hl-4">FiveProvider</span><span class="hl-1">&gt;</span>
 </code><button type="button">Copy</button></pre>
 </div></div><aside class="tsd-sources"><ul><li>Defined in lib/vue/hooks/FiveCanvas.ts:23</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/docs/variables/vue.FiveProvider.html CHANGED Viewed

@@ -3,7 +3,7 @@
 以及使用 useFiveState useFiveEventCallback等 Five Vue Composition API 来对 FiveProvider 进行操作</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link" id="description">Description<a href="#description" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Five 创建Five实例的组件</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-fiveprovidercomponent">Param: FiveProviderComponent<a href="#param-fiveprovidercomponent" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Five 参数</p>
-</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-1">&lt;</span><span class="hl-15">FiveProvider</span><span class="hl-1"> :</span><span class="hl-4">initialWork</span><span class="hl-1">=</span><span class="hl-2">&quot;work&quot;</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-4">FiveCanvas</span><span class="hl-1"> </span><span class="hl-4">width</span><span class="hl-1">=</span><span class="hl-2">&quot;512&quot;</span><span class="hl-1"> </span><span class="hl-4">height</span><span class="hl-1">=</span><span class="hl-2">&quot;512&quot;</span><span class="hl-1">/&gt;</span><br/><span class="hl-1">&lt;/</span><span class="hl-4">FiveProvider</span><span class="hl-1">&gt;</span>
+</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-1">&lt;</span><span class="hl-13">FiveProvider</span><span class="hl-1"> :</span><span class="hl-4">initialWork</span><span class="hl-1">=</span><span class="hl-2">&quot;work&quot;</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-4">FiveCanvas</span><span class="hl-1"> </span><span class="hl-4">width</span><span class="hl-1">=</span><span class="hl-2">&quot;512&quot;</span><span class="hl-1"> </span><span class="hl-4">height</span><span class="hl-1">=</span><span class="hl-2">&quot;512&quot;</span><span class="hl-1">/&gt;</span><br/><span class="hl-1">&lt;/</span><span class="hl-4">FiveProvider</span><span class="hl-1">&gt;</span>
 </code><button type="button">Copy</button></pre>
 </div></div><aside class="tsd-sources"><ul><li>Defined in lib/vue/hooks/FiveProvider.ts:70</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/docs_markdown/README.md ADDED Viewed

@@ -0,0 +1,33 @@
+**如视 Five SDK**
+***
+# 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**
+**Five**是 [贝壳如视(realsee.com)](https://realsee.com) 提供的在浏览器中运行的三维空间渲染 Javascript SDK。您可以通过[如视开发者中心](https://developers.realsee.com)的数据服务，并结合**Five**，制作丰富多彩的三维空间应用。
+并且**Five**提供了一系列的方法、事件、生命周期函数。您可以方便地基于**Five**进行二次开发，并结合到您自身的项目中，为您的项目添砖加瓦。
+**Five**通过 [TypeScript](https://www.typescriptlang.org/) 编写，保证开发的质量以及编程体验，推荐通过 [Visual Studio Code](https://code.visualstudio.com)、[WebStorm](https://www.jetbrains.com/webstorm/) 等现代源代码编辑器，您将可以体验到友好的代码提示以及自动补全。
+## 安装**Five**
+**Five**提供通过 [npm](https://www.npmjs.com) 的方式安装。**Five**基于 [Three.js](https://threejs.org), 所以同时您需要安装相关依赖。
+目前依赖的**three**版本为 117 的版本
+```shell
+npm install @realsee/five three@0.117.1
+```
+## 浏览器兼容性
+| Safari | Safari on iOS | Chrome  | Chrome for Android | Edge | Firefox |
+|:------:|:-------------:|--------:|:------------------:|:----:|:-------:|
+| >= 9   | >= 9          | >= 49   | >= 93              | >= 13| >= 45   |

package/docs_markdown/_media/coordinate.jpg ADDED Viewed

Binary file

package/docs_markdown/documents/coordinate.md ADDED Viewed

@@ -0,0 +1,29 @@
+[**如视 Five SDK**](../README.md)
+***
+[如视 Five SDK](../modules.md) / coordinate
+# 坐标系以及方向角度说明
+## 坐标系说明
+![右手坐标系图示](../_media/coordinate.jpg)
+场景使用三位笛卡尔右手坐标系。 `XZ`平米平行于地面， `Y`轴垂直于地面。
+## longitude 水平角度
+longitude 为水平角度，单位是弧度值
+可以认为是相对于 `Y` 轴为轴旋转的角度，Five中返回的 longitude 必定在 [0, 2PI) 这个区间内，但是方法调用是传入的可以随意。
+longitude `0度` 相对于 `Y` 轴负方向。 绕 `Y` 轴顺时针方向为 `正`, 逆时针方向为 `负`
+## latitude 俯仰角度
+latitude 为水平角度，单位是弧度值
+可以认为是相对于 `ZX` 平面的夹角，Five中返回的 latitude 必定在 [-PI, PI]这个区间内，但是方法调用是传入的可以随意。
+latitude `0度` 相对于 平行于`ZX` 平面。 仰视为 `正`, 俯视为 `负`

package/docs_markdown/documents/intro.md ADDED Viewed

@@ -0,0 +1,15 @@
+[**如视 Five SDK**](../README.md)
+***
+[如视 Five SDK](../modules.md) / intro
+# Intro - 介绍
+## 什么是 **Five**
+**Five** 是 [贝壳如视(realsee.com)](https://realsee.com) 提供的在浏览器中运行的三维空间渲染 Javascript SDK。您可以通过[如视开发者中心](https://developers.realsee.com)的数据服务，并结合**Five**，制作丰富多彩的三维空间应用。
+并且 **Five** 提供了一系列的方法、事件、生命周期函数。您可以方便地基于**Five**进行二次开发，并结合到您自身的项目中，为您的项目添砖加瓦。
+**Five** 通过 [TypeScript](https://www.typescriptlang.org/) 编写，保证开发的质量以及编程体验，推荐通过 [Visual Studio Code](https://code.visualstudio.com)、[WebStorm](https://www.jetbrains.com/webstorm/) 等现代源代码编辑器，您将可以体验到友好的代码提示以及自动补全。

package/docs_markdown/documents/mode.md ADDED Viewed

@@ -0,0 +1,21 @@
+[**如视 Five SDK**](../README.md)
+***
+[如视 Five SDK](../modules.md) / mode
+# Mode - 模式
+```ts
+import { type Mode } from 'five';
+```
+Five 支持多种模式
+- Panorama - 全景图游走模式
+- Mapview - 模型地图模式
+- Floorplan - 模型户型图模式
+- Topview - 模型平面图模式
+- Model - 模型游走模式
+- VRPanorama - Cardboard VR 眼镜模式
+- XRPanorama - WebXR 虚拟现实 VR 眼镜模式

package/docs_markdown/documents/plugins.md ADDED Viewed

@@ -0,0 +1,226 @@
+[**如视 Five SDK**](../README.md)
+***
+[如视 Five SDK](../modules.md) / plugins
+# 插件 Plugins
+> Five 提供了工厂模式的插件机制,
+> 提供了 FivePlugin FivePluginInstance FivePluginInits 接口来帮助创建和使用插件
+## 插件的作用
+1. 插件即是将一些通用的对于 five 的操作的一些复用的抽象。
+2. 可以通过插件来组织代码，减少逻辑依赖。
+## 创建插件
+```
+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
+```
+## npm script
+- `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 目录下， 可以自行修改配置
+- ts 的编译参数在 `devtools/tsconfig.build.json` 下
+- bundle 的 webpack 配置在 `devtools/webpack.bundle.js` 下
+## 发布
+- 往 npm 发布，默认发布的入口文件在 `build/index.js`, 即通过 tsc 编译得到的代码。你可以在 `package.json` 中修改。
+- bundle 包发布，可以直接使用 `build:bundle` 生成的结果。
+### 类型说明
+```typescript
+type FivePlugin<Parameters, Returns>;
+```
+- Parameters 插件定义的参数
+- Returns 插件返回的实例
+### 简单例子
+> 这是一个在当five显示界面被点击时 打印 "tap!" 的一个简单插件, 并且可以拉取历史列表
+```typescript
+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() };
+};
+```
+- 工厂函数的参数是 five 实例 以及对应的插件需要的参数, 参数使用后面在插件初始化中详细说明。
+- 工厂函数的返回将在 five.plugis 中取到，后面会详细说明。
+### 插件初始化
+### 类型说明
+```
+type FivePluginInit<FivePlugin>
+```
+### 简单例子
+> 就上面 TapRecordPlugin 的例子来初始化插件
+```typescript
+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 的例子来获取历时点击列表
+```typescript
+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);
+```
+### 回顾整体的例子
+```typescript
+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);
+```
+## 其他注意的问题
+1. 插件初始化的时机在 `new Five` 时，Five 并没有调用 `load` 来创建VR，请通过监听事件的方式，在合适的时机获取模型。
+2. 如果插件内容需要有 five 销毁同时销毁的内容，请监听 `five.on("dispose")` 事件来处理。
+3. 不要出现初始化插件同名的现象，会出现插件间冲突。

package/docs_markdown/documents/quick-start.md ADDED Viewed

@@ -0,0 +1,105 @@
+[**如视 Five SDK**](../README.md)
+***
+[如视 Five SDK](../modules.md) / quick-start
+# Quick Start - 快速开始
+## 安装
+npm
+```shell
+npm install three@^0.117.1 @realsee/five
+```
+pnpm
+```shell
+pnpm add three@^0.117.1 @realsee/five
+```
+yarn
+```shell
+yarn add three@^0.117.1 @realsee/five
+```
+## 如何使用
+```ts
+import { Five, parseWork } from "@realsee/five";
+async function main() {
+  // 新建一个 Five 实例
+  const five = new Five();
+  // 找一个 Dom 容器。并设置大小
+  const app = document.getElementById('app')!;
+  app.style.width = '100vw';
+  app.style.height = '100vh';
+  // 将渲染视图的 canvas 添加到 DOM 中
+  // appendTo 方法会获取容器大小并撑满它
+  five.appendTo(app);
+  // 可以通过 ResizeObserver，确保容器大小变化时，跟随大小
+  const resizeObserver = new ResizeObserver(() => five.refresh());
+  resizeObserver.observe(app);
+  // 获取 一套 VR 数据。我们称为 Work
+  // 这是一个公开测试数据
+  const res = await fetch('https://raw.githubusercontent.com/realsee-developer/open-works/main/real/pWLy9ndnVL73Xqja/work.json');
+  const json = await res.json();
+  // 解析这个 work 数据，并加载。
+  await five.load(parseWork(json));
+}
+main();
+```
+### 移步到达指定观察点
+移步有两种方式
+- 通过命令切换
+  ```ts
+  await five.moveToPano(3);
+  ```
+- 通过设置 State 切换
+  ```ts
+  five.setState({
+    mode: 'Panorama',
+    panoIndex: 3,
+  });
+  ```
+### 切换模式
+模式有 4 种
+- Panorama - 全景图游走模式
+- Mapview - 模型地图模式
+- Floorplan - 模型户型图模式
+- Topview - 模型平面图模式
+- Model - 模型游走模式
+- VRPanorama - Cardboard VR 眼镜模式
+- XRPanorama - WebXR 虚拟现实 VR 眼镜模式
+常用的是 Panorama 以及 Mapview。
+切换模态有两种方式。
+- 通过命令切换
+  ```ts
+  five.changeMode('Mapview');
+  ```
+- 通过设置 State 切换
+  ```ts
+  five.setState({
+    mode: 'Mapview',
+  });
+  ```