npm - @realsee/five - Versions diffs - 6.8.9 → 6.9.0-alpha.1 - Mend

@realsee/five 6.8.9 → 6.9.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 (281) hide show

package/docs/documents/features_event.html CHANGED Viewed

@@ -12,7 +12,7 @@
 <p>Five 实例提供了以下方法来管理事件监听：</p>
 <h3 id="on" class="tsd-anchor-link">on<a href="#on" 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>注册持久化事件监听器。</p>
-<pre><code class="typescript"><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><br/><span class="hl-1">  </span><span class="hl-6">name</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">callback</span><span class="hl-1">: (...</span><span class="hl-6">args</span><span class="hl-1">: </span><span class="hl-7">any</span><span class="hl-1">[]) </span><span class="hl-3">=&gt;</span><span class="hl-1"> </span><span class="hl-3">void</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">once</span><span class="hl-1">?: </span><span class="hl-6">boolean</span><br/><span class="hl-1">): () </span><span class="hl-3">=&gt;</span><span class="hl-1"> </span><span class="hl-3">void</span>
+<pre><code class="typescript"><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><br/><span class="hl-1">  </span><span class="hl-5">name</span><span class="hl-1">: </span><span class="hl-5">string</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">callback</span><span class="hl-1">: (...</span><span class="hl-5">args</span><span class="hl-1">: </span><span class="hl-9">any</span><span class="hl-1">[]) </span><span class="hl-8">=&gt;</span><span class="hl-1"> </span><span class="hl-8">void</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">once</span><span class="hl-1">?: </span><span class="hl-5">boolean</span><br/><span class="hl-1">): () </span><span class="hl-8">=&gt;</span><span class="hl-1"> </span><span class="hl-8">void</span>
 </code><button type="button">Copy</button></pre>
 <ul>
@@ -23,12 +23,12 @@
 </ul>
 <h3 id="once" class="tsd-anchor-link">once<a href="#once" 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>注册一次性事件监听器（触发一次后自动销毁）。</p>
-<pre><code class="typescript"><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">once</span><span class="hl-1">(</span><br/><span class="hl-1">  </span><span class="hl-6">name</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">callback</span><span class="hl-1">: (...</span><span class="hl-6">args</span><span class="hl-1">: </span><span class="hl-7">any</span><span class="hl-1">[]) </span><span class="hl-3">=&gt;</span><span class="hl-1"> </span><span class="hl-3">void</span><br/><span class="hl-1">): () </span><span class="hl-3">=&gt;</span><span class="hl-1"> </span><span class="hl-3">void</span>
+<pre><code class="typescript"><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">once</span><span class="hl-1">(</span><br/><span class="hl-1">  </span><span class="hl-5">name</span><span class="hl-1">: </span><span class="hl-5">string</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">callback</span><span class="hl-1">: (...</span><span class="hl-5">args</span><span class="hl-1">: </span><span class="hl-9">any</span><span class="hl-1">[]) </span><span class="hl-8">=&gt;</span><span class="hl-1"> </span><span class="hl-8">void</span><br/><span class="hl-1">): () </span><span class="hl-8">=&gt;</span><span class="hl-1"> </span><span class="hl-8">void</span>
 </code><button type="button">Copy</button></pre>
 <h3 id="off" class="tsd-anchor-link">off<a href="#off" 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>取消事件监听。</p>
-<pre><code class="typescript"><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">off</span><span class="hl-1">(</span><br/><span class="hl-1">  </span><span class="hl-6">name</span><span class="hl-1">?: </span><span class="hl-6">string</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">callback</span><span class="hl-1">?: (...</span><span class="hl-6">args</span><span class="hl-1">: </span><span class="hl-7">any</span><span class="hl-1">[]) </span><span class="hl-3">=&gt;</span><span class="hl-1"> </span><span class="hl-3">void</span><br/><span class="hl-1">): </span><span class="hl-3">void</span>
+<pre><code class="typescript"><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">off</span><span class="hl-1">(</span><br/><span class="hl-1">  </span><span class="hl-5">name</span><span class="hl-1">?: </span><span class="hl-5">string</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">callback</span><span class="hl-1">?: (...</span><span class="hl-5">args</span><span class="hl-1">: </span><span class="hl-9">any</span><span class="hl-1">[]) </span><span class="hl-8">=&gt;</span><span class="hl-1"> </span><span class="hl-8">void</span><br/><span class="hl-1">): </span><span class="hl-8">void</span>
 </code><button type="button">Copy</button></pre>
 <ul>
@@ -42,12 +42,12 @@
 <p>Five 中所有事件回调的参数都是一个 Event 对象，分为两种基础类型：</p>
 <h3 id="baseevent" class="tsd-anchor-link">BaseEvent<a href="#baseevent" 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>所有事件的基础接口，包含以下属性和方法：</p>
-<pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">BaseEvent</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-8">/** 事件类型名称 */</span><br/><span class="hl-1">  </span><span class="hl-6">type</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-8">/** 事件触发时的时间戳 */</span><br/><span class="hl-1">  </span><span class="hl-6">timeStamp</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-8">/** 阻止事件的默认行为 */</span><br/><span class="hl-1">  </span><span class="hl-5">preventDefault</span><span class="hl-1">(): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-8">/** 是否已调用过 preventDefault */</span><br/><span class="hl-1">  </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">defaultPrevented</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
+<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">BaseEvent</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-7">/** 事件类型名称 */</span><br/><span class="hl-1">  </span><span class="hl-5">type</span><span class="hl-1">: </span><span class="hl-9">string</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 事件触发时的时间戳 */</span><br/><span class="hl-1">  </span><span class="hl-5">timeStamp</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 阻止事件的默认行为 */</span><br/><span class="hl-1">  </span><span class="hl-4">preventDefault</span><span class="hl-1">(): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 是否已调用过 preventDefault */</span><br/><span class="hl-1">  </span><span class="hl-8">readonly</span><span class="hl-1"> </span><span class="hl-5">defaultPrevented</span><span class="hl-1">: </span><span class="hl-9">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 <h3 id="baseextendableevent" class="tsd-anchor-link">BaseExtendableEvent<a href="#baseextendableevent" 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>继承自 <code>BaseEvent</code>，额外提供 <code>waitUntil</code> 方法，用于在事件处理中插入异步等待逻辑：</p>
-<pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">BaseExtendableEvent</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">BaseEvent</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">waitUntil</span><span class="hl-1">(</span><span class="hl-6">f</span><span class="hl-1">: </span><span class="hl-7">Promise</span><span class="hl-1">&lt;</span><span class="hl-7">any</span><span class="hl-1">&gt;): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
+<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">BaseExtendableEvent</span><span class="hl-1"> </span><span class="hl-8">extends</span><span class="hl-1"> </span><span class="hl-9">BaseEvent</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-4">waitUntil</span><span class="hl-1">(</span><span class="hl-5">f</span><span class="hl-1">: </span><span class="hl-9">Promise</span><span class="hl-1">&lt;</span><span class="hl-9">any</span><span class="hl-1">&gt;): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 <p>目前 <code>pano.prepare</code> 事件使用 <code>BaseExtendableEvent</code>（对应 <code>PanoPrepareEvent</code>），其余事件均基于 <code>BaseEvent</code>。</p>
@@ -90,13 +90,13 @@
 <li><code>gesture.tap</code>：阻止默认的点位跳转或相机弹跳动画。</li>
 <li><code>intersect.update</code>：阻止默认的交互高亮行为。</li>
 </ul>
-<pre><code class="typescript"><span class="hl-8">// 示例：阻止点击时的默认点位跳转</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">&quot;gesture.tap&quot;</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-10">if</span><span class="hl-1"> (</span><span class="hl-5">shouldBlockNavigation</span><span class="hl-1">()) {</span><br/><span class="hl-1">    </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-5">preventDefault</span><span class="hl-1">();</span><br/><span class="hl-1">    </span><span class="hl-8">// 执行自定义逻辑</span><br/><span class="hl-1">    </span><span class="hl-5">showCustomMenu</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">);</span><br/><span class="hl-1">  }</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 示例：阻止拖拽时的默认相机旋转</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">&quot;gesture.pan&quot;</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">event</span><span class="hl-1">.</span><span class="hl-5">preventDefault</span><span class="hl-1">();</span><br/><span class="hl-1">  </span><span class="hl-8">// 用拖拽手势实现自定义交互（如绘制标注）</span><br/><span class="hl-1">  </span><span class="hl-5">drawAnnotation</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
+<pre><code class="typescript"><span class="hl-7">// 示例：阻止点击时的默认点位跳转</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">&quot;gesture.tap&quot;</span><span class="hl-1">, (</span><span class="hl-5">event</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-11">if</span><span class="hl-1"> (</span><span class="hl-4">shouldBlockNavigation</span><span class="hl-1">()) {</span><br/><span class="hl-1">    </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-4">preventDefault</span><span class="hl-1">();</span><br/><span class="hl-1">    </span><span class="hl-7">// 执行自定义逻辑</span><br/><span class="hl-1">    </span><span class="hl-4">showCustomMenu</span><span class="hl-1">(</span><span class="hl-5">event</span><span class="hl-1">);</span><br/><span class="hl-1">  }</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 示例：阻止拖拽时的默认相机旋转</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">&quot;gesture.pan&quot;</span><span class="hl-1">, (</span><span class="hl-5">event</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-4">preventDefault</span><span class="hl-1">();</span><br/><span class="hl-1">  </span><span class="hl-7">// 用拖拽手势实现自定义交互（如绘制标注）</span><br/><span class="hl-1">  </span><span class="hl-4">drawAnnotation</span><span class="hl-1">(</span><span class="hl-5">event</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
 </code><button type="button">Copy</button></pre>
 <h3 id="waituntil" class="tsd-anchor-link">waitUntil<a href="#waituntil" 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><code>waitUntil(promise)</code> 仅在 <code>ExtendableEvent</code> 上可用。调用后，Five 会等待传入的 Promise 完成后再继续后续流程。可多次调用，所有 Promise 会被并行等待。</p>
 <p>目前仅 <code>pano.prepare</code> 事件支持 <code>waitUntil</code>。</p>
-<pre><code class="typescript"><span class="hl-8">// 示例：在切换点位前预加载资源</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">&quot;pano.prepare&quot;</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-8">// event.pano 目标点位</span><br/><span class="hl-1">  </span><span class="hl-8">// event.prevPano 切换前点位</span><br/><span class="hl-1">  </span><span class="hl-8">// event.prevMode 切换前模式</span><br/><span class="hl-1">  </span><span class="hl-8">// 等待自定义资源加载完成后再继续点位切换</span><br/><span class="hl-1">  </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-5">waitUntil</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-5">loadCustomResources</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">pano</span><span class="hl-1">)</span><br/><span class="hl-1">  );</span><br/><br/><span class="hl-1">  </span><span class="hl-8">// 可以多次调用，所有 Promise 会被并行等待</span><br/><span class="hl-1">  </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-5">waitUntil</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-5">preloadTextures</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">pano</span><span class="hl-1">)</span><br/><span class="hl-1">  );</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 示例：通过 waitUntil reject 来取消走点</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">&quot;pano.prepare&quot;</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">event</span><span class="hl-1">.</span><span class="hl-5">waitUntil</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-5">showConfirmDialog</span><span class="hl-1">(</span><span class="hl-9">&quot;是否前往该点位？&quot;</span><span class="hl-1">).</span><span class="hl-5">then</span><span class="hl-1">((</span><span class="hl-6">confirmed</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-10">if</span><span class="hl-1"> (!</span><span class="hl-6">confirmed</span><span class="hl-1">) {</span><br/><span class="hl-1">        </span><span class="hl-10">throw</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Error</span><span class="hl-1">(</span><span class="hl-9">&quot;用户取消走点&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">      }</span><br/><span class="hl-1">    })</span><br/><span class="hl-1">  );</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 示例：修改 event.options 影响切换行为</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">&quot;pano.prepare&quot;</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-8">// 修改切换动画效果为无动画</span><br/><span class="hl-1">  </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">options</span><span class="hl-1">.</span><span class="hl-6">effect</span><span class="hl-1"> = </span><span class="hl-9">&quot;instant&quot;</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-8">// 或修改切换后的相机朝向</span><br/><span class="hl-1">  </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">options</span><span class="hl-1">.</span><span class="hl-6">longitude</span><span class="hl-1"> = </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-4">PI</span><span class="hl-1"> / </span><span class="hl-11">4</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">options</span><span class="hl-1">.</span><span class="hl-6">latitude</span><span class="hl-1"> = </span><span class="hl-11">0</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">options</span><span class="hl-1">.</span><span class="hl-6">fov</span><span class="hl-1"> = </span><span class="hl-11">90</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-8">// 注意：直接修改 event.options 属性即可，不需要重新赋值 event.options</span><br/><span class="hl-1">});</span>
+<pre><code class="typescript"><span class="hl-7">// 示例：在切换点位前预加载资源</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">&quot;pano.prepare&quot;</span><span class="hl-1">, (</span><span class="hl-5">event</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-7">// event.pano 目标点位</span><br/><span class="hl-1">  </span><span class="hl-7">// event.prevPano 切换前点位</span><br/><span class="hl-1">  </span><span class="hl-7">// event.prevMode 切换前模式</span><br/><span class="hl-1">  </span><span class="hl-7">// 等待自定义资源加载完成后再继续点位切换</span><br/><span class="hl-1">  </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-4">waitUntil</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-4">loadCustomResources</span><span class="hl-1">(</span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-5">pano</span><span class="hl-1">)</span><br/><span class="hl-1">  );</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 可以多次调用，所有 Promise 会被并行等待</span><br/><span class="hl-1">  </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-4">waitUntil</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-4">preloadTextures</span><span class="hl-1">(</span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-5">pano</span><span class="hl-1">)</span><br/><span class="hl-1">  );</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 示例：通过 waitUntil reject 来取消走点</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">&quot;pano.prepare&quot;</span><span class="hl-1">, (</span><span class="hl-5">event</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-4">waitUntil</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-4">showConfirmDialog</span><span class="hl-1">(</span><span class="hl-10">&quot;是否前往该点位？&quot;</span><span class="hl-1">).</span><span class="hl-4">then</span><span class="hl-1">((</span><span class="hl-5">confirmed</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">      </span><span class="hl-11">if</span><span class="hl-1"> (!</span><span class="hl-5">confirmed</span><span class="hl-1">) {</span><br/><span class="hl-1">        </span><span class="hl-11">throw</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">Error</span><span class="hl-1">(</span><span class="hl-10">&quot;用户取消走点&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">      }</span><br/><span class="hl-1">    })</span><br/><span class="hl-1">  );</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 示例：修改 event.options 影响切换行为</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">&quot;pano.prepare&quot;</span><span class="hl-1">, (</span><span class="hl-5">event</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-7">// 修改切换动画效果为无动画</span><br/><span class="hl-1">  </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-5">options</span><span class="hl-1">.</span><span class="hl-5">effect</span><span class="hl-1"> = </span><span class="hl-10">&quot;instant&quot;</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">// 或修改切换后的相机朝向</span><br/><span class="hl-1">  </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-5">options</span><span class="hl-1">.</span><span class="hl-5">longitude</span><span class="hl-1"> = </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-6">PI</span><span class="hl-1"> / </span><span class="hl-3">4</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-5">options</span><span class="hl-1">.</span><span class="hl-5">latitude</span><span class="hl-1"> = </span><span class="hl-3">0</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-5">options</span><span class="hl-1">.</span><span class="hl-5">fov</span><span class="hl-1"> = </span><span class="hl-3">90</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">// 注意：直接修改 event.options 属性即可，不需要重新赋值 event.options</span><br/><span class="hl-1">});</span>
 </code><button type="button">Copy</button></pre>
 <blockquote>
@@ -148,12 +148,12 @@
 <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" 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="快速上手-quick-example" class="tsd-anchor-link">快速上手 (Quick Example)<a href="#快速上手-quick-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>
 <p>监听点击事件并打印日志。</p>
-<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><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><br/><br/><span class="hl-8">// 监听点击事件</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">&quot;gesture.tap&quot;</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">&quot;User tapped at:&quot;</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">// 监听点位变更完成</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">&quot;pano.arrived&quot;</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">&quot;Arrived at pano:&quot;</span><span class="hl-1">, </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">pano</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
+<pre><code class="typescript"><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">Five</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-7">// 监听点击事件</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">&quot;gesture.tap&quot;</span><span class="hl-1">, (</span><span class="hl-5">event</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">&quot;User tapped at:&quot;</span><span class="hl-1">, </span><span class="hl-5">event</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 监听点位变更完成</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">&quot;pano.arrived&quot;</span><span class="hl-1">, (</span><span class="hl-5">event</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">&quot;Arrived at pano:&quot;</span><span class="hl-1">, </span><span class="hl-5">event</span><span class="hl-1">.</span><span class="hl-5">pano</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
 </code><button type="button">Copy</button></pre>
 <h3 id="进阶用法-advanced-usage" class="tsd-anchor-link">进阶用法 (Advanced Usage)<a href="#进阶用法-advanced-usage" 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>使用 <code>once</code> 监听一次性初始化事件，使用返回值取消监听。</p>
-<pre><code class="typescript"><span class="hl-8">// 1. 等待首次数据加载完成</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">once</span><span class="hl-1">(</span><span class="hl-9">&quot;works.ready&quot;</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">&quot;Five is ready!&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">  </span><span class="hl-8">// 执行初始化逻辑，如自动巡游</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 2. 动态绑定与解绑</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-5">onRender</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-8">// 每一帧执行的逻辑</span><br/><span class="hl-1">  </span><span class="hl-5">updateUI</span><span class="hl-1">();</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-8">// 开始监听</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">&quot;render&quot;</span><span class="hl-1">, </span><span class="hl-6">onRender</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 在某个时刻取消监听（例如组件销毁时）</span><br/><span class="hl-8">// five.off(&quot;render&quot;, onRender);</span>
+<pre><code class="typescript"><span class="hl-7">// 1. 等待首次数据加载完成</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">once</span><span class="hl-1">(</span><span class="hl-10">&quot;works.ready&quot;</span><span class="hl-1">, () </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">&quot;Five is ready!&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">  </span><span class="hl-7">// 执行初始化逻辑，如自动巡游</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 2. 动态绑定与解绑</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-4">onRender</span><span class="hl-1"> = () </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-7">// 每一帧执行的逻辑</span><br/><span class="hl-1">  </span><span class="hl-4">updateUI</span><span class="hl-1">();</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-7">// 开始监听</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">&quot;render&quot;</span><span class="hl-1">, </span><span class="hl-5">onRender</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 在某个时刻取消监听（例如组件销毁时）</span><br/><span class="hl-7">// five.off(&quot;render&quot;, onRender);</span>
 </code><button type="button">Copy</button></pre>
 <h2 id="debugging" class="tsd-anchor-link">Debugging<a href="#debugging" 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>
@@ -166,7 +166,7 @@
 <li><a href="features_five.html">Five</a>: Five 核心类说明。</li>
 </ul>
 <hr>
-<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">事件监听</span><span class="hl-1">, </span><span class="hl-2">点击</span><span class="hl-1">, </span><span class="hl-2">拖拽</span><span class="hl-1">, </span><span class="hl-2">加载完成</span><span class="hl-1">, </span><span class="hl-2">渲染回调</span><span class="hl-1">, </span><span class="hl-2">生命周期</span><span class="hl-1">, </span><span class="hl-2">回调</span><span class="hl-1">, </span><span class="hl-2">events</span><span class="hl-1">, </span><span class="hl-2">interaction</span><span class="hl-1">, </span><span class="hl-2">lifecycle</span><span class="hl-1">, </span><span class="hl-2">gesture</span><span class="hl-1">, </span><span class="hl-2">state</span><span class="hl-1">, </span><span class="hl-2">preventDefault</span><span class="hl-1">, </span><span class="hl-2">waitUntil</span><span class="hl-1">, </span><span class="hl-3">on</span><span class="hl-1">, </span><span class="hl-3">off</span><span class="hl-1">, </span><span class="hl-2">subscribe</span><span class="hl-1">]</span>
+<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">事件监听</span><span class="hl-1">, </span><span class="hl-2">点击</span><span class="hl-1">, </span><span class="hl-2">拖拽</span><span class="hl-1">, </span><span class="hl-2">加载完成</span><span class="hl-1">, </span><span class="hl-2">渲染回调</span><span class="hl-1">, </span><span class="hl-2">生命周期</span><span class="hl-1">, </span><span class="hl-2">回调</span><span class="hl-1">, </span><span class="hl-2">events</span><span class="hl-1">, </span><span class="hl-2">interaction</span><span class="hl-1">, </span><span class="hl-2">lifecycle</span><span class="hl-1">, </span><span class="hl-2">gesture</span><span class="hl-1">, </span><span class="hl-2">state</span><span class="hl-1">, </span><span class="hl-2">preventDefault</span><span class="hl-1">, </span><span class="hl-2">waitUntil</span><span class="hl-1">, </span><span class="hl-8">on</span><span class="hl-1">, </span><span class="hl-8">off</span><span class="hl-1">, </span><span class="hl-2">subscribe</span><span class="hl-1">]</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="#events-事件系统"><span>Events (事件系统)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><ul><li><a href="#on"><span>on</span></a></li><li><a href="#once"><span>once</span></a></li><li><a href="#off"><span>off</span></a></li></ul></li><li><a href="#event-对象"><span>Event 对象</span></a></li><li><ul><li><a href="#baseevent"><span>Base<wbr/>Event</span></a></li><li><a href="#baseextendableevent"><span>Base<wbr/>Extendable<wbr/>Event</span></a></li><li><a href="#preventdefault"><span>prevent<wbr/>Default</span></a></li><li><a href="#waituntil"><span>wait<wbr/>Until</span></a></li></ul></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#gesture-events-交互手势"><span>Gesture <wbr/>Events (交互手势)</span></a></li><li><a href="#pano-events-全景导航"><span>Pano <wbr/>Events (全景导航)</span></a></li><li><a href="#state-events-状态变更"><span>State <wbr/>Events (状态变更)</span></a></li><li><a href="#model-work-events-数据加载"><span>Model &amp; <wbr/>Work <wbr/>Events (数据加载)</span></a></li><li><a href="#render-events-渲染循环"><span>Render <wbr/>Events (渲染循环)</span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#进阶用法-advanced-usage"><span>进阶用法 (<wbr/>Advanced <wbr/>Usage)</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><a href="#related"><span>Related</span></a></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>

package/docs/documents/features_five.html CHANGED Viewed

@@ -12,7 +12,7 @@
 <p><strong>Definition</strong>: <a href="../../five/application/fiveInitArgs.d.ts">FiveInitArgs</a></p>
 </blockquote>
 <p><code>new Five(args)</code> 的初始化参数对象。</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">/** 外部传入的渲染器 (如果传入，部分渲染配置将失效) */</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/><span class="hl-1">  </span><span class="hl-8">/**</span><br/><span class="hl-8">   * 屏幕渲染区域 { left, bottom, width, height }</span><br/><span class="hl-8">   * 必须配合外部 renderer 使用</span><br/><span class="hl-8">   */</span><br/><span class="hl-1">  </span><span class="hl-6">viewport</span><span class="hl-1">?: </span><span class="hl-7">Viewport</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-8">/** 背景颜色 (默认 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/><span class="hl-1">  </span><span class="hl-8">/** 背景透明度 (0-1, 默认 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/><span class="hl-1">  </span><span class="hl-8">/** 是否开启抗锯齿 (默认 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/><span class="hl-1">  </span><span class="hl-8">/** 全景图配置 (见 image-options.md) */</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/><span class="hl-1">  </span><span class="hl-8">/** 贴图配置 (见 image-options.md) */</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/><span class="hl-1">  </span><span class="hl-8">/** 是否按需渲染 (默认 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/><span class="hl-1">  </span><span class="hl-8">/** 模式切换动画时长 (ms, 默认 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/><span class="hl-1">  </span><span class="hl-8">/** 是否支持滚轮缩放 (默认 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/><span class="hl-1">  </span><span class="hl-8">/** 插件列表 */</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/><span class="hl-1">  </span><span class="hl-8">/** 是否显示 Powered by Realsee */</span><br/><span class="hl-1">  </span><span class="hl-6">poweredByRealsee</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
+<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">FiveInitArgs</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-7">/** 外部传入的渲染器 (如果传入，部分渲染配置将失效) */</span><br/><span class="hl-1">  </span><span class="hl-5">renderer</span><span class="hl-1">?: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">WebGLRenderer</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/**</span><br/><span class="hl-7">   * 屏幕渲染区域 { left, bottom, width, height }</span><br/><span class="hl-7">   * 必须配合外部 renderer 使用</span><br/><span class="hl-7">   */</span><br/><span class="hl-1">  </span><span class="hl-5">viewport</span><span class="hl-1">?: </span><span class="hl-9">Viewport</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 背景颜色 (默认 0x181A1C) */</span><br/><span class="hl-1">  </span><span class="hl-5">backgroundColor</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1"> | </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Color</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 背景透明度 (0-1, 默认 1) */</span><br/><span class="hl-1">  </span><span class="hl-5">backgroundAlpha</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 是否开启抗锯齿 (默认 false) */</span><br/><span class="hl-1">  </span><span class="hl-5">antialias</span><span class="hl-1">?: </span><span class="hl-9">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 全景图配置 (见 image-options.md) */</span><br/><span class="hl-1">  </span><span class="hl-5">imageOptions</span><span class="hl-1">?: </span><span class="hl-9">ImageOptions</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 贴图配置 (见 image-options.md) */</span><br/><span class="hl-1">  </span><span class="hl-5">textureOptions</span><span class="hl-1">?: </span><span class="hl-9">TextureOptions</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 是否按需渲染 (默认 true, 推荐开启以节省性能) */</span><br/><span class="hl-1">  </span><span class="hl-5">onlyRenderIfNeeds</span><span class="hl-1">?: </span><span class="hl-9">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 模式切换动画时长 (ms, 默认 1000) */</span><br/><span class="hl-1">  </span><span class="hl-5">modeChangeDuration</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 是否支持滚轮缩放 (默认 true) */</span><br/><span class="hl-1">  </span><span class="hl-5">enableWheel</span><span class="hl-1">?: </span><span class="hl-9">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-7">/** 插件列表 */</span><br/><span class="hl-1">  </span><span class="hl-5">plugins</span><span class="hl-1">?: </span><span class="hl-9">FivePlugin</span><span class="hl-1">[];</span><br/><span class="hl-1">  </span><span class="hl-7">/** 是否显示 Powered by Realsee */</span><br/><span class="hl-1">  </span><span class="hl-5">poweredByRealsee</span><span class="hl-1">?: </span><span class="hl-9">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 <h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" 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>
@@ -86,17 +86,17 @@
 <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" 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="快速上手-quick-example" class="tsd-anchor-link">快速上手 (Quick Example)<a href="#快速上手-quick-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>
 <p>创建一个全屏的 Five 实例并加载数据。</p>
-<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">parseWork</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 1. 初始化实例</span><br/><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><br/><span class="hl-1">  </span><span class="hl-6">imageOptions:</span><span class="hl-1"> { </span><span class="hl-6">size:</span><span class="hl-1"> </span><span class="hl-11">512</span><span class="hl-1"> }, </span><span class="hl-8">// 初始加载小图</span><br/><span class="hl-1">  </span><span class="hl-6">onlyRenderIfNeeds:</span><span class="hl-1"> </span><span class="hl-3">true</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 2. 挂载到 DOM</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">appendTo</span><span class="hl-1">(</span><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">getElementById</span><span class="hl-1">(</span><span class="hl-9">&quot;app&quot;</span><span class="hl-1">));</span><br/><br/><span class="hl-8">// 3. 加载数据</span><br/><span class="hl-8">// workData 通常来自服务端 API</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">load</span><span class="hl-1">(</span><span class="hl-6">workData</span><span class="hl-1">);</span>
+<pre><code class="typescript"><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">Five</span><span class="hl-1">, </span><span class="hl-5">parseWork</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-7">// 1. 初始化实例</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">Five</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">imageOptions:</span><span class="hl-1"> { </span><span class="hl-5">size:</span><span class="hl-1"> </span><span class="hl-3">512</span><span class="hl-1"> }, </span><span class="hl-7">// 初始加载小图</span><br/><span class="hl-1">  </span><span class="hl-5">onlyRenderIfNeeds:</span><span class="hl-1"> </span><span class="hl-8">true</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 2. 挂载到 DOM</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">appendTo</span><span class="hl-1">(</span><span class="hl-5">document</span><span class="hl-1">.</span><span class="hl-4">getElementById</span><span class="hl-1">(</span><span class="hl-10">&quot;app&quot;</span><span class="hl-1">));</span><br/><br/><span class="hl-7">// 3. 加载数据</span><br/><span class="hl-7">// workData 通常来自服务端 API</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">load</span><span class="hl-1">(</span><span class="hl-5">workData</span><span class="hl-1">);</span>
 </code><button type="button">Copy</button></pre>
 <h3 id="进阶用法：自定义渲染器与视口" class="tsd-anchor-link">进阶用法：自定义渲染器与视口<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>使用外部渲染器并指定视口区域（例如用于分屏渲染）。</p>
-<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;three&quot;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">renderer</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">WebGLRenderer</span><span class="hl-1">();</span><br/><span class="hl-6">renderer</span><span class="hl-1">.</span><span class="hl-5">setSize</span><span class="hl-1">(</span><span class="hl-6">window</span><span class="hl-1">.</span><span class="hl-6">innerWidth</span><span class="hl-1">, </span><span class="hl-6">window</span><span class="hl-1">.</span><span class="hl-6">innerHeight</span><span class="hl-1">);</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-6">body</span><span class="hl-1">.</span><span class="hl-5">appendChild</span><span class="hl-1">(</span><span class="hl-6">renderer</span><span class="hl-1">.</span><span class="hl-6">domElement</span><span class="hl-1">);</span><br/><br/><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><br/><span class="hl-1">  </span><span class="hl-6">renderer:</span><span class="hl-1"> </span><span class="hl-6">renderer</span><span class="hl-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-11">0</span><span class="hl-1">, </span><span class="hl-6">bottom:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-6">width:</span><span class="hl-1"> </span><span class="hl-11">0.5</span><span class="hl-1">, </span><span class="hl-6">height:</span><span class="hl-1"> </span><span class="hl-11">1</span><span class="hl-1"> } </span><span class="hl-8">// 仅占用左半屏</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">load</span><span class="hl-1">(</span><span class="hl-6">workData</span><span class="hl-1">);</span>
+<pre><code class="typescript"><span class="hl-11">import</span><span class="hl-1"> </span><span class="hl-8">*</span><span class="hl-1"> </span><span class="hl-11">as</span><span class="hl-1"> </span><span class="hl-5">THREE</span><span class="hl-1"> </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&quot;three&quot;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">Five</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">renderer</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">WebGLRenderer</span><span class="hl-1">();</span><br/><span class="hl-5">renderer</span><span class="hl-1">.</span><span class="hl-4">setSize</span><span class="hl-1">(</span><span class="hl-5">window</span><span class="hl-1">.</span><span class="hl-5">innerWidth</span><span class="hl-1">, </span><span class="hl-5">window</span><span class="hl-1">.</span><span class="hl-5">innerHeight</span><span class="hl-1">);</span><br/><span class="hl-5">document</span><span class="hl-1">.</span><span class="hl-5">body</span><span class="hl-1">.</span><span class="hl-4">appendChild</span><span class="hl-1">(</span><span class="hl-5">renderer</span><span class="hl-1">.</span><span class="hl-5">domElement</span><span class="hl-1">);</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">Five</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">renderer:</span><span class="hl-1"> </span><span class="hl-5">renderer</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">viewport:</span><span class="hl-1"> { </span><span class="hl-5">left:</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-5">bottom:</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-5">width:</span><span class="hl-1"> </span><span class="hl-3">0.5</span><span class="hl-1">, </span><span class="hl-5">height:</span><span class="hl-1"> </span><span class="hl-3">1</span><span class="hl-1"> } </span><span class="hl-7">// 仅占用左半屏</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">load</span><span class="hl-1">(</span><span class="hl-5">workData</span><span class="hl-1">);</span>
 </code><button type="button">Copy</button></pre>
 <h3 id="进阶用法：自定义相机动画" class="tsd-anchor-link">进阶用法：自定义相机动画<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>使用 <code>updateCamera</code> 或 <code>updateCameraWithKeyframes</code> 实现平滑的视角漫游。</p>
-<pre><code class="typescript"><span class="hl-8">// 简单移动到指定视角</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">updateCamera</span><span class="hl-1">(</span><br/><span class="hl-1">  { </span><span class="hl-6">longitude:</span><span class="hl-1"> </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-4">PI</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-6">latitude:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1"> }, </span><span class="hl-8">// 目标姿态</span><br/><span class="hl-1">  </span><span class="hl-11">1000</span><span class="hl-1"> </span><span class="hl-8">// 动画时长 1秒</span><br/><span class="hl-1">).</span><span class="hl-5">then</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">&quot;移动完成&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">}).</span><span class="hl-5">catch</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">&quot;移动被打断&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 复杂关键帧动画</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">keyframes</span><span class="hl-1"> = [</span><br/><span class="hl-1">  { </span><span class="hl-6">progress:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-6">value:</span><span class="hl-1"> { </span><span class="hl-6">longitude:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-6">latitude:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1"> } },</span><br/><span class="hl-1">  { </span><span class="hl-6">progress:</span><span class="hl-1"> </span><span class="hl-11">0.5</span><span class="hl-1">, </span><span class="hl-6">value:</span><span class="hl-1"> { </span><span class="hl-6">longitude:</span><span class="hl-1"> </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-4">PI</span><span class="hl-1"> / </span><span class="hl-11">4</span><span class="hl-1">, </span><span class="hl-6">latitude:</span><span class="hl-1"> </span><span class="hl-11">0.2</span><span class="hl-1"> } },</span><br/><span class="hl-1">  { </span><span class="hl-6">progress:</span><span class="hl-1"> </span><span class="hl-11">1</span><span class="hl-1">, </span><span class="hl-6">value:</span><span class="hl-1"> { </span><span class="hl-6">longitude:</span><span class="hl-1"> </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-4">PI</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-6">latitude:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1"> } }</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">updateCameraWithKeyframes</span><span class="hl-1">(</span><span class="hl-6">keyframes</span><span class="hl-1">, </span><span class="hl-11">2000</span><span class="hl-1">).</span><span class="hl-5">then</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">&quot;关键帧动画完成&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
+<pre><code class="typescript"><span class="hl-7">// 简单移动到指定视角</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">updateCamera</span><span class="hl-1">(</span><br/><span class="hl-1">  { </span><span class="hl-5">longitude:</span><span class="hl-1"> </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-6">PI</span><span class="hl-1"> / </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-5">latitude:</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1"> }, </span><span class="hl-7">// 目标姿态</span><br/><span class="hl-1">  </span><span class="hl-3">1000</span><span class="hl-1"> </span><span class="hl-7">// 动画时长 1秒</span><br/><span class="hl-1">).</span><span class="hl-4">then</span><span class="hl-1">(() </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">&quot;移动完成&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">}).</span><span class="hl-4">catch</span><span class="hl-1">(() </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">&quot;移动被打断&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 复杂关键帧动画</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">keyframes</span><span class="hl-1"> = [</span><br/><span class="hl-1">  { </span><span class="hl-5">progress:</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-5">value:</span><span class="hl-1"> { </span><span class="hl-5">longitude:</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-5">latitude:</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1"> } },</span><br/><span class="hl-1">  { </span><span class="hl-5">progress:</span><span class="hl-1"> </span><span class="hl-3">0.5</span><span class="hl-1">, </span><span class="hl-5">value:</span><span class="hl-1"> { </span><span class="hl-5">longitude:</span><span class="hl-1"> </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-6">PI</span><span class="hl-1"> / </span><span class="hl-3">4</span><span class="hl-1">, </span><span class="hl-5">latitude:</span><span class="hl-1"> </span><span class="hl-3">0.2</span><span class="hl-1"> } },</span><br/><span class="hl-1">  { </span><span class="hl-5">progress:</span><span class="hl-1"> </span><span class="hl-3">1</span><span class="hl-1">, </span><span class="hl-5">value:</span><span class="hl-1"> { </span><span class="hl-5">longitude:</span><span class="hl-1"> </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-6">PI</span><span class="hl-1"> / </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-5">latitude:</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1"> } }</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">updateCameraWithKeyframes</span><span class="hl-1">(</span><span class="hl-5">keyframes</span><span class="hl-1">, </span><span class="hl-3">2000</span><span class="hl-1">).</span><span class="hl-4">then</span><span class="hl-1">(() </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">&quot;关键帧动画完成&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
 </code><button type="button">Copy</button></pre>
 <h3 id="实例属性-instance-properties" class="tsd-anchor-link">实例属性 (Instance Properties)<a href="#实例属性-instance-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>