@realsee/five-webgpu 1.0.0-alpha.1 → 1.0.0-alpha.3
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 +9 -9
- 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/assets/hierarchy.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/classes/index.AdaptiveLuminancePass.html +1 -1
- package/docs/classes/index.EyeDomeLightingPass.html +1 -1
- package/docs/classes/index.FivePass.html +1 -1
- package/docs/classes/index.FlowingFireworks3DPass.html +1 -1
- package/docs/classes/index.FlowingLight2DPass.html +1 -1
- package/docs/classes/index.FlowingLight3DPass.html +1 -1
- package/docs/classes/index.GaussianBlurPass.html +1 -1
- package/docs/classes/index.Model.html +1 -1
- package/docs/classes/index.ModelScene.html +1 -1
- package/docs/classes/index.PBMGaussianSplattingNodeMaterial.html +7 -6
- package/docs/classes/index.PBMGaussianSplattingObject.html +12 -4
- package/docs/classes/index.PBMGaussianSplattingRenderMesh.html +31 -12
- package/docs/classes/index.PBMMeshBasicMaterial.html +1 -1
- package/docs/classes/index.PBMMeshBasicNodeMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPanoOnlyMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPanoOnlyNodeMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPhongMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPhongNodeMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPhysicalMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPhysicalNodeMaterial.html +1 -1
- package/docs/classes/index.PBMPanoFilter.html +1 -1
- package/docs/classes/index.PBMPointCloud.html +1 -1
- package/docs/classes/index.PBMUpdateable.html +1 -1
- package/docs/classes/index.Parameter.html +1 -1
- package/docs/classes/index.Tile3D.html +1 -1
- package/docs/classes/index.TileNode.html +1 -1
- package/docs/classes/index.TrajectoryNode.html +1 -1
- package/docs/classes/index.WorkResolvedObserver.html +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/hierarchy.html +1 -1
- package/docs/index.html +2 -2
- package/docs/interfaces/index.IPBMMaterial.html +1 -1
- package/docs/interfaces/index.LooseWorkWithExtrinsics.html +1 -1
- package/docs/interfaces/index.PBMHDRConfig.html +1 -1
- package/docs/interfaces/index.ParameterMaterialValue.html +1 -1
- package/docs/interfaces/index.ParameterTilesetValue.html +1 -1
- package/docs/interfaces/index.ParameterValue.html +1 -1
- package/docs/interfaces/index.ResolvedParameterValue.html +1 -1
- package/docs/interfaces/index.SplatData.html +10 -5
- package/docs/interfaces/index.ViewLayer.html +1 -1
- package/docs/interfaces/index.WorkCubeImage.html +1 -1
- package/docs/interfaces/index.WorkImage.html +1 -1
- package/docs/interfaces/index.WorkObserver.html +1 -1
- package/docs/interfaces/index.WorkTile.html +1 -1
- package/docs/types/index.ParseOptions.html +1 -1
- package/five/gaussian-splatting/layerRegistry.d.ts +17 -0
- package/five/gaussian-splatting/shStore.d.ts +22 -0
- package/five/gaussian-splatting/splatAssembler.d.ts +69 -0
- package/five/gaussian-splatting/transformStore.d.ts +37 -0
- package/five/gaussian-splatting/wasm/sort.d.ts +4 -3
- package/five/index.js +86 -103
- package/five/index.mjs +3923 -3856
- package/five/model/loaders/spz.d.ts +50 -2
- package/five/model/materials/pbmGaussianSplattingNodeMaterial.d.ts +8 -5
- package/five/model/objects/pbmGaussianSplattingObject.d.ts +21 -4
- package/five/model/objects/pbmGaussianSplattingRenderMesh.d.ts +142 -43
- 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 +117 -134
- package/five/gaussian-splatting/util/renderData.d.ts +0 -66
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
<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>
|
|
50
50
|
<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>
|
|
51
51
|
<p>创建一个不可见的 Box，将其位置和大小作为裁切区域。</p>
|
|
52
|
-
<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-8">// 1. 创建一个辅助 Mesh 来定义裁切区域</span><br/><span class="hl-8">// 注意：必须使用 1x1x1 的 BoxGeometry，因为 Shader 是基于单位立方体判断的</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">clipperMesh</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">Mesh</span><span class="hl-1">(</span><br/><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">BoxGeometry</span><span class="hl-1">(</span><span class="hl-11">1</span><span class="hl-1">, </span><span class="hl-11">1</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-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">MeshBasicMaterial</span><span class="hl-1">({ </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-11">0xff0000</span><span class="hl-1">, </span><span class="hl-6">wireframe:</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-8">// 2. 设置裁切盒的位置、旋转和缩放</span><br/><span class="hl-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-6">position</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">1.5</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-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-6">scale</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-11">3</span><span class="hl-1">, </span><span class="hl-11">2</span><span class="hl-1">); </span><span class="hl-8">// 设定大小为 2x3x2</span><br/><span class="hl-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-6">rotation</span><span class="hl-1">.</span><span class="hl-6">y</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-8">// 旋转 45 度</span><br/><br/><span class="hl-8">// 更新矩阵，确保 .matrix 属性是最新的</span><br/><span class="hl-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-5">updateMatrix</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// (可选) 将辅助 Mesh 加入场景以便调试看到范围</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">scene</span><span class="hl-1">.</span><span class="hl-5">add</span><span class="hl-1">(</span><span class="hl-6">clipperMesh</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-6">model</span><span class="hl-1">.</span><span class="hl-6">clippers</span><span class="hl-1"> = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">clippingBoxMatrix:</span><span class="hl-1"> </span><span class="hl-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-6">matrix</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// floorIndex: 0 // 可选：仅裁切第 0 层</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-8">// 4. 触发重绘</span><br/><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>
|
|
52
|
+
<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-8">// 1. 创建一个辅助 Mesh 来定义裁切区域</span><br/><span class="hl-8">// 注意：必须使用 1x1x1 的 BoxGeometry，因为 Shader 是基于单位立方体判断的</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">clipperMesh</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">Mesh</span><span class="hl-1">(</span><br/><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">BoxGeometry</span><span class="hl-1">(</span><span class="hl-11">1</span><span class="hl-1">, </span><span class="hl-11">1</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-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">MeshBasicMaterial</span><span class="hl-1">({ </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-11">0xff0000</span><span class="hl-1">, </span><span class="hl-6">wireframe:</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-8">// 2. 设置裁切盒的位置、旋转和缩放</span><br/><span class="hl-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-6">position</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">1.5</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-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-6">scale</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-11">3</span><span class="hl-1">, </span><span class="hl-11">2</span><span class="hl-1">); </span><span class="hl-8">// 设定大小为 2x3x2</span><br/><span class="hl-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-6">rotation</span><span class="hl-1">.</span><span class="hl-6">y</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-8">// 旋转 45 度</span><br/><br/><span class="hl-8">// 更新矩阵，确保 .matrix 属性是最新的</span><br/><span class="hl-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-5">updateMatrix</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// (可选) 将辅助 Mesh 加入场景以便调试看到范围</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">scene</span><span class="hl-1">.</span><span class="hl-5">add</span><span class="hl-1">(</span><span class="hl-6">clipperMesh</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-6">model</span><span class="hl-1">.</span><span class="hl-6">clippers</span><span class="hl-1"> = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">clippingBoxMatrix:</span><span class="hl-1"> </span><span class="hl-6">clipperMesh</span><span class="hl-1">.</span><span class="hl-6">matrix</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// floorIndex: 0 // 可选：仅裁切第 0 层</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-8">// 4. 触发重绘</span><br/><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>
|
|
53
53
|
</code><button type="button">Copy</button></pre>
|
|
54
54
|
|
|
55
55
|
<h3 id="动态更新-dynamic-update" class="tsd-anchor-link">动态更新 (Dynamic Update)<a href="#动态更新-dynamic-update" 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>
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
<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>
|
|
114
114
|
<h3 id="坐标转换-coordinate-transformation" class="tsd-anchor-link">坐标转换 (Coordinate Transformation)<a href="#坐标转换-coordinate-transformation" 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>
|
|
115
115
|
<p>推荐在与后端或算法交互时，将 Local 坐标转换为 ENU 坐标。</p>
|
|
116
|
-
<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">ViewLayer</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">// 假设已加载 ViewLayer</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">viewLayer</span><span class="hl-1">: </span><span class="hl-7">ViewLayer</span><span class="hl-1"> = ...;</span><br/><br/><span class="hl-8">// 1. 获取场景中某点的坐标 (Local Y-up)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">localPosition</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">10</span><span class="hl-1">, </span><span class="hl-11">20</span><span class="hl-1">, </span><span class="hl-11">30</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 2. 转换为 ENU 坐标 (Z-up) 用于传输给后端/算法</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">enuPosition</span><span class="hl-1"> = </span><span class="hl-6">viewLayer</span><span class="hl-1">.</span><span class="hl-5">localToEnu</span><span class="hl-1">(</span><span class="hl-6">localPosition</span><span class="hl-1">.</span><span class="hl-5">clone</span><span class="hl-1">());</span><br/><br/><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">`Local: </span><span class="hl-3">${</span><span class="hl-6">localPosition</span><span class="hl-12">.</span><span class="hl-5">toArray</span><span class="hl-12">()</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">); </span><span class="hl-8">// [x, y, z] (y-up)</span><br/><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">`ENU: </span><span class="hl-3">${</span><span class="hl-6">enuPosition</span><span class="hl-12">.</span><span class="hl-5">toArray</span><span class="hl-12">()</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">); </span><span class="hl-8">// [x, y, z] (z-up)</span><br/><br/><span class="hl-8">// 3. 将 ECEF 坐标转换为 Local 坐标用于显示</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ecefPosition</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><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">displayPosition</span><span class="hl-1"> = </span><span class="hl-6">viewLayer</span><span class="hl-1">.</span><span class="hl-5">ecefToLocal</span><span class="hl-1">(</span><span class="hl-6">ecefPosition</span><span class="hl-1">.</span><span class="hl-5">clone</span><span class="hl-1">());</span>
|
|
116
|
+
<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">ViewLayer</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">// 假设已加载 ViewLayer</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">viewLayer</span><span class="hl-1">: </span><span class="hl-7">ViewLayer</span><span class="hl-1"> = ...;</span><br/><br/><span class="hl-8">// 1. 获取场景中某点的坐标 (Local Y-up)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">localPosition</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">10</span><span class="hl-1">, </span><span class="hl-11">20</span><span class="hl-1">, </span><span class="hl-11">30</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 2. 转换为 ENU 坐标 (Z-up) 用于传输给后端/算法</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">enuPosition</span><span class="hl-1"> = </span><span class="hl-6">viewLayer</span><span class="hl-1">.</span><span class="hl-5">localToEnu</span><span class="hl-1">(</span><span class="hl-6">localPosition</span><span class="hl-1">.</span><span class="hl-5">clone</span><span class="hl-1">());</span><br/><br/><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">`Local: </span><span class="hl-3">${</span><span class="hl-6">localPosition</span><span class="hl-12">.</span><span class="hl-5">toArray</span><span class="hl-12">()</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">); </span><span class="hl-8">// [x, y, z] (y-up)</span><br/><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">`ENU: </span><span class="hl-3">${</span><span class="hl-6">enuPosition</span><span class="hl-12">.</span><span class="hl-5">toArray</span><span class="hl-12">()</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">); </span><span class="hl-8">// [x, y, z] (z-up)</span><br/><br/><span class="hl-8">// 3. 将 ECEF 坐标转换为 Local 坐标用于显示</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ecefPosition</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><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">displayPosition</span><span class="hl-1"> = </span><span class="hl-6">viewLayer</span><span class="hl-1">.</span><span class="hl-5">ecefToLocal</span><span class="hl-1">(</span><span class="hl-6">ecefPosition</span><span class="hl-1">.</span><span class="hl-5">clone</span><span class="hl-1">());</span>
|
|
117
117
|
</code><button type="button">Copy</button></pre>
|
|
118
118
|
|
|
119
119
|
<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>
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
<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>
|
|
81
81
|
<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>
|
|
82
82
|
<p>监听点击事件并打印日志。</p>
|
|
83
|
-
<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-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">"gesture.tap"</span><span class="hl-1">, (</span><span class="hl-6">pose</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">"User tapped at:"</span><span class="hl-1">, </span><span class="hl-6">pose</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">"pano.arrived"</span><span class="hl-1">, (</span><span class="hl-6">index</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">"Arrived at pano index:"</span><span class="hl-1">, </span><span class="hl-6">index</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
83
|
+
<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-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">"gesture.tap"</span><span class="hl-1">, (</span><span class="hl-6">pose</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">"User tapped at:"</span><span class="hl-1">, </span><span class="hl-6">pose</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">"pano.arrived"</span><span class="hl-1">, (</span><span class="hl-6">index</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">"Arrived at pano index:"</span><span class="hl-1">, </span><span class="hl-6">index</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
84
84
|
</code><button type="button">Copy</button></pre>
|
|
85
85
|
|
|
86
86
|
<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>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>features/five | 如视 Five SDK</title><meta name="description" content="Documentation for 如视 Five SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">如视 Five SDK</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">features/five</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="five-five-核心类" class="tsd-anchor-link">Five (Five 核心类)<a href="#five-five-核心类" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1>
|
|
2
2
|
<ul>
|
|
3
|
-
<li><strong>Summary</strong>: Five 是 @realsee/five 的核心类，负责 3D 场景的渲染、资源加载、用户交互和状态管理。</li>
|
|
3
|
+
<li><strong>Summary</strong>: Five 是 @realsee/five-webgpu 的核心类，负责 3D 场景的渲染、资源加载、用户交互和状态管理。</li>
|
|
4
4
|
<li><strong>Schema</strong>: FiveInitArgs 初始化参数接口。</li>
|
|
5
5
|
<li><strong>Concepts</strong>: Instance Management, Rendering Loop, Resource Loading, State Sync.</li>
|
|
6
6
|
<li><strong>Configuration</strong>: Five 初始化参数详解。</li>
|
|
@@ -86,12 +86,12 @@
|
|
|
86
86
|
<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>
|
|
87
87
|
<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>
|
|
88
88
|
<p>创建一个全屏的 Five 实例并加载数据。</p>
|
|
89
|
-
<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">"@realsee/five"</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">"app"</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>
|
|
89
|
+
<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">"@realsee/five-webgpu"</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">"app"</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>
|
|
90
90
|
</code><button type="button">Copy</button></pre>
|
|
91
91
|
|
|
92
92
|
<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>
|
|
93
93
|
<p>使用外部渲染器并指定视口区域（例如用于分屏渲染）。</p>
|
|
94
|
-
<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/webgpu"</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">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>
|
|
94
|
+
<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/webgpu"</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">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>
|
|
95
95
|
</code><button type="button">Copy</button></pre>
|
|
96
96
|
|
|
97
97
|
<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>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<p><strong>Definition</strong>: <a href="../../five/utils/event.d.ts">GestureEvent</a></p>
|
|
11
11
|
</blockquote>
|
|
12
12
|
<p>所有手势事件的回调参数均为 <code>GestureEvent</code> 类型：</p>
|
|
13
|
-
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">State</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">interface</span><span class="hl-1"> </span><span class="hl-7">GestureEvent</span><span class="hl-1"> {</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><span class="hl-8">// 事件类型，如 "gesture.tap"</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><span class="hl-8">// 时间戳</span><br/><span class="hl-1"> </span><span class="hl-6">target</span><span class="hl-1">: </span><span class="hl-7">EventTarget</span><span class="hl-1"> | </span><span class="hl-7">null</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">pointerType</span><span class="hl-1">: </span><span class="hl-9">'touch'</span><span class="hl-1"> | </span><span class="hl-9">'pen'</span><span class="hl-1"> | </span><span class="hl-9">'mouse'</span><span class="hl-1"> | </span><span class="hl-9">'kinect'</span><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-6">center</span><span class="hl-1">: {</span><br/><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-8">// 屏幕 X 坐标</span><br/><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><span class="hl-8">// 屏幕 Y 坐标</span><br/><span class="hl-1"> </span><span class="hl-6">raycaster</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Raycaster</span><span class="hl-1">; </span><span class="hl-8">// 从相机发出的射线（已包含坐标变换）</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-6">state</span><span class="hl-1">: </span><span class="hl-7">State</span><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-6">userAction</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 阻止默认行为</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-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>
|
|
13
|
+
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">State</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">interface</span><span class="hl-1"> </span><span class="hl-7">GestureEvent</span><span class="hl-1"> {</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><span class="hl-8">// 事件类型，如 "gesture.tap"</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><span class="hl-8">// 时间戳</span><br/><span class="hl-1"> </span><span class="hl-6">target</span><span class="hl-1">: </span><span class="hl-7">EventTarget</span><span class="hl-1"> | </span><span class="hl-7">null</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">pointerType</span><span class="hl-1">: </span><span class="hl-9">'touch'</span><span class="hl-1"> | </span><span class="hl-9">'pen'</span><span class="hl-1"> | </span><span class="hl-9">'mouse'</span><span class="hl-1"> | </span><span class="hl-9">'kinect'</span><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-6">center</span><span class="hl-1">: {</span><br/><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-8">// 屏幕 X 坐标</span><br/><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><span class="hl-8">// 屏幕 Y 坐标</span><br/><span class="hl-1"> </span><span class="hl-6">raycaster</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Raycaster</span><span class="hl-1">; </span><span class="hl-8">// 从相机发出的射线（已包含坐标变换）</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-6">state</span><span class="hl-1">: </span><span class="hl-7">State</span><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-6">userAction</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 阻止默认行为</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-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>
|
|
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>
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
<h3 id="场景交互：点击添加标签球-add-label-on-click" class="tsd-anchor-link">场景交互：点击添加标签球 (Add Label on Click)<a href="#场景交互：点击添加标签球-add-label-on-click" 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>
|
|
86
86
|
<p>这个示例展示了如何通过点击事件在场景中添加一个红色的球体，并阻止 Five 默认的点位移动行为。</p>
|
|
87
|
-
<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/webgpu"</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/><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">"gesture.tap"</span><span class="hl-1">, (</span><span class="hl-6">event</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">// 1. 阻止默认行为（防止点击地面时 Five 自动走点或切换模式）</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/><br/><span class="hl-1"> </span><span class="hl-8">// 2. 获取射线</span><br/><span class="hl-1"> </span><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-6">event</span><span class="hl-1">.</span><span class="hl-6">center</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-8">// 3. 检测与模型的碰撞</span><br/><span class="hl-1"> </span><span class="hl-8">// five.model.intersectRaycaster 是 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">intersect</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-3">const</span><span class="hl-1"> </span><span class="hl-4">point</span><span class="hl-1"> = </span><span class="hl-6">intersect</span><span class="hl-1">.</span><span class="hl-6">point</span><span class="hl-1">; </span><span class="hl-8">// 碰撞点世界坐标</span><br/><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">point</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 4. 创建一个小球</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">geometry</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">SphereGeometry</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">32</span><span class="hl-1">, </span><span class="hl-11">32</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">material</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">MeshBasicMaterial</span><span class="hl-1">({ </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-11">0xff0000</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">sphere</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">Mesh</span><span class="hl-1">(</span><span class="hl-6">geometry</span><span class="hl-1">, </span><span class="hl-6">material</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 5. 设置位置并添加到场景</span><br/><span class="hl-1"> </span><span class="hl-6">sphere</span><span class="hl-1">.</span><span class="hl-6">position</span><span class="hl-1">.</span><span class="hl-5">copy</span><span class="hl-1">(</span><span class="hl-6">point</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">scene</span><span class="hl-1">.</span><span class="hl-5">add</span><span class="hl-1">(</span><span class="hl-6">sphere</span><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-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><span class="hl-10">else</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><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
87
|
+
<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/webgpu"</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/><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">"gesture.tap"</span><span class="hl-1">, (</span><span class="hl-6">event</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">// 1. 阻止默认行为（防止点击地面时 Five 自动走点或切换模式）</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/><br/><span class="hl-1"> </span><span class="hl-8">// 2. 获取射线</span><br/><span class="hl-1"> </span><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-6">event</span><span class="hl-1">.</span><span class="hl-6">center</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-8">// 3. 检测与模型的碰撞</span><br/><span class="hl-1"> </span><span class="hl-8">// five.model.intersectRaycaster 是 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">intersect</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-3">const</span><span class="hl-1"> </span><span class="hl-4">point</span><span class="hl-1"> = </span><span class="hl-6">intersect</span><span class="hl-1">.</span><span class="hl-6">point</span><span class="hl-1">; </span><span class="hl-8">// 碰撞点世界坐标</span><br/><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">point</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 4. 创建一个小球</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">geometry</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">SphereGeometry</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">32</span><span class="hl-1">, </span><span class="hl-11">32</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">material</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">MeshBasicMaterial</span><span class="hl-1">({ </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-11">0xff0000</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">sphere</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">Mesh</span><span class="hl-1">(</span><span class="hl-6">geometry</span><span class="hl-1">, </span><span class="hl-6">material</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 5. 设置位置并添加到场景</span><br/><span class="hl-1"> </span><span class="hl-6">sphere</span><span class="hl-1">.</span><span class="hl-6">position</span><span class="hl-1">.</span><span class="hl-5">copy</span><span class="hl-1">(</span><span class="hl-6">point</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">scene</span><span class="hl-1">.</span><span class="hl-5">add</span><span class="hl-1">(</span><span class="hl-6">sphere</span><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-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><span class="hl-10">else</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><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
88
88
|
</code><button type="button">Copy</button></pre>
|
|
89
89
|
|
|
90
90
|
<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>
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
<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>
|
|
40
40
|
<h3 id="放大镜-magnifier" class="tsd-anchor-link">放大镜 (Magnifier)<a href="#放大镜-magnifier" 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>
|
|
41
41
|
<p>这是一个经典的放大镜实现示例。通过获取鼠标周围的像素，并以更高的 <code>pixelRatio</code> 重新渲染，从而获得清晰的放大效果。</p>
|
|
42
|
-
<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-8">// 假设有一个用于显示的 canvas</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">magnifierCanvas</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">'magnifier-canvas'</span><span class="hl-1">) </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-7">HTMLCanvasElement</span><span class="hl-1">;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ctx</span><span class="hl-1"> = </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-5">getContext</span><span class="hl-1">(</span><span class="hl-9">'2d'</span><span class="hl-1">)!;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">magnifierSize</span><span class="hl-1"> = </span><span class="hl-11">200</span><span class="hl-1">; </span><span class="hl-8">// 放大镜尺寸 200px</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">scale</span><span class="hl-1"> = </span><span class="hl-11">2</span><span class="hl-1">; </span><span class="hl-8">// 放大倍数</span><br/><br/><span class="hl-8">// 预先创建 Buffer 以提升性能</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelWidth</span><span class="hl-1"> = </span><span class="hl-6">magnifierSize</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelHeight</span><span class="hl-1"> = </span><span class="hl-6">magnifierSize</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">;</span><br/><span class="hl-3">let</span><span class="hl-1"> </span><span class="hl-6">magnifierImageData</span><span class="hl-1"> = </span><span class="hl-6">ctx</span><span class="hl-1">.</span><span class="hl-5">createImageData</span><span class="hl-1">(</span><span class="hl-6">pixelWidth</span><span class="hl-1">, </span><span class="hl-6">pixelHeight</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">'gesture.mousemove'</span><span class="hl-1">, (</span><span class="hl-6">event</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">// 1. 获取鼠标在 Canvas 上的坐标</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">mouse</span><span class="hl-1"> = </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">pointers</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">]?.</span><span class="hl-6">coords</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">mouse</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-8">// 转换归一化坐标 (-1 到 1) 到 像素坐标</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">renderSize</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getSize</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/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">x</span><span class="hl-1"> = (</span><span class="hl-6">mouse</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">) / </span><span class="hl-11">2</span><span class="hl-1"> * </span><span class="hl-6">renderSize</span><span class="hl-1">.</span><span class="hl-6">x</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">y</span><span class="hl-1"> = (</span><span class="hl-6">mouse</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">) / </span><span class="hl-11">2</span><span class="hl-1"> * </span><span class="hl-6">renderSize</span><span class="hl-1">.</span><span class="hl-6">y</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-8">// 注意：我们以更高的分辨率 (pixelRatio * scale) 渲染小区域，从而获得“无损”放大效果</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelRatio</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">renderer</span><span class="hl-1">?.</span><span class="hl-5">getPixelRatio</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-3">const</span><span class="hl-1"> </span><span class="hl-4">targetPixelRatio</span><span class="hl-1"> = </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">ceil</span><span class="hl-1">(</span><span class="hl-6">pixelRatio</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getPixels</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">x:</span><span class="hl-1"> </span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-6">magnifierSize</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-8">// 居中</span><br/><span class="hl-1"> </span><span class="hl-6">y:</span><span class="hl-1"> </span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-6">magnifierSize</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">width:</span><span class="hl-1"> </span><span class="hl-6">magnifierSize</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">height:</span><span class="hl-1"> </span><span class="hl-6">magnifierSize</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">pixelRatio:</span><span class="hl-1"> </span><span class="hl-6">targetPixelRatio</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">flipY:</span><span class="hl-1"> </span><span class="hl-3">true</span><span class="hl-1">, </span><span class="hl-8">// 翻转以适配 Canvas 2D</span><br/><span class="hl-1"> </span><span class="hl-6">buffer:</span><span class="hl-1"> </span><span class="hl-6">magnifierImageData</span><span class="hl-1">.</span><span class="hl-6">data</span><span class="hl-1">, </span><span class="hl-8">// 复用 buffer</span><br/><span class="hl-1"> </span><span class="hl-6">helperVisible:</span><span class="hl-1"> </span><span class="hl-3">false</span><span class="hl-1">, </span><span class="hl-8">// 隐藏辅助线等干扰元素</span><br/><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 3. 将数据绘制到放大镜 Canvas 上</span><br/><span class="hl-1"> </span><span class="hl-8">// 需要调整 Canvas 尺寸以匹配数据</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1"> = </span><span class="hl-6">pixelWidth</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1"> = </span><span class="hl-6">pixelHeight</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">ctx</span><span class="hl-1">.</span><span class="hl-5">putImageData</span><span class="hl-1">(</span><span class="hl-6">magnifierImageData</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 4. 更新放大镜位置 (CSS)</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</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">x</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">magnifierSize</span><span class="hl-12"> </span><span class="hl-1">/</span><span class="hl-12"> </span><span class="hl-11">2</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">magnifierCanvas</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">renderSize</span><span class="hl-12">.</span><span class="hl-6">y</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">y</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">magnifierSize</span><span class="hl-12"> </span><span class="hl-1">/</span><span class="hl-12"> </span><span class="hl-11">2</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">; </span><span class="hl-8">// 注意 Y 轴方向</span><br/><span class="hl-1">});</span>
|
|
42
|
+
<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-8">// 假设有一个用于显示的 canvas</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">magnifierCanvas</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">'magnifier-canvas'</span><span class="hl-1">) </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-7">HTMLCanvasElement</span><span class="hl-1">;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ctx</span><span class="hl-1"> = </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-5">getContext</span><span class="hl-1">(</span><span class="hl-9">'2d'</span><span class="hl-1">)!;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">magnifierSize</span><span class="hl-1"> = </span><span class="hl-11">200</span><span class="hl-1">; </span><span class="hl-8">// 放大镜尺寸 200px</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">scale</span><span class="hl-1"> = </span><span class="hl-11">2</span><span class="hl-1">; </span><span class="hl-8">// 放大倍数</span><br/><br/><span class="hl-8">// 预先创建 Buffer 以提升性能</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelWidth</span><span class="hl-1"> = </span><span class="hl-6">magnifierSize</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelHeight</span><span class="hl-1"> = </span><span class="hl-6">magnifierSize</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">;</span><br/><span class="hl-3">let</span><span class="hl-1"> </span><span class="hl-6">magnifierImageData</span><span class="hl-1"> = </span><span class="hl-6">ctx</span><span class="hl-1">.</span><span class="hl-5">createImageData</span><span class="hl-1">(</span><span class="hl-6">pixelWidth</span><span class="hl-1">, </span><span class="hl-6">pixelHeight</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">'gesture.mousemove'</span><span class="hl-1">, (</span><span class="hl-6">event</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">// 1. 获取鼠标在 Canvas 上的坐标</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">mouse</span><span class="hl-1"> = </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">pointers</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">]?.</span><span class="hl-6">coords</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">mouse</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-8">// 转换归一化坐标 (-1 到 1) 到 像素坐标</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">renderSize</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getSize</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/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">x</span><span class="hl-1"> = (</span><span class="hl-6">mouse</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">) / </span><span class="hl-11">2</span><span class="hl-1"> * </span><span class="hl-6">renderSize</span><span class="hl-1">.</span><span class="hl-6">x</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">y</span><span class="hl-1"> = (</span><span class="hl-6">mouse</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">) / </span><span class="hl-11">2</span><span class="hl-1"> * </span><span class="hl-6">renderSize</span><span class="hl-1">.</span><span class="hl-6">y</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-8">// 注意：我们以更高的分辨率 (pixelRatio * scale) 渲染小区域，从而获得“无损”放大效果</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelRatio</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">renderer</span><span class="hl-1">?.</span><span class="hl-5">getPixelRatio</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-3">const</span><span class="hl-1"> </span><span class="hl-4">targetPixelRatio</span><span class="hl-1"> = </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">ceil</span><span class="hl-1">(</span><span class="hl-6">pixelRatio</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getPixels</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">x:</span><span class="hl-1"> </span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-6">magnifierSize</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-8">// 居中</span><br/><span class="hl-1"> </span><span class="hl-6">y:</span><span class="hl-1"> </span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-6">magnifierSize</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">width:</span><span class="hl-1"> </span><span class="hl-6">magnifierSize</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">height:</span><span class="hl-1"> </span><span class="hl-6">magnifierSize</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">pixelRatio:</span><span class="hl-1"> </span><span class="hl-6">targetPixelRatio</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">flipY:</span><span class="hl-1"> </span><span class="hl-3">true</span><span class="hl-1">, </span><span class="hl-8">// 翻转以适配 Canvas 2D</span><br/><span class="hl-1"> </span><span class="hl-6">buffer:</span><span class="hl-1"> </span><span class="hl-6">magnifierImageData</span><span class="hl-1">.</span><span class="hl-6">data</span><span class="hl-1">, </span><span class="hl-8">// 复用 buffer</span><br/><span class="hl-1"> </span><span class="hl-6">helperVisible:</span><span class="hl-1"> </span><span class="hl-3">false</span><span class="hl-1">, </span><span class="hl-8">// 隐藏辅助线等干扰元素</span><br/><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 3. 将数据绘制到放大镜 Canvas 上</span><br/><span class="hl-1"> </span><span class="hl-8">// 需要调整 Canvas 尺寸以匹配数据</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1"> = </span><span class="hl-6">pixelWidth</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1"> = </span><span class="hl-6">pixelHeight</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">ctx</span><span class="hl-1">.</span><span class="hl-5">putImageData</span><span class="hl-1">(</span><span class="hl-6">magnifierImageData</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 4. 更新放大镜位置 (CSS)</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</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">x</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">magnifierSize</span><span class="hl-12"> </span><span class="hl-1">/</span><span class="hl-12"> </span><span class="hl-11">2</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">magnifierCanvas</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">renderSize</span><span class="hl-12">.</span><span class="hl-6">y</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">y</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">magnifierSize</span><span class="hl-12"> </span><span class="hl-1">/</span><span class="hl-12"> </span><span class="hl-11">2</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">; </span><span class="hl-8">// 注意 Y 轴方向</span><br/><span class="hl-1">});</span>
|
|
43
43
|
</code><button type="button">Copy</button></pre>
|
|
44
44
|
|
|
45
45
|
<h3 id="获取中心点颜色-color-picker" class="tsd-anchor-link">获取中心点颜色 (Color Picker)<a href="#获取中心点颜色-color-picker" 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,17 +84,17 @@
|
|
|
84
84
|
<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>
|
|
85
85
|
<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>
|
|
86
86
|
<p>启用 AVIF 格式并设置初始尺寸为 <code>512</code>，适用于大多数场景。</p>
|
|
87
|
-
<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-6">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">format:</span><span class="hl-1"> </span><span class="hl-9">"avif"</span><span class="hl-1">,</span><br/><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><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
87
|
+
<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-6">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">format:</span><span class="hl-1"> </span><span class="hl-9">"avif"</span><span class="hl-1">,</span><br/><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><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
88
88
|
</code><button type="button">Copy</button></pre>
|
|
89
89
|
|
|
90
90
|
<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>
|
|
91
91
|
<p>将数据中的 <code>custom-oss-public.ljcdn.com</code> 域名映射到对应的资源专用 OSS 域名。</p>
|
|
92
|
-
<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-6">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">mappings:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-9">"custom-oss-public.ljcdn.com"</span><span class="hl-6">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-9">"tencentCloud"</span><span class="hl-1">, </span><span class="hl-8">// 指定使用腾讯云图片处理协议</span><br/><span class="hl-1"> </span><span class="hl-6">pano:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-image-1.com"</span><span class="hl-1">, </span><span class="hl-9">"custom-oss-image-2.com"</span><span class="hl-1">], </span><span class="hl-8">// 双域名负载均衡</span><br/><span class="hl-1"> </span><span class="hl-6">tile:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-tile-1.com"</span><span class="hl-1">, </span><span class="hl-9">"custom-oss-tile-2.com"</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">model:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-model-1.com"</span><span class="hl-1">, </span><span class="hl-9">"custom-oss-model-2.com"</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">texture:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-image-3.com"</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">default:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-image-4.com"</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>
|
|
92
|
+
<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-6">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">mappings:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-9">"custom-oss-public.ljcdn.com"</span><span class="hl-6">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">type:</span><span class="hl-1"> </span><span class="hl-9">"tencentCloud"</span><span class="hl-1">, </span><span class="hl-8">// 指定使用腾讯云图片处理协议</span><br/><span class="hl-1"> </span><span class="hl-6">pano:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-image-1.com"</span><span class="hl-1">, </span><span class="hl-9">"custom-oss-image-2.com"</span><span class="hl-1">], </span><span class="hl-8">// 双域名负载均衡</span><br/><span class="hl-1"> </span><span class="hl-6">tile:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-tile-1.com"</span><span class="hl-1">, </span><span class="hl-9">"custom-oss-tile-2.com"</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">model:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-model-1.com"</span><span class="hl-1">, </span><span class="hl-9">"custom-oss-model-2.com"</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">texture:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-image-3.com"</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-6">default:</span><span class="hl-1"> [</span><span class="hl-9">"custom-oss-image-4.com"</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>
|
|
93
93
|
</code><button type="button">Copy</button></pre>
|
|
94
94
|
|
|
95
95
|
<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>
|
|
96
96
|
<p>使用 SDK 提供的 <code>defaultImageURLTransform</code> 工具函数（通常导出为 <code>defaultImageURLTransform</code>，可重命名为 <code>imageURL</code>），结合 <code>cut</code> 参数获取全景图特定区域（例如获取前方图片的中心 512x512 区域）。</p>
|
|
97
|
-
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">defaultImageURLTransform</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">imageURL</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">originalUrl</span><span class="hl-1"> = </span><span class="hl-9">"https://vr-public.realsee-cdn.com/.../pano_f.jpg"</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">cutUrl</span><span class="hl-1"> = </span><span class="hl-5">imageURL</span><span class="hl-1">(</span><span class="hl-6">originalUrl</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-6">cut:</span><span class="hl-1"> [</span><span class="hl-11">256</span><span class="hl-1">, </span><span class="hl-11">256</span><span class="hl-1">, </span><span class="hl-11">512</span><span class="hl-1">, </span><span class="hl-11">512</span><span class="hl-1">], </span><span class="hl-8">// x, y, width, height</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-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><br/><br/><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-6">cutUrl</span><span class="hl-1">);</span><br/><span class="hl-8">// 输出示例: https://vr-image-4.realsee-cdn.com/.../pano_f.jpg?imageMogr2/format/webp/cut/512x512x256x256/quality/80</span>
|
|
97
|
+
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">defaultImageURLTransform</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">imageURL</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">originalUrl</span><span class="hl-1"> = </span><span class="hl-9">"https://vr-public.realsee-cdn.com/.../pano_f.jpg"</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">cutUrl</span><span class="hl-1"> = </span><span class="hl-5">imageURL</span><span class="hl-1">(</span><span class="hl-6">originalUrl</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-6">cut:</span><span class="hl-1"> [</span><span class="hl-11">256</span><span class="hl-1">, </span><span class="hl-11">256</span><span class="hl-1">, </span><span class="hl-11">512</span><span class="hl-1">, </span><span class="hl-11">512</span><span class="hl-1">], </span><span class="hl-8">// x, y, width, height</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-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><br/><br/><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-6">cutUrl</span><span class="hl-1">);</span><br/><span class="hl-8">// 输出示例: https://vr-image-4.realsee-cdn.com/.../pano_f.jpg?imageMogr2/format/webp/cut/512x512x256x256/quality/80</span>
|
|
98
98
|
</code><button type="button">Copy</button></pre>
|
|
99
99
|
|
|
100
100
|
<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>
|