UNPKG

@realsee/five

Version:

Realsee Renderer SDK

466 lines (459 loc) • 48.5 kB
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>api | 如视 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="" aria-current="page">api</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="five-sdk-api-reference" class="tsd-anchor-link">Five SDK API Reference<a href="#five-sdk-api-reference" 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></h1> <p>This document provides a summary of the core API for the Five SDK, designed to be easily understood by AI assistants.</p> <h2 id="core-class" class="tsd-anchor-link">Core Class: <code>Five</code><a href="#core-class" 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></h2> <p>The <code>Five</code> class is the main entry point for the SDK. It manages the rendering, state, and interaction of the 3D scene.</p> <h3 id="constructor" class="tsd-anchor-link">Constructor<a href="#constructor" 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></h3> <pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">(</span><span class="hl-6">initArgs</span><span class="hl-1">?: </span><span class="hl-6">FiveInitArgs</span><span class="hl-1">);</span> </code><button type="button">Copy</button></pre> <h3 id="properties" class="tsd-anchor-link">Properties<a href="#properties" 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></h3> <table> <thead> <tr> <th style="text-align:left">Property</th> <th style="text-align:left">Type</th> <th style="text-align:left">Description</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><code>five.state</code></td> <td style="text-align:left"><code>State</code></td> <td style="text-align:left">The current state (mode, position, etc.) of the instance.</td> </tr> <tr> <td style="text-align:left"><code>five.currentMode</code></td> <td style="text-align:left"><code>Mode</code></td> <td style="text-align:left">Shortcut to get the current display mode.</td> </tr> <tr> <td style="text-align:left"><code>five.panoIndex</code></td> <td style="text-align:left"><code>number</code></td> <td style="text-align:left">Shortcut to get the current panorama index.</td> </tr> <tr> <td style="text-align:left"><code>five.work</code></td> <td style="text-align:left"><code>Work</code></td> <td style="text-align:left">The currently loaded work data.</td> </tr> <tr> <td style="text-align:left"><code>five.model</code></td> <td style="text-align:left"><code>Model</code></td> <td style="text-align:left">The 3D model object.</td> </tr> <tr> <td style="text-align:left"><code>five.scene</code></td> <td style="text-align:left"><code>THREE.Scene</code></td> <td style="text-align:left">The Three.js scene used for non-model elements.</td> </tr> <tr> <td style="text-align:left"><code>five.modelScene</code></td> <td style="text-align:left"><code>ModelScene</code></td> <td style="text-align:left">The Three.js scene used for the model.</td> </tr> <tr> <td style="text-align:left"><code>five.camera</code></td> <td style="text-align:left"><code>Camera</code></td> <td style="text-align:left">The internal camera.</td> </tr> <tr> <td style="text-align:left"><code>five.renderer</code></td> <td style="text-align:left"><code>THREE.WebGLRenderer</code></td> <td style="text-align:left">The WebGL renderer.</td> </tr> <tr> <td style="text-align:left"><code>five.needsRender</code></td> <td style="text-align:left"><code>boolean</code></td> <td style="text-align:left">Set to <code>true</code> to request a render frame in the next loop.</td> </tr> <tr> <td style="text-align:left"><code>five.plugins</code></td> <td style="text-align:left"><code>Object</code></td> <td style="text-align:left">Access to registered plugins.</td> </tr> </tbody> </table> <h3 id="static-properties" class="tsd-anchor-link">Static Properties<a href="#static-properties" 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></h3> <table> <thead> <tr> <th style="text-align:left">Property</th> <th style="text-align:left">Type</th> <th style="text-align:left">Description</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><code>Five.Mode</code></td> <td style="text-align:left"><code>Enum</code></td> <td style="text-align:left">Available modes: <code>Panorama</code>, <code>Model</code>, <code>Floorplan</code>, <code>Topview</code>, <code>Mapview</code>, <code>VRPanorama</code>, <code>XRPanorama</code>.</td> </tr> </tbody> </table> <h2 id="initialization-configuration-" class="tsd-anchor-link">Initialization Configuration (<code>FiveInitArgs</code>)<a href="#initialization-configuration-" 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></h2> <p>Configuration object passed to the <code>Five</code> constructor.</p> <pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">FiveInitArgs</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/** External WebGLRenderer. If provided, internal renderer creation is skipped. */</span><br/><span class="hl-1"> </span><span class="hl-6">renderer</span><span class="hl-1">?: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderer</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Width/Height of the viewport relative to container (0-1). */</span><br/><span class="hl-1"> </span><span class="hl-6">viewport</span><span class="hl-1">?: { </span><span class="hl-6">left</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-6">bottom</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-6">width</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-6">height</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Canvas background color. Default: 0x181A1C */</span><br/><span class="hl-1"> </span><span class="hl-6">backgroundColor</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1"> | </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Color</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Canvas background alpha (0-1). Default: 1 */</span><br/><span class="hl-1"> </span><span class="hl-6">backgroundAlpha</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Enable antialiasing. Default: false */</span><br/><span class="hl-1"> </span><span class="hl-6">antialias</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Auto-play rendering loop. Default: true */</span><br/><span class="hl-1"> </span><span class="hl-6">play</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Enable on-demand rendering to save battery. Default: true */</span><br/><span class="hl-1"> </span><span class="hl-6">onlyRenderIfNeeds</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Max FPS limit. false = unlimited. Default: false */</span><br/><span class="hl-1"> </span><span class="hl-6">maxFps</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1"> | </span><span class="hl-7">false</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Mode transition duration in ms. Default: 1000 */</span><br/><span class="hl-1"> </span><span class="hl-6">modeChangeDuration</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Enable mouse wheel zoom. Default: true */</span><br/><span class="hl-1"> </span><span class="hl-6">enableWheel</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Initial plugins to load. */</span><br/><span class="hl-1"> </span><span class="hl-6">plugins</span><span class="hl-1">?: </span><span class="hl-7">FivePlugin</span><span class="hl-1">[];</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Dynamic image configuration for optimization. */</span><br/><span class="hl-1"> </span><span class="hl-6">imageOptions</span><span class="hl-1">?: </span><span class="hl-7">ImageOptions</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Dynamic texture configuration for optimization. */</span><br/><span class="hl-1"> </span><span class="hl-6">textureOptions</span><span class="hl-1">?: </span><span class="hl-7">TextureOptions</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Request URL interceptor for auth/CDN. */</span><br/><span class="hl-1"> </span><span class="hl-5">requestProxy</span><span class="hl-1">?: (</span><span class="hl-6">url</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> </span><span class="hl-7">string</span><span class="hl-1"> | </span><span class="hl-7">Promise</span><span class="hl-1">&lt;</span><span class="hl-7">string</span><span class="hl-1">&gt;;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** Per-mode configuration (panorama, mapview, floorplan, topview, model). */</span><br/><span class="hl-1"> </span><span class="hl-6">panorama</span><span class="hl-1">?: </span><span class="hl-7">PanoramaConfig</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">mapview</span><span class="hl-1">?: </span><span class="hl-7">MapviewConfig</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">floorplan</span><span class="hl-1">?: </span><span class="hl-7">FloorplanConfig</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">topview</span><span class="hl-1">?: </span><span class="hl-7">TopviewConfig</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">model</span><span class="hl-1">?: </span><span class="hl-7">ModelConfig</span><span class="hl-1">;</span><br/><span class="hl-1">}</span> </code><button type="button">Copy</button></pre> <blockquote> <p>详细的模式配置参数见 <a href="../../ai_guides/features/mode.md#configuration">Mode</a>。 图片加载策略见 <a href="features_image-options.html">ImageOptions</a>。 请求代理见 <a href="features_request-proxy.html">Request Proxy</a>。 完整初始化参数见 <a href="features_five.html">Five</a> 和 <a href="features_parameter.html">Parameter</a>。</p> </blockquote> <h2 id="core-methods" class="tsd-anchor-link">Core Methods<a href="#core-methods" 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></h2> <h3 id="_" class="tsd-anchor-link"><code>load(work, state?, options?)</code><a href="#_" 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></h3> <p>Loads a &quot;Work&quot; (dataset) into the Five instance.</p> <ul> <li><strong>work</strong>: The data object (<code>LooseWork</code> or <code>Work</code>) containing scene information.</li> <li><strong>state</strong>: Initial state overrides. <code>&quot;inherit&quot;</code>, <code>&quot;initial&quot;</code>, or a <code>State</code> object.</li> <li><strong>options</strong>: Loading options (e.g., transition duration, <code>mode: &quot;add&quot; | &quot;replace&quot;</code>).</li> </ul> <blockquote> <p>详见 <a href="features_work.html">Work</a> 和 <a href="features_multi-work.html">Multi-Work</a>。</p> </blockquote> <h3 id="_-1" class="tsd-anchor-link"><code>appendTo(element, size?)</code><a href="#_-1" 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></h3> <p>Mounts the Five canvas to a DOM element.</p> <ul> <li><strong>element</strong>: HTMLElement to append to.</li> <li><strong>size</strong>: Optional <code>{ width, height }</code>. Defaults to element size.</li> </ul> <h3 id="_-2" class="tsd-anchor-link"><code>setState(state, immediately?, userAction?)</code><a href="#_-2" 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></h3> <p>Updates the current state (position, mode, etc.).</p> <ul> <li><strong>state</strong>: Partial <code>State</code> object to merge.</li> <li><strong>immediately</strong>: If <code>true</code>, skips animation.</li> <li><strong>userAction</strong>: Marks the change as triggered by user interaction.</li> </ul> <blockquote> <p>详见 <a href="features_state.html">State</a>。</p> </blockquote> <h3 id="_-3" class="tsd-anchor-link"><code>changeMode(mode, state?, options?)</code><a href="#_-3" 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></h3> <p>Switches the viewing mode (e.g., from <code>Panorama</code> to <code>Model</code>).</p> <ul> <li><strong>mode</strong>: Target <code>Five.Mode</code>.</li> <li><strong>state</strong>: Target state after mode change.</li> <li><strong>options</strong>: Animation duration and effect.</li> </ul> <blockquote> <p>详见 <a href="features_mode.html">Mode</a>。</p> </blockquote> <h3 id="_-4" class="tsd-anchor-link"><code>moveToPano(panoIndex, options?)</code><a href="#_-4" 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></h3> <p>Moves to a specific panorama spot.</p> <ul> <li><strong>panoIndex</strong>: Index of the panorama.</li> <li><strong>options</strong>: <code>{ effect?: MovePanoEffect, duration?: number, effectEasing?: Function }</code>.</li> </ul> <blockquote> <p>详见 <a href="features_move-pano-effect.html">Move Pano Effect</a> 和 <a href="features_camera-animation.html">Camera Animation</a>。</p> </blockquote> <h3 id="_-5" class="tsd-anchor-link"><code>updateCamera(pose, duration, userAction?)</code><a href="#_-5" 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></h3> <p>Animates the camera to a target pose without changing pano index.</p> <ul> <li><strong>pose</strong>: Partial <code>Pose</code> object (longitude, latitude, fov, etc.).</li> <li><strong>duration</strong>: Animation duration in ms.</li> <li><strong>returns</strong>: <code>Promise&lt;void&gt;</code> (rejects if interrupted).</li> </ul> <blockquote> <p>详见 <a href="features_camera-animation.html">Camera Animation</a>。</p> </blockquote> <h3 id="_-6" class="tsd-anchor-link"><code>ready(args?)</code><a href="#_-6" 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></h3> <p>Returns a Promise that resolves when Five is stable (state synced, model loaded, optionally tiles loaded).</p> <ul> <li><strong>args</strong>: <code>{ tile?: boolean }</code> — if <code>tile: true</code> in Panorama mode, waits for tile loading.</li> </ul> <h3 id="_-7" class="tsd-anchor-link"><code>refresh(size?)</code><a href="#_-7" 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></h3> <p>Resizes the renderer to fit the container or specified size.</p> <h3 id="_-8" class="tsd-anchor-link"><code>getElement()</code><a href="#_-8" 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></h3> <p>Returns the <code>&lt;canvas&gt;</code> element used by Five.</p> <h3 id="_-9" class="tsd-anchor-link"><code>project2d(vector, testModel?)</code><a href="#_-9" 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></h3> <p>Projects a 3D point to 2D screen coordinates.</p> <ul> <li><strong>vector</strong>: <code>THREE.Vector3</code> (World Space).</li> <li><strong>testModel</strong>: <code>boolean</code> (default <code>false</code>). If <code>true</code>, checks for occlusion.</li> <li><strong>returns</strong>: <code>THREE.Vector2</code> (Screen Space, px) or <code>null</code>.</li> </ul> <blockquote> <p>详见 <a href="features_screen-project.html">Screen &amp; Space Projection</a>。</p> </blockquote> <h3 id="_-10" class="tsd-anchor-link"><code>getPixels(options)</code><a href="#_-10" 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></h3> <p>Get pixel data from the renderer (e.g. for color picking or magnifier).</p> <ul> <li><strong>options</strong>: <code>{ x, y, width, height, pixelRatio?, flipY?, buffer?, skipPanorama?, helperVisible? }</code></li> <li><strong>returns</strong>: <code>Uint8Array</code> (RGBA data).</li> </ul> <blockquote> <p>详见 <a href="features_get-screen-pixels.html">Get Screen Pixels</a>。</p> </blockquote> <h3 id="_-11" class="tsd-anchor-link"><code>intersectRaycaster(raycaster)</code><a href="#_-11" 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></h3> <p>(On <code>five.model</code>) Performs raycasting against the scene models.</p> <ul> <li><strong>raycaster</strong>: <code>THREE.Raycaster</code> (supports extended props: <code>firstHitOnly</code>, <code>hitFilter</code>, <code>sortByDistance</code>, <code>floorIndex</code>).</li> <li><strong>returns</strong>: <code>THREE.Intersection[]</code> (extended with <code>tile</code>, <code>viewLayer</code>, <code>model</code> fields).</li> </ul> <blockquote> <p>详见 <a href="features_raycast.html">Raycast</a>。</p> </blockquote> <h3 id="_-12" class="tsd-anchor-link"><code>addPass(pass)</code> / <code>removePass(pass)</code><a href="#_-12" 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></h3> <p>Add or remove a post-processing pass to/from the rendering chain.</p> <ul> <li><strong>pass</strong>: <code>FivePass</code> instance (e.g. <code>GaussianBlurPass</code>, <code>FlowingLight2DPass</code>).</li> </ul> <blockquote> <p>详见 <a href="features_postprocessing.html">Postprocessing</a>。</p> </blockquote> <h3 id="_-13" class="tsd-anchor-link"><code>updateConfiguration(config)</code><a href="#_-13" 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></h3> <p>Dynamically update mode configurations after initialization (e.g., panorama, mapview settings).</p> <blockquote> <p>详见 <a href="../../ai_guides/features/mode.md#%E5%8A%A8%E6%80%81%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE-update-configuration">Mode</a>。</p> </blockquote> <h3 id="_-14" class="tsd-anchor-link"><code>dispose()</code><a href="#_-14" 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></h3> <p>Destroys the Five instance and releases resources.</p> <h2 id="state-management" class="tsd-anchor-link">State Management<a href="#state-management" 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></h2> <p>The <code>State</code> interface defines the complete status of the Five instance at any moment.</p> <pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">State</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">mode</span><span class="hl-1">: </span><span class="hl-7">Mode</span><span class="hl-1">; </span><span class="hl-8">// Current view mode</span><br/><span class="hl-1"> </span><span class="hl-6">panoIndex</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// Current panorama index</span><br/><span class="hl-1"> </span><span class="hl-6">workCode</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">; </span><span class="hl-8">// ID of the current work</span><br/><span class="hl-1"> </span><span class="hl-6">latitude</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// Camera latitude (radians)</span><br/><span class="hl-1"> </span><span class="hl-6">longitude</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// Camera longitude (radians)</span><br/><span class="hl-1"> </span><span class="hl-6">distance</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// Camera distance from target</span><br/><span class="hl-1"> </span><span class="hl-6">fov</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// Field of view</span><br/><span class="hl-1"> </span><span class="hl-6">offset</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">; </span><span class="hl-8">// Camera target offset</span><br/><span class="hl-1">}</span> </code><button type="button">Copy</button></pre> <h2 id="data-structures" class="tsd-anchor-link">Data Structures<a href="#data-structures" 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></h2> <blockquote> <p>以下为核心数据结构摘要。完整定义见 <a href="features_work.html">Work</a>、<a href="features_state.html">State</a>、<a href="features_model.html">Model</a>。</p> </blockquote> <h3 id="_-15" class="tsd-anchor-link"><code>Work</code><a href="#_-15" 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></h3> <p>The main data object containing the scene description.</p> <pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">Work</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">workCode</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">; </span><span class="hl-8">// Unique identifier</span><br/><span class="hl-1"> </span><span class="hl-6">name</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">; </span><span class="hl-8">// Project name</span><br/><span class="hl-1"> </span><span class="hl-6">observers</span><span class="hl-1">: </span><span class="hl-7">WorkObserver</span><span class="hl-1">[]; </span><span class="hl-8">// List of panorama points</span><br/><span class="hl-1"> </span><span class="hl-6">model</span><span class="hl-1">: </span><span class="hl-7">WorkModel</span><span class="hl-1">; </span><span class="hl-8">// 3D model data</span><br/><span class="hl-1"> </span><span class="hl-6">initial</span><span class="hl-1">: </span><span class="hl-7">WorkInitial</span><span class="hl-1">; </span><span class="hl-8">// Initial view state</span><br/><span class="hl-1"> </span><span class="hl-6">transform</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Matrix4</span><span class="hl-1">; </span><span class="hl-8">// World transform matrix</span><br/><span class="hl-1">}</span> </code><button type="button">Copy</button></pre> <h3 id="panorama-point" class="tsd-anchor-link"><code>WorkObserver</code> (Panorama Point)<a href="#panorama-point" 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></h3> <p>Represents a single panorama spot.</p> <pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">WorkObserver</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">index</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// Index in the list</span><br/><span class="hl-1"> </span><span class="hl-6">floorIndex</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// Floor number</span><br/><span class="hl-1"> </span><span class="hl-6">position</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">; </span><span class="hl-8">// Position in 3D space</span><br/><span class="hl-1"> </span><span class="hl-6">quaternion</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Quaternion</span><span class="hl-1">; </span><span class="hl-8">// Rotation relative to model</span><br/><span class="hl-1"> </span><span class="hl-6">accessibleNodes</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">[]; </span><span class="hl-8">// Indices of reachable points</span><br/><span class="hl-1"> </span><span class="hl-6">images</span><span class="hl-1">: </span><span class="hl-7">WorkImage</span><span class="hl-1">; </span><span class="hl-8">// Panorama image URLs</span><br/><span class="hl-1"> </span><span class="hl-6">active</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">; </span><span class="hl-8">// Whether the point is enabled</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// Coordinate Methods</span><br/><span class="hl-1"> </span><span class="hl-5">getWorldPosition</span><span class="hl-1">(): </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-5">getWorldStandingPosition</span><span class="hl-1">(): </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// UV Conversion Methods</span><br/><span class="hl-1"> </span><span class="hl-5">vectorToEquirectangularUv</span><span class="hl-1">(</span><span class="hl-6">vector</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">, </span><span class="hl-6">uvOrigin</span><span class="hl-1">?: </span><span class="hl-9">&#39;top-left&#39;</span><span class="hl-1"> | </span><span class="hl-9">&#39;bottom-left&#39;</span><span class="hl-1">): </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector2</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-5">equirectangularUvToVector</span><span class="hl-1">(</span><span class="hl-6">uv</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector2</span><span class="hl-1">, </span><span class="hl-6">uvOrigin</span><span class="hl-1">?: </span><span class="hl-9">&#39;top-left&#39;</span><span class="hl-1"> | </span><span class="hl-9">&#39;bottom-left&#39;</span><span class="hl-1">): </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-5">vectorToCubemapUv</span><span class="hl-1">(</span><span class="hl-6">vector</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">, </span><span class="hl-6">uvOrigin</span><span class="hl-1">?: </span><span class="hl-9">&#39;top-left&#39;</span><span class="hl-1"> | </span><span class="hl-9">&#39;bottom-left&#39;</span><span class="hl-1">): [</span><span class="hl-7">CubeFace</span><span class="hl-1">, </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector2</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-5">cubemapUvToVector</span><span class="hl-1">(</span><span class="hl-6">cubeFace</span><span class="hl-1">: </span><span class="hl-7">CubeFace</span><span class="hl-1">, </span><span class="hl-6">uv</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector2</span><span class="hl-1">, </span><span class="hl-6">uvOrigin</span><span class="hl-1">?: </span><span class="hl-9">&#39;top-left&#39;</span><span class="hl-1"> | </span><span class="hl-9">&#39;bottom-left&#39;</span><span class="hl-1">): </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">;</span><br/><span class="hl-1">}</span> </code><button type="button">Copy</button></pre> <h2 id="events" class="tsd-anchor-link">Events<a href="#events" 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></h2> <p><code>Five</code> extends <code>Subscribe</code>, allowing event listening via <code>.on()</code>, <code>.once()</code>, and <code>.off()</code>.</p> <p>The SDK provides a modern event system (dot-notation, e.g., <code>gesture.tap</code>) which is recommended over the legacy system (camelCase, e.g., <code>wantsTapGesture</code>).</p> <h3 id="recommended-events-modern" class="tsd-anchor-link">Recommended Events (Modern)<a href="#recommended-events-modern" 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></h3> <p>These events follow a standard naming convention and provide typed event objects.</p> <h4 id="interaction-gestures" class="tsd-anchor-link">Interaction &amp; Gestures<a href="#interaction-gestures" 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> <table> <thead> <tr> <th style="text-align:left">Event Name</th> <th style="text-align:left">Description</th> <th style="text-align:left">Payload</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><code>gesture.tap</code></td> <td style="text-align:left">Triggered on tap/click. Replaces <code>wantsTapGesture</code>.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>gesture.dbltap</code></td> <td style="text-align:left">Triggered on double tap/click.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>gesture.pan</code></td> <td style="text-align:left">Triggered on pan/drag.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>gesture.pinch</code></td> <td style="text-align:left">Triggered on pinch/zoom.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>gesture.press</code></td> <td style="text-align:left">Triggered on long press.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>gesture.mousewheel</code></td> <td style="text-align:left">Triggered on mouse wheel scroll.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>gesture.mousemove</code></td> <td style="text-align:left">Triggered on mouse move.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>gesture.momentum</code></td> <td style="text-align:left">Triggered on inertia movement after pan.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>gesture.fire</code></td> <td style="text-align:left">Triggered when any gesture event fires.</td> <td style="text-align:left"><code>GestureEvent</code></td> </tr> </tbody> </table> <blockquote> <p>手势事件详解及不同 Mode 下的默认行为见 <a href="features_gesture.html">Gesture</a>。</p> </blockquote> <h4 id="state-mode" class="tsd-anchor-link">State &amp; Mode<a href="#state-mode" 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> <table> <thead> <tr> <th style="text-align:left">Event Name</th> <th style="text-align:left">Description</th> <th style="text-align:left">Payload</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><code>mode.change</code></td> <td style="text-align:left">Triggered when mode changes.</td> <td style="text-align:left"><code>ModeChangeEvent</code></td> </tr> <tr> <td style="text-align:left"><code>state.change</code></td> <td style="text-align:left">Triggered when state changes (frequent).</td> <td style="text-align:left"><code>StateEvent</code></td> </tr> <tr> <td style="text-align:left"><code>camera.update</code></td> <td style="text-align:left">Triggered when camera pose updates.</td> <td style="text-align:left"><code>CameraEvent</code></td> </tr> </tbody> </table> <blockquote> <p>状态管理详见 <a href="features_state.html">State</a>,模式切换详见 <a href="features_mode.html">Mode</a>。</p> </blockquote> <h4 id="lifecycle-resources" class="tsd-anchor-link">Lifecycle &amp; Resources<a href="#lifecycle-resources" 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> <table> <thead> <tr> <th style="text-align:left">Event Name</th> <th style="text-align:left">Description</th> <th style="text-align:left">Payload</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><code>works.load</code></td> <td style="text-align:left">Triggered when work data starts loading.</td> <td style="text-align:left"><code>WorksEvent</code></td> </tr> <tr> <td style="text-align:left"><code>works.ready</code></td> <td style="text-align:left">Triggered when work data is loaded and controller is ready.</td> <td style="text-align:left"><code>WorksEvent</code></td> </tr> <tr> <td style="text-align:left"><code>models.load</code></td> <td style="text-align:left">Triggered when models are loaded.</td> <td style="text-align:left"><code>ModelSceneEvent</code></td> </tr> <tr> <td style="text-align:left"><code>models.refined</code></td> <td style="text-align:left">Triggered when all models finish texture refinement.</td> <td style="text-align:left"><code>ModelSceneEvent</code></td> </tr> <tr> <td style="text-align:left"><code>model.load</code></td> <td style="text-align:left">Triggered when a single model geometry is loaded.</td> <td style="text-align:left"><code>ModelEvent</code></td> </tr> <tr> <td style="text-align:left"><code>model.tileLoad</code></td> <td style="text-align:left">Triggered when a 3D tile is loaded.</td> <td style="text-align:left"><code>ModelTileEvent</code></td> </tr> <tr> <td style="text-align:left"><code>model.tileUnload</code></td> <td style="text-align:left">Triggered when a 3D tile is unloaded.</td> <td style="text-align:left"><code>ModelTileEvent</code></td> </tr> <tr> <td style="text-align:left"><code>model.changeShownFloor</code></td> <td style="text-align:left">Triggered when floor visibility changes.</td> <td style="text-align:left"><code>ModelEvent</code></td> </tr> <tr> <td style="text-align:left"><code>model.error</code></td> <td style="text-align:left">Triggered when model loading fails.</td> <td style="text-align:left"><code>ModelErrorEvent</code></td> </tr> <tr> <td style="text-align:left"><code>pano.prepare</code></td> <td style="text-align:left">Triggered before switching to a new pano. <code>ExtendableEvent</code>, supports <code>waitUntil</code>. Event includes <code>options</code> (modifiable to affect transition), <code>prevMode</code>, <code>prevPano</code>, and <code>pano</code>.</td> <td style="text-align:left"><code>PanoPrepareEvent</code></td> </tr> <tr> <td style="text-align:left"><code>pano.arrived</code></td> <td style="text-align:left">Triggered when arrival at a panorama node.</td> <td style="text-align:left"><code>PanoEvent</code></td> </tr> <tr> <td style="text-align:left"><code>pano.moving</code></td> <td style="text-align:left">Triggered during pano transition animation.</td> <td style="text-align:left"><code>PanoEvent</code></td> </tr> <tr> <td style="text-align:left"><code>pano.error</code></td> <td style="text-align:left">Triggered when pano loading or movement fails.</td> <td style="text-align:left"><code>PanoEvent</code></td> </tr> <tr> <td style="text-align:left"><code>pano.texture.progress</code></td> <td style="text-align:left">Triggered when panorama texture loading progresses.</td> <td style="text-align:left"><code>PanoTextureEvent</code></td> </tr> <tr> <td style="text-align:left"><code>render</code></td> <td style="text-align:left">Triggered after each render frame.</td> <td style="text-align:left"><code>RenderEvent</code></td> </tr> <tr> <td style="text-align:left"><code>render.prepare</code></td> <td style="text-align:left">Triggered before each render frame.</td> <td style="text-align:left"><code>RenderEvent</code></td> </tr> <tr> <td style="text-align:left"><code>error</code></td> <td style="text-align:left">Triggered on internal errors.</td> <td style="text-align:left"><code>Error</code></td> </tr> </tbody> </table> <blockquote> <p>事件系统详解见 <a href="features_event.html">Event</a>。手势事件详解见 <a href="features_gesture.html">Gesture</a>。 <code>pano.prepare</code> 的 <code>waitUntil</code> / <code>preventDefault</code> 用法见 <a href="../../ai_guides/features/event.md#event-%E5%AF%B9%E8%B1%A1">Event - Event 对象</a>。 模型生命周期事件见 <a href="../../ai_guides/features/model.md#events">Model</a> 和 <a href="features_load-progress.html">Load Progress</a>。</p> </blockquote> <h3 id="legacy-events-deprecated" class="tsd-anchor-link">Legacy Events (Deprecated)<a href="#legacy-events-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></h3> <p>Older events are still supported for compatibility but should be avoided in new code.</p> <table> <thead> <tr> <th style="text-align:left">Legacy Event</th> <th style="text-align:left">Recommended Replacement</th> <th style="text-align:left">Notes</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><code>wantsTapGesture</code></td> <td style="text-align:left"><code>gesture.tap</code></td> <td style="text-align:left"></td> </tr> <tr> <td style="text-align:left"><code>wantsPanGesture</code></td> <td style="text-align:left"><code>gesture.pan</code></td> <td style="text-align:left"></td> </tr> <tr> <td style="text-align:left"><code>modelLoaded</code></td> <td style="text-align:left"><code>models.load</code></td> <td style="text-align:left"></td> </tr> <tr> <td style="text-align:left"><code>initAnimationEnded</code></td> <td style="text-align:left"><code>mode.change</code></td> <td style="text-align:left">Check payload for details</td> </tr> </tbody> </table> <h3 id="usage-example" class="tsd-anchor-link">Usage Example<a href="#usage-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></h3> <pre><code class="typescript"><span class="hl-8">// Recommended: Use the new event system</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">&#39;gesture.tap&#39;</span><span class="hl-1">, (</span><span class="hl-6">event</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&#39;User tapped at:&#39;</span><span class="hl-1">, </span><span class="hl-6">event</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// Legacy (Avoid):</span><br/><span class="hl-8">// five.on(&#39;wantsTapGesture&#39;, (raycaster) =&gt; { ... });</span> </code><button type="button">Copy</button></pre> </div></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><details open class="tsd-accordion tsd-page-navigation"><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>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#five-sdk-api-reference"><span>Five <wbr/>SDK <wbr/>API <wbr/>Reference</span></a><ul><li><a href="#core-class"><span>Core <wbr/>Class: </span></a></li><li><ul><li><a href="#constructor"><span>Constructor</span></a></li><li><a href="#properties"><span>Properties</span></a></li><li><a href="#static-properties"><span>Static <wbr/>Properties</span></a></li></ul></li><li><a href="#initialization-configuration-"><span>Initialization <wbr/>Configuration ()</span></a></li><li><a href="#core-methods"><span>Core <wbr/>Methods</span></a></li><li><ul><li><a href="#_"><span></span></a></li><li><a href="#_-1"><span></span></a></li><li><a href="#_-2"><span></span></a></li><li><a href="#_-3"><span></span></a></li><li><a href="#_-4"><span></span></a></li><li><a href="#_-5"><span></span></a></li><li><a href="#_-6"><span></span></a></li><li><a href="#_-7"><span></span></a></li><li><a href="#_-8"><span></span></a></li><li><a href="#_-9"><span></span></a></li><li><a href="#_-10"><span></span></a></li><li><a href="#_-11"><span></span></a></li><li><a href="#_-12"><span> / </span></a></li><li><a href="#_-13"><span></span></a></li><li><a href="#_-14"><span></span></a></li></ul></li><li><a href="#state-management"><span>State <wbr/>Management</span></a></li><li><a href="#data-structures"><span>Data <wbr/>Structures</span></a></li><li><ul><li><a href="#_-15"><span></span></a></li><li><a href="#panorama-point"><span> (<wbr/>Panorama <wbr/>Point)</span></a></li></ul></li><li><a href="#events"><span>Events</span></a></li><li><ul><li><a href="#recommended-events-modern"><span>Recommended <wbr/>Events (<wbr/>Modern)</span></a></li><li><ul><li><a href="#interaction-gestures"><span>Interaction &amp; <wbr/>Gestures</span></a></li><li><a href="#state-mode"><span>State &amp; <wbr/>Mode</span></a></li><li><a href="#lifecycle-resources"><span>Lifecycle &amp; <wbr/>Resources</span></a></li></ul></li><li><a href="#legacy-events-deprecated"><span>Legacy <wbr/>Events (<wbr/>Deprecated)</span></a></li><li><a href="#usage-example"><span>Usage <wbr/>Example</span></a></li></ul></li></ul></div></details></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>