@realsee/five-webgpu 1.0.0-alpha.1 → 1.0.0-alpha.2
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.
- package/README.md +6 -6
- package/ai_guides/README.md +2 -2
- package/ai_guides/features/clipper.md +1 -1
- package/ai_guides/features/coordinate-system.md +1 -1
- package/ai_guides/features/event.md +1 -1
- package/ai_guides/features/five.md +3 -3
- package/ai_guides/features/gesture.md +2 -2
- package/ai_guides/features/get-screen-pixels.md +1 -1
- package/ai_guides/features/image-options.md +3 -3
- package/ai_guides/features/load-external-model.md +9 -9
- package/ai_guides/features/mode.md +2 -2
- package/ai_guides/features/pano-filter.md +3 -3
- package/ai_guides/features/pano-tile.md +2 -2
- package/ai_guides/features/raycast.md +1 -1
- package/ai_guides/features/screen-project.md +1 -1
- package/ai_guides/features/state.md +1 -1
- package/ai_guides/features/work.md +2 -2
- package/ai_guides/quick-start.md +3 -3
- package/ai_guides/release_notes/6.6.md +2 -2
- package/ai_guides/release_notes/6.7.md +1 -1
- package/ai_guides/release_notes/6.8.md +1 -1
- package/docs/documents/README.html +2 -2
- package/docs/documents/features_clipper.html +1 -1
- package/docs/documents/features_coordinate-system.html +1 -1
- package/docs/documents/features_event.html +1 -1
- package/docs/documents/features_five.html +3 -3
- package/docs/documents/features_gesture.html +2 -2
- package/docs/documents/features_get-screen-pixels.html +1 -1
- package/docs/documents/features_image-options.html +3 -3
- package/docs/documents/features_load-external-model.html +8 -8
- package/docs/documents/features_mode.html +2 -2
- package/docs/documents/features_pano-filter.html +3 -3
- package/docs/documents/features_pano-tile.html +2 -2
- package/docs/documents/features_raycast.html +1 -1
- package/docs/documents/features_screen-project.html +1 -1
- package/docs/documents/features_state.html +1 -1
- package/docs/documents/features_work.html +2 -2
- package/docs/documents/quick-start.html +2 -2
- package/docs/documents/release_notes_6.6.html +2 -2
- package/docs/documents/release_notes_6.7.html +1 -1
- package/docs/documents/release_notes_6.8.html +1 -1
- package/docs/index.html +2 -2
- package/five/index.js +3 -3
- package/five/index.mjs +3 -3
- package/llms.txt +1 -1
- package/package.json +1 -1
- package/plugins/BasePlugin/index.d.ts +1 -1
- package/plugins/GaussianSplattingEntranceAnimationPlugin/Controller.d.ts +1 -1
- package/plugins/GaussianSplattingEntranceAnimationPlugin/index.d.ts +1 -1
- package/plugins/index.js +3 -3
- package/plugins/index.mjs +3 -3
- package/react/context.d.ts +1 -1
- package/react/createProvider.d.ts +1 -1
- package/react/fiveApp.d.ts +1 -1
- package/react/hooks/unsafe__useFiveInstance.d.ts +1 -1
- package/react/hooks/useFiveAction.d.ts +1 -1
- package/react/hooks/useFiveCurrentObserver.d.ts +1 -1
- package/react/hooks/useFiveCurrentState.d.ts +1 -1
- package/react/hooks/useFiveEventCallback.d.ts +1 -1
- package/react/hooks/useFiveModelEffect.d.ts +1 -1
- package/react/hooks/useFiveModelIntersectRaycaster.d.ts +1 -1
- package/react/hooks/useFivePlugin.d.ts +1 -1
- package/react/hooks/useFiveSceneEffect.d.ts +1 -1
- package/react/hooks/useFiveState.d.ts +1 -1
- package/react/hooks/useFiveWork.d.ts +1 -1
- package/react/index.js +3 -3
- package/react/index.mjs +3 -3
- package/react/withFive.d.ts +1 -1
- package/umd/five-plugins.js +3 -3
- package/umd/five-react.js +3 -3
- package/umd/five.js +3 -3
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
<h3 id="初始化配置示例-initialization-configuration-example" class="tsd-anchor-link">初始化配置示例 (Initialization Configuration Example)<a href="#初始化配置示例-initialization-configuration-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>
|
|
84
84
|
<p>在 <code>new Five()</code> 时配置各个模式的默认参数：</p>
|
|
85
|
-
<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">PanoCircleMeshSolid</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">'@realsee/five'</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-8">// 全景模式配置</span><br/><span class="hl-1"> </span><span class="hl-6">panorama:</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">minFov:</span><span class="hl-1"> </span><span class="hl-11">40</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">maxFov:</span><span class="hl-1"> </span><span class="hl-11">100</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">moveSpeed:</span><span class="hl-1"> </span><span class="hl-11">5.0</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">panoCircleMeshCreator</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">observer</span><span class="hl-1">, </span><span class="hl-6">options</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 这里的 options 包含了 aerialObserverMinHeight 等信息</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PanoCircleMeshSolid</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-11">0x3366ff</span><span class="hl-1">, </span><span class="hl-8">// 自定义颜色</span><br/><span class="hl-1"> </span><span class="hl-6">scale:</span><span class="hl-1"> </span><span class="hl-11">1.2</span><span class="hl-1"> </span><span class="hl-8">// 自定义大小</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><span class="hl-8">// 模型地图配置</span><br/><span class="hl-1"> </span><span class="hl-6">mapview:</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">defaultLatitude:</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">3</span><span class="hl-1">, </span><span class="hl-8">// 60度俯视</span><br/><span class="hl-1"> </span><span class="hl-6">defaultDistance:</span><span class="hl-1"> </span><span class="hl-11">200</span><span class="hl-1">, </span><span class="hl-8">// 相机距离</span><br/><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">model:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">moveSpeed:</span><span class="hl-1"> </span><span class="hl-11">10.0</span><span class="hl-1"> </span><span class="hl-8">// 模型模式下移动更快</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
85
|
+
<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">PanoCircleMeshSolid</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">'@realsee/five-webgpu'</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-8">// 全景模式配置</span><br/><span class="hl-1"> </span><span class="hl-6">panorama:</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">minFov:</span><span class="hl-1"> </span><span class="hl-11">40</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">maxFov:</span><span class="hl-1"> </span><span class="hl-11">100</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">moveSpeed:</span><span class="hl-1"> </span><span class="hl-11">5.0</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">panoCircleMeshCreator</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">observer</span><span class="hl-1">, </span><span class="hl-6">options</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 这里的 options 包含了 aerialObserverMinHeight 等信息</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PanoCircleMeshSolid</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-11">0x3366ff</span><span class="hl-1">, </span><span class="hl-8">// 自定义颜色</span><br/><span class="hl-1"> </span><span class="hl-6">scale:</span><span class="hl-1"> </span><span class="hl-11">1.2</span><span class="hl-1"> </span><span class="hl-8">// 自定义大小</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><span class="hl-8">// 模型地图配置</span><br/><span class="hl-1"> </span><span class="hl-6">mapview:</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">defaultLatitude:</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">3</span><span class="hl-1">, </span><span class="hl-8">// 60度俯视</span><br/><span class="hl-1"> </span><span class="hl-6">defaultDistance:</span><span class="hl-1"> </span><span class="hl-11">200</span><span class="hl-1">, </span><span class="hl-8">// 相机距离</span><br/><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">model:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">moveSpeed:</span><span class="hl-1"> </span><span class="hl-11">10.0</span><span class="hl-1"> </span><span class="hl-8">// 模型模式下移动更快</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
86
86
|
</code><button type="button">Copy</button></pre>
|
|
87
87
|
|
|
88
88
|
<h3 id="动态修改配置-update-configuration" class="tsd-anchor-link">动态修改配置 (Update Configuration)<a href="#动态修改配置-update-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></h3>
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
|
|
93
93
|
<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>
|
|
94
94
|
<p>使用 <code>changeMode</code> 精准控制切换过程，并监听完成时机：</p>
|
|
95
|
-
<pre><code class="ts"><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">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">'@realsee/five'</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/><br/><span class="hl-8">// 定义一个切换模式的函数</span><br/><span class="hl-3">async</span><span class="hl-1"> </span><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">switchMode</span><span class="hl-1">(</span><span class="hl-6">targetMode</span><span class="hl-1">: </span><span class="hl-7">Mode</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">try</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// changeMode 返回 Promise，resolve 时表示切换动画结束</span><br/><span class="hl-1"> </span><span class="hl-10">await</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">changeMode</span><span class="hl-1">(</span><span class="hl-6">targetMode</span><span class="hl-1">, </span><span class="hl-3">undefined</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1000</span><span class="hl-1"> </span><span class="hl-8">// 动画时长 1000ms</span><br/><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">`成功切换到 </span><span class="hl-3">${</span><span class="hl-6">targetMode</span><span class="hl-3">}</span><span class="hl-9"> 模式`</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-10">catch</span><span class="hl-1"> (</span><span class="hl-6">error</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">error</span><span class="hl-1">(</span><span class="hl-9">`切换到 </span><span class="hl-3">${</span><span class="hl-6">targetMode</span><span class="hl-3">}</span><span class="hl-9"> 失败`</span><span class="hl-1">, </span><span class="hl-6">error</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">document</span><span class="hl-1">.</span><span class="hl-5">querySelector</span><span class="hl-1">(</span><span class="hl-9">'#btn-map'</span><span class="hl-1">).</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">'click'</span><span class="hl-1">, () </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">switchMode</span><span class="hl-1">(</span><span class="hl-9">'Mapview'</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
95
|
+
<pre><code class="ts"><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">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">'@realsee/five-webgpu'</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/><br/><span class="hl-8">// 定义一个切换模式的函数</span><br/><span class="hl-3">async</span><span class="hl-1"> </span><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">switchMode</span><span class="hl-1">(</span><span class="hl-6">targetMode</span><span class="hl-1">: </span><span class="hl-7">Mode</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">try</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// changeMode 返回 Promise，resolve 时表示切换动画结束</span><br/><span class="hl-1"> </span><span class="hl-10">await</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">changeMode</span><span class="hl-1">(</span><span class="hl-6">targetMode</span><span class="hl-1">, </span><span class="hl-3">undefined</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1000</span><span class="hl-1"> </span><span class="hl-8">// 动画时长 1000ms</span><br/><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">`成功切换到 </span><span class="hl-3">${</span><span class="hl-6">targetMode</span><span class="hl-3">}</span><span class="hl-9"> 模式`</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-10">catch</span><span class="hl-1"> (</span><span class="hl-6">error</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">error</span><span class="hl-1">(</span><span class="hl-9">`切换到 </span><span class="hl-3">${</span><span class="hl-6">targetMode</span><span class="hl-3">}</span><span class="hl-9"> 失败`</span><span class="hl-1">, </span><span class="hl-6">error</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">document</span><span class="hl-1">.</span><span class="hl-5">querySelector</span><span class="hl-1">(</span><span class="hl-9">'#btn-map'</span><span class="hl-1">).</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">'click'</span><span class="hl-1">, () </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">switchMode</span><span class="hl-1">(</span><span class="hl-9">'Mapview'</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
96
96
|
</code><button type="button">Copy</button></pre>
|
|
97
97
|
|
|
98
98
|
<h2 id="common-pitfalls" class="tsd-anchor-link">Common Pitfalls<a href="#common-pitfalls" 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>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<p><strong>Definition</strong>: <a href="../../five/model/materials/pbmMaterial.d.ts">PBMPanoFilter</a></p>
|
|
12
12
|
</blockquote>
|
|
13
13
|
<p><code>PBMPanoFilter</code> 类定义了全景图的滤镜参数。所有属性均为对象引用，直接修改其内部属性即可生效。</p>
|
|
14
|
-
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">PBMUpdateable</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five"</span><span class="hl-1">;</span><br/><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">PBMPanoFilter</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">PBMUpdateable</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-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">contrast</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 对比度偏移 [-1, 1] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">contrastBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 饱和度控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">saturation</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 饱和度偏移 [-1, 1] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">saturationBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 颜色控制 (色温与色调) */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">color</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 色温偏移 [-100, 100] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">temperatureBias</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">/** 色调偏移 [-100, 100] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">tintBias</span><span class="hl-1">: </span><span class="hl-7">number</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 高光与阴影控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">highlightShadow</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 全局亮度偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">globalBias</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">/** 高光偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">highlightBias</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">/** 阴影偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">shadowBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><span class="hl-1">}</span>
|
|
14
|
+
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">PBMUpdateable</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five-webgpu"</span><span class="hl-1">;</span><br/><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">PBMPanoFilter</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">PBMUpdateable</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-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">contrast</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 对比度偏移 [-1, 1] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">contrastBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 饱和度控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">saturation</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 饱和度偏移 [-1, 1] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">saturationBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 颜色控制 (色温与色调) */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">color</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 色温偏移 [-100, 100] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">temperatureBias</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">/** 色调偏移 [-100, 100] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">tintBias</span><span class="hl-1">: </span><span class="hl-7">number</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 高光与阴影控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">highlightShadow</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 全局亮度偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">globalBias</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">/** 高光偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">highlightBias</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">/** 阴影偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">shadowBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><span class="hl-1">}</span>
|
|
15
15
|
</code><button type="button">Copy</button></pre>
|
|
16
16
|
|
|
17
17
|
<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>
|
|
@@ -99,12 +99,12 @@
|
|
|
99
99
|
<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>
|
|
100
100
|
<h3 id="basic-usage-基础用法" class="tsd-anchor-link">Basic Usage (基础用法)<a href="#basic-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>
|
|
101
101
|
<p>创建一个滤镜实例并应用到 Five 场景中。</p>
|
|
102
|
-
<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">PBMPanoFilter</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five"</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-8">// ... 初始化 five ...</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">panoFilter</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PBMPanoFilter</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 2. 配置参数 (例如：增加一点暖色调和亮度)</span><br/><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">color</span><span class="hl-1">.</span><span class="hl-6">temperatureBias</span><span class="hl-1"> = </span><span class="hl-11">10</span><span class="hl-1">; </span><span class="hl-8">// 暖色</span><br/><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">highlightShadow</span><span class="hl-1">.</span><span class="hl-6">globalBias</span><span class="hl-1"> = </span><span class="hl-11">20</span><span class="hl-1">; </span><span class="hl-8">// 提亮</span><br/><br/><span class="hl-8">// 3. 启用滤镜</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">modelScene</span><span class="hl-1">.</span><span class="hl-6">parameter</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-9">'panoFilter'</span><span class="hl-1">, </span><span class="hl-6">panoFilter</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 4. (可选) 停用滤镜</span><br/><span class="hl-8">// five.modelScene.parameter.reset('panoFilter');</span>
|
|
102
|
+
<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">PBMPanoFilter</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five-webgpu"</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-8">// ... 初始化 five ...</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">panoFilter</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PBMPanoFilter</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 2. 配置参数 (例如：增加一点暖色调和亮度)</span><br/><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">color</span><span class="hl-1">.</span><span class="hl-6">temperatureBias</span><span class="hl-1"> = </span><span class="hl-11">10</span><span class="hl-1">; </span><span class="hl-8">// 暖色</span><br/><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">highlightShadow</span><span class="hl-1">.</span><span class="hl-6">globalBias</span><span class="hl-1"> = </span><span class="hl-11">20</span><span class="hl-1">; </span><span class="hl-8">// 提亮</span><br/><br/><span class="hl-8">// 3. 启用滤镜</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">modelScene</span><span class="hl-1">.</span><span class="hl-6">parameter</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-9">'panoFilter'</span><span class="hl-1">, </span><span class="hl-6">panoFilter</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 4. (可选) 停用滤镜</span><br/><span class="hl-8">// five.modelScene.parameter.reset('panoFilter');</span>
|
|
103
103
|
</code><button type="button">Copy</button></pre>
|
|
104
104
|
|
|
105
105
|
<h3 id="interactive-adjustment-动态调整" class="tsd-anchor-link">Interactive Adjustment (动态调整)<a href="#interactive-adjustment-动态调整" 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>
|
|
106
106
|
<p>滤镜参数支持实时修改，适合制作调节面板。</p>
|
|
107
|
-
<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">PBMPanoFilter</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five"</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 假设已经有 five 实例</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">panoFilter</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PBMPanoFilter</span><span class="hl-1">();</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">modelScene</span><span class="hl-1">.</span><span class="hl-6">parameter</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-9">'panoFilter'</span><span class="hl-1">, </span><span class="hl-6">panoFilter</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 模拟 UI 绑定的数据对象</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">filterSettings</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">brightness:</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">contrast:</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-8">// 监听 UI 变化 (示例伪代码)</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onBrightnessChange</span><span class="hl-1">(</span><span class="hl-6">value</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">// value range: [-255, 255]</span><br/><span class="hl-1"> </span><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">highlightShadow</span><span class="hl-1">.</span><span class="hl-6">globalBias</span><span class="hl-1"> = </span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 five 没有开启自动渲染 (play: false)，需要手动触发重绘</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onContrastChange</span><span class="hl-1">(</span><span class="hl-6">value</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">// value range: [-1, 1]</span><br/><span class="hl-1"> </span><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">contrast</span><span class="hl-1">.</span><span class="hl-6">contrastBias</span><span class="hl-1"> = </span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
107
|
+
<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">PBMPanoFilter</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five-webgpu"</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 假设已经有 five 实例</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">panoFilter</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PBMPanoFilter</span><span class="hl-1">();</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">modelScene</span><span class="hl-1">.</span><span class="hl-6">parameter</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-9">'panoFilter'</span><span class="hl-1">, </span><span class="hl-6">panoFilter</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 模拟 UI 绑定的数据对象</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">filterSettings</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">brightness:</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">contrast:</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-8">// 监听 UI 变化 (示例伪代码)</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onBrightnessChange</span><span class="hl-1">(</span><span class="hl-6">value</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">// value range: [-255, 255]</span><br/><span class="hl-1"> </span><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">highlightShadow</span><span class="hl-1">.</span><span class="hl-6">globalBias</span><span class="hl-1"> = </span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 five 没有开启自动渲染 (play: false)，需要手动触发重绘</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onContrastChange</span><span class="hl-1">(</span><span class="hl-6">value</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">// value range: [-1, 1]</span><br/><span class="hl-1"> </span><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">contrast</span><span class="hl-1">.</span><span class="hl-6">contrastBias</span><span class="hl-1"> = </span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
108
108
|
</code><button type="button">Copy</button></pre>
|
|
109
109
|
|
|
110
110
|
<h2 id="related" class="tsd-anchor-link">Related<a href="#related" 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>
|
|
@@ -81,11 +81,11 @@
|
|
|
81
81
|
</table>
|
|
82
82
|
<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>
|
|
83
83
|
<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>
|
|
84
|
-
<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">"@realsee/five"</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-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">"loaded"</span><span class="hl-1">, () </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">observer</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">work</span><span class="hl-1">.</span><span class="hl-6">observers</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-10">if</span><span class="hl-1"> (</span><span class="hl-6">observer</span><span class="hl-1"> && </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1"> && </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</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">"Available Tiles:"</span><span class="hl-1">, </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">.</span><span class="hl-5">forEach</span><span class="hl-1">(</span><span class="hl-6">tile</span><span class="hl-1"> </span><span class="hl-3">=></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">`Level: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">level</span><span class="hl-3">}</span><span class="hl-9">, Size: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">size</span><span class="hl-3">}</span><span class="hl-9">, Scale: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">scale</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
84
|
+
<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">"@realsee/five-webgpu"</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-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">"loaded"</span><span class="hl-1">, () </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">observer</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">work</span><span class="hl-1">.</span><span class="hl-6">observers</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-10">if</span><span class="hl-1"> (</span><span class="hl-6">observer</span><span class="hl-1"> && </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1"> && </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</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">"Available Tiles:"</span><span class="hl-1">, </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">.</span><span class="hl-5">forEach</span><span class="hl-1">(</span><span class="hl-6">tile</span><span class="hl-1"> </span><span class="hl-3">=></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">`Level: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">level</span><span class="hl-3">}</span><span class="hl-9">, Size: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">size</span><span class="hl-3">}</span><span class="hl-9">, Scale: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">scale</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
85
85
|
</code><button type="button">Copy</button></pre>
|
|
86
86
|
|
|
87
87
|
<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>
|
|
88
|
-
<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">"@realsee/five"</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-8">// 自定义瓦片层级选择策略</span><br/><span class="hl-1"> </span><span class="hl-5">tileLevelForFov</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">fov</span><span class="hl-1">, </span><span class="hl-6">viewSize</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 简单示例：FOV 小于 60 度时强制使用 Level 2，否则使用 Level 1</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">fov</span><span class="hl-1"> < </span><span class="hl-11">60</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-11">2</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><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">tileMaxRequest:</span><span class="hl-1"> </span><span class="hl-11">6</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">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 强制请求 WebP 格式的图片</span><br/><span class="hl-1"> </span><span class="hl-6">format:</span><span class="hl-1"> </span><span class="hl-9">"webp"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 图片质量设置为 80%</span><br/><span class="hl-1"> </span><span class="hl-6">quality:</span><span class="hl-1"> </span><span class="hl-11">80</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// (可选) 自定义 URL 转换逻辑</span><br/><span class="hl-1"> </span><span class="hl-8">// transform: (url, options) => {</span><br/><span class="hl-1"> </span><span class="hl-8">// return url + `?x-oss-process=image/format,webp/quality,q_80`;</span><br/><span class="hl-1"> </span><span class="hl-8">// }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
88
|
+
<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">"@realsee/five-webgpu"</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-8">// 自定义瓦片层级选择策略</span><br/><span class="hl-1"> </span><span class="hl-5">tileLevelForFov</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">fov</span><span class="hl-1">, </span><span class="hl-6">viewSize</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 简单示例：FOV 小于 60 度时强制使用 Level 2，否则使用 Level 1</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">fov</span><span class="hl-1"> < </span><span class="hl-11">60</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-11">2</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><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">tileMaxRequest:</span><span class="hl-1"> </span><span class="hl-11">6</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">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 强制请求 WebP 格式的图片</span><br/><span class="hl-1"> </span><span class="hl-6">format:</span><span class="hl-1"> </span><span class="hl-9">"webp"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 图片质量设置为 80%</span><br/><span class="hl-1"> </span><span class="hl-6">quality:</span><span class="hl-1"> </span><span class="hl-11">80</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// (可选) 自定义 URL 转换逻辑</span><br/><span class="hl-1"> </span><span class="hl-8">// transform: (url, options) => {</span><br/><span class="hl-1"> </span><span class="hl-8">// return url + `?x-oss-process=image/format,webp/quality,q_80`;</span><br/><span class="hl-1"> </span><span class="hl-8">// }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
89
89
|
</code><button type="button">Copy</button></pre>
|
|
90
90
|
|
|
91
91
|
<h2 id="related" class="tsd-anchor-link">Related<a href="#related" 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>
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
<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>
|
|
63
63
|
<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>
|
|
64
64
|
<p>最常见的场景是将鼠标点击的屏幕坐标转换为 3D 空间中的点。</p>
|
|
65
|
-
<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">'three'</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">'@realsee/five'</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-8">// ... 初始化 ...</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">raycaster</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">Raycaster</span><span class="hl-1">();</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">vector</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">Vector2</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 假设 onTap 是点击事件处理函数</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onTap</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">: { </span><span class="hl-6">x</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-6">y</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">// 1. 将屏幕坐标转换为归一化设备坐标 (NDC)</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意：five.getElement() 获取 canvas 容器</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">element</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getElement</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">element</span><span class="hl-1">) </span><span class="hl-10">return</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rect</span><span class="hl-1"> = </span><span class="hl-6">element</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> = ((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> - </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> = -((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 2. 设置射线</span><br/><span class="hl-1"> </span><span class="hl-6">raycaster</span><span class="hl-1">.</span><span class="hl-5">setFromCamera</span><span class="hl-1">(</span><span class="hl-6">vector</span><span class="hl-1">, </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 3. 调用 Five 的检测方法</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">intersects</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-5">intersectRaycaster</span><span class="hl-1">(</span><span class="hl-6">raycaster</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">intersects</span><span class="hl-1">.</span><span class="hl-6">length</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-3">const</span><span class="hl-1"> </span><span class="hl-4">firstHit</span><span class="hl-1"> = </span><span class="hl-6">intersects</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">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">'点击到了模型:'</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">object</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">'交点坐标 (世界坐标):'</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">point</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
|
|
65
|
+
<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">'three'</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">'@realsee/five-webgpu'</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-8">// ... 初始化 ...</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">raycaster</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">Raycaster</span><span class="hl-1">();</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">vector</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">Vector2</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 假设 onTap 是点击事件处理函数</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onTap</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">: { </span><span class="hl-6">x</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-6">y</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">// 1. 将屏幕坐标转换为归一化设备坐标 (NDC)</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意：five.getElement() 获取 canvas 容器</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">element</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getElement</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">element</span><span class="hl-1">) </span><span class="hl-10">return</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rect</span><span class="hl-1"> = </span><span class="hl-6">element</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> = ((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> - </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> = -((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 2. 设置射线</span><br/><span class="hl-1"> </span><span class="hl-6">raycaster</span><span class="hl-1">.</span><span class="hl-5">setFromCamera</span><span class="hl-1">(</span><span class="hl-6">vector</span><span class="hl-1">, </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 3. 调用 Five 的检测方法</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">intersects</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-5">intersectRaycaster</span><span class="hl-1">(</span><span class="hl-6">raycaster</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">intersects</span><span class="hl-1">.</span><span class="hl-6">length</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-3">const</span><span class="hl-1"> </span><span class="hl-4">firstHit</span><span class="hl-1"> = </span><span class="hl-6">intersects</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">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">'点击到了模型:'</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">object</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">'交点坐标 (世界坐标):'</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">point</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
|
|
66
66
|
</code><button type="button">Copy</button></pre>
|
|
67
67
|
|
|
68
68
|
<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>
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
<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>
|
|
58
58
|
<h3 id="1-空间标签-3d-point-to-dom-label" class="tsd-anchor-link">1. 空间标签 (3D Point to DOM Label)<a href="#1-空间标签-3d-point-to-dom-label" 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>
|
|
59
59
|
<p>最典型的应用场景是在 3D 场景中的某个物体上方显示一个 HTML 标签。</p>
|
|
60
|
-
<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">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five"</span><span class="hl-1">;</span><br/><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">"three/webgpu"</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-8">// ... 初始化 five ...</span><br/><br/><span class="hl-8">// 1. 创建标签 DOM 元素</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">label</span><span class="hl-1"> = </span><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">createElement</span><span class="hl-1">(</span><span class="hl-9">"div"</span><span class="hl-1">);</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">textContent</span><span class="hl-1"> = </span><span class="hl-9">"Living Room"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">position</span><span class="hl-1"> = </span><span class="hl-9">"absolute"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">padding</span><span class="hl-1"> = </span><span class="hl-9">"4px 8px"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">background</span><span class="hl-1"> = </span><span class="hl-9">"rgba(0, 0, 0, 0.6)"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">color</span><span class="hl-1"> = </span><span class="hl-9">"white"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">borderRadius</span><span class="hl-1"> = </span><span class="hl-9">"4px"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">pointerEvents</span><span class="hl-1"> = </span><span class="hl-9">"none"</span><span class="hl-1">; </span><span class="hl-8">// 避免阻挡鼠标事件</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">transform</span><span class="hl-1"> = </span><span class="hl-9">"translate(-50%, -100%)"</span><span class="hl-1">; </span><span class="hl-8">// 居中并显示在点上方</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">"none"</span><span class="hl-1">; </span><span class="hl-8">// 默认隐藏</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">label</span><span class="hl-1">); </span><span class="hl-8">// 添加到 container (注意 container 的定位 context)</span><br/><br/><span class="hl-8">// 2. 定义目标空间坐标 (例如客厅中心)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">targetPosition</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">Vector3</span><span class="hl-1">(</span><span class="hl-11">1.5</span><span class="hl-1">, </span><span class="hl-11">2.0</span><span class="hl-1">, -</span><span class="hl-11">3.0</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 3. 在每一帧渲染时更新标签位置</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">"render.prepare"</span><span class="hl-1">, () </span><span class="hl-3">=></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-8">// 参数2: false 表示不检测遮挡 (性能更好)；true 表示如果被墙挡住则隐藏</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">screenPos</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">project2d</span><span class="hl-1">(</span><span class="hl-6">targetPosition</span><span class="hl-1">, </span><span class="hl-3">true</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">screenPos</span><span class="hl-1"> === </span><span class="hl-3">null</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果返回 null，说明点在相机背面，或者被遮挡（如果开启了 testModel）</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">"none"</span><span class="hl-1">;</span><br/><span class="hl-1"> } </span><span class="hl-10">else</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">"block"</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 更新 DOM 位置</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意：screenPos 是相对于 Canvas 的坐标。</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 Canvas 占满全屏，直接使用即可。</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 Canvas 有偏移，需加上 Canvas 的 offset。</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">screenPos</span><span class="hl-12">.</span><span class="hl-6">x</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">screenPos</span><span class="hl-12">.</span><span class="hl-6">y</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
60
|
+
<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">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five-webgpu"</span><span class="hl-1">;</span><br/><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">"three/webgpu"</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-8">// ... 初始化 five ...</span><br/><br/><span class="hl-8">// 1. 创建标签 DOM 元素</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">label</span><span class="hl-1"> = </span><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">createElement</span><span class="hl-1">(</span><span class="hl-9">"div"</span><span class="hl-1">);</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">textContent</span><span class="hl-1"> = </span><span class="hl-9">"Living Room"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">position</span><span class="hl-1"> = </span><span class="hl-9">"absolute"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">padding</span><span class="hl-1"> = </span><span class="hl-9">"4px 8px"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">background</span><span class="hl-1"> = </span><span class="hl-9">"rgba(0, 0, 0, 0.6)"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">color</span><span class="hl-1"> = </span><span class="hl-9">"white"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">borderRadius</span><span class="hl-1"> = </span><span class="hl-9">"4px"</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">pointerEvents</span><span class="hl-1"> = </span><span class="hl-9">"none"</span><span class="hl-1">; </span><span class="hl-8">// 避免阻挡鼠标事件</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">transform</span><span class="hl-1"> = </span><span class="hl-9">"translate(-50%, -100%)"</span><span class="hl-1">; </span><span class="hl-8">// 居中并显示在点上方</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">"none"</span><span class="hl-1">; </span><span class="hl-8">// 默认隐藏</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">label</span><span class="hl-1">); </span><span class="hl-8">// 添加到 container (注意 container 的定位 context)</span><br/><br/><span class="hl-8">// 2. 定义目标空间坐标 (例如客厅中心)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">targetPosition</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">Vector3</span><span class="hl-1">(</span><span class="hl-11">1.5</span><span class="hl-1">, </span><span class="hl-11">2.0</span><span class="hl-1">, -</span><span class="hl-11">3.0</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 3. 在每一帧渲染时更新标签位置</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">"render.prepare"</span><span class="hl-1">, () </span><span class="hl-3">=></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-8">// 参数2: false 表示不检测遮挡 (性能更好)；true 表示如果被墙挡住则隐藏</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">screenPos</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">project2d</span><span class="hl-1">(</span><span class="hl-6">targetPosition</span><span class="hl-1">, </span><span class="hl-3">true</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">screenPos</span><span class="hl-1"> === </span><span class="hl-3">null</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果返回 null，说明点在相机背面，或者被遮挡（如果开启了 testModel）</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">"none"</span><span class="hl-1">;</span><br/><span class="hl-1"> } </span><span class="hl-10">else</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">"block"</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 更新 DOM 位置</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意：screenPos 是相对于 Canvas 的坐标。</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 Canvas 占满全屏，直接使用即可。</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 Canvas 有偏移，需加上 Canvas 的 offset。</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">screenPos</span><span class="hl-12">.</span><span class="hl-6">x</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">screenPos</span><span class="hl-12">.</span><span class="hl-6">y</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
61
61
|
</code><button type="button">Copy</button></pre>
|
|
62
62
|
|
|
63
63
|
<h3 id="2-屏幕点击转射线-screen-to-ray" class="tsd-anchor-link">2. 屏幕点击转射线 (Screen to Ray)<a href="#2-屏幕点击转射线-screen-to-ray" 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>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<p><strong>Definition</strong>: <a href="../../five/types/state.d.ts">State</a></p>
|
|
11
11
|
</blockquote>
|
|
12
12
|
<p><strong>State</strong> 类型定义如下（继承自 <code>Pose</code>）：</p>
|
|
13
|
-
<pre><code class="ts"><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">"three/webgpu"</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five"</span><span class="hl-1">;</span><br/><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">Pose</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">longitude</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-6">latitude</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-6">fov</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-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><br/><span class="hl-1"> </span><span class="hl-8">/** 相机距离目标中心点的距离 */</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><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">State</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">Pose</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">mode</span><span class="hl-1">: </span><span class="hl-7">Mode</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 当前点位的唯一标识 (workCode) */</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><br/><span class="hl-1"> </span><span class="hl-8">/** 当前点位在列表中的索引 */</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><br/><span class="hl-1">}</span>
|
|
13
|
+
<pre><code class="ts"><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">"three/webgpu"</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">"@realsee/five-webgpu"</span><span class="hl-1">;</span><br/><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">Pose</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">longitude</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-6">latitude</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-6">fov</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-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><br/><span class="hl-1"> </span><span class="hl-8">/** 相机距离目标中心点的距离 */</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><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">State</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">Pose</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">mode</span><span class="hl-1">: </span><span class="hl-7">Mode</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 当前点位的唯一标识 (workCode) */</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><br/><span class="hl-1"> </span><span class="hl-8">/** 当前点位在列表中的索引 */</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><br/><span class="hl-1">}</span>
|
|
14
14
|
</code><button type="button">Copy</button></pre>
|
|
15
15
|
|
|
16
16
|
<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>
|