@realsee/five 6.8.0-alpha.5 → 6.8.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (243) hide show
  1. package/README.md +2 -5
  2. package/ai_guides/README.md +5 -0
  3. package/ai_guides/api.md +13 -0
  4. package/ai_guides/features/flowing-light-2d-pass.md +218 -0
  5. package/ai_guides/features/flowing-light-3d-pass.md +240 -0
  6. package/ai_guides/features/gaussian-blur-pass.md +202 -0
  7. package/ai_guides/features/load-external-model.md +16 -0
  8. package/ai_guides/features/load-progress.md +140 -0
  9. package/ai_guides/features/parameter.md +7 -0
  10. package/ai_guides/features/postprocessing.md +35 -2
  11. package/ai_guides/features/raycast.md +9 -0
  12. package/ai_guides/features/view-layer.md +8 -3
  13. package/ai_guides/features/work.md +17 -0
  14. package/ai_guides/glossary.md +17 -0
  15. package/ai_guides/release_notes/6.8.md +81 -0
  16. package/docs/assets/hierarchy.js +1 -1
  17. package/docs/assets/navigation.js +1 -1
  18. package/docs/assets/search.js +1 -1
  19. package/docs/classes/five.AdaptiveLuminancePass.html +1 -1
  20. package/docs/classes/five.BoundingMesh.html +1 -1
  21. package/docs/classes/five.Camera.html +1 -1
  22. package/docs/classes/five.EyeDomeLightingPass.html +1 -1
  23. package/docs/classes/five.Five.html +71 -71
  24. package/docs/classes/five.FivePass.html +1 -1
  25. package/docs/classes/five.InternalWebGLRenderer.html +1 -1
  26. package/docs/classes/five.Model.html +31 -31
  27. package/docs/classes/five.ModelScene.html +1 -1
  28. package/docs/classes/five.NetworkSubscribe.html +1 -1
  29. package/docs/classes/five.PBMContainer.html +1 -1
  30. package/docs/classes/five.PBMGSObject.html +1 -1
  31. package/docs/classes/five.PBMGroup.html +1 -1
  32. package/docs/classes/five.PBMMesh.html +1 -1
  33. package/docs/classes/five.PBMMeshMaterial.html +1 -1
  34. package/docs/classes/five.PBMPointCloud.html +1 -1
  35. package/docs/classes/five.PBMPointCloudMaterial.html +1 -1
  36. package/docs/classes/five.PBMSkinnedMesh.html +1 -1
  37. package/docs/classes/five.PanoCircleMesh.html +1 -1
  38. package/docs/classes/five.PanoCircleMeshCustom.html +1 -1
  39. package/docs/classes/five.PanoCircleMeshSolid.html +1 -1
  40. package/docs/classes/five.Parameter.html +1 -1
  41. package/docs/classes/five.Scene.html +1 -1
  42. package/docs/classes/five.Subscribe.html +1 -1
  43. package/docs/classes/five.Tile.html +1 -1
  44. package/docs/classes/five.Tile3D.html +30 -26
  45. package/docs/classes/five.TileNode.html +1 -1
  46. package/docs/classes/five.Trajectory.html +1 -1
  47. package/docs/classes/five.TrajectoryNode.html +1 -1
  48. package/docs/classes/five.Work.html +16 -16
  49. package/docs/classes/five.WorkResolvedObserver.html +27 -2
  50. package/docs/classes/gltf-loader.DDSLoader.html +1 -1
  51. package/docs/classes/gltf-loader.DRACOLoader.html +1 -1
  52. package/docs/classes/gltf-loader.GLTFLoader.html +1 -1
  53. package/docs/classes/gltf-loader.GLTFObject.html +1 -1
  54. package/docs/classes/gltf-loader.THREEGLTFLoader.html +1 -1
  55. package/docs/classes/line.Line.html +1 -1
  56. package/docs/classes/line.LineGeometry.html +1 -1
  57. package/docs/classes/line.LineMaterial.html +1 -1
  58. package/docs/classes/line.LineSegmentsGeometry.html +1 -1
  59. package/docs/classes/line.THREE_Line2.html +1 -1
  60. package/docs/classes/line.THREE_LineSegments2.html +1 -1
  61. package/docs/classes/plugins.BasePlugin.Controller.html +1 -1
  62. package/docs/classes/plugins.RoundedBoxGeometry.html +1 -1
  63. package/docs/classes/sticker.Sticker.html +1 -1
  64. package/docs/classes/vfx.Airflow.html +1 -1
  65. package/docs/classes/vfx.Flame.html +1 -1
  66. package/docs/classes/vfx.Particle.html +1 -1
  67. package/docs/classes/vfx.ParticleGPU.html +1 -1
  68. package/docs/classes/vfx.SpotLight.html +1 -1
  69. package/docs/documents/README.html +5 -0
  70. package/docs/documents/api.html +28 -3
  71. package/docs/documents/features_flowing-light-2d-pass.html +124 -0
  72. package/docs/documents/features_flowing-light-3d-pass.html +129 -0
  73. package/docs/documents/features_gaussian-blur-pass.html +182 -0
  74. package/docs/documents/features_load-external-model.html +19 -2
  75. package/docs/documents/features_load-progress.html +110 -0
  76. package/docs/documents/features_parameter.html +7 -0
  77. package/docs/documents/features_postprocessing.html +17 -3
  78. package/docs/documents/features_raycast.html +1 -1
  79. package/docs/documents/features_view-layer.html +9 -3
  80. package/docs/documents/features_work.html +1 -1
  81. package/docs/documents/glossary.html +21 -1
  82. package/docs/documents/release_notes_6.8.html +92 -0
  83. package/docs/functions/five.loadAt3d.html +1 -1
  84. package/docs/functions/five.loadB3dm.html +1 -1
  85. package/docs/functions/five.loadDome.html +1 -1
  86. package/docs/functions/five.loadDomez.html +1 -1
  87. package/docs/functions/five.loadFbx.html +1 -1
  88. package/docs/functions/five.loadGltf.html +1 -1
  89. package/docs/functions/five.loadPbm.html +1 -1
  90. package/docs/functions/five.loadPly.html +1 -1
  91. package/docs/functions/five.loadPnts.html +1 -1
  92. package/docs/functions/five.loadSplat.html +1 -1
  93. package/docs/functions/five.loadSpz.html +1 -1
  94. package/docs/functions/five.loadX3p.html +1 -1
  95. package/docs/functions/five.parseWork.html +1 -1
  96. package/docs/functions/vue.useFiveWorks.html +2 -2
  97. package/docs/hierarchy.html +1 -1
  98. package/docs/index.html +5 -0
  99. package/docs/interfaces/five.AddableObject.html +1 -1
  100. package/docs/interfaces/five.AjaxOptions.html +1 -1
  101. package/docs/interfaces/five.BaseEvent.html +2 -2
  102. package/docs/interfaces/five.EventCallback.html +15 -11
  103. package/docs/interfaces/five.GestureEvent.html +2 -2
  104. package/docs/interfaces/five.ImageOptions.html +1 -1
  105. package/docs/interfaces/five.IntersectEvent.html +2 -2
  106. package/docs/interfaces/five.IntersectMesh.html +1 -1
  107. package/docs/interfaces/five.IntersectMeshInterface.html +1 -1
  108. package/docs/interfaces/five.Intersection.html +4 -3
  109. package/docs/interfaces/five.LooseWorkWithExtrinsics.html +6 -6
  110. package/docs/interfaces/five.ModeChangeEvent.html +2 -2
  111. package/docs/interfaces/five.ModelControllerCustomInitArgs.html +1 -1
  112. package/docs/interfaces/five.ModelEvent.html +2 -2
  113. package/docs/interfaces/five.ModelSceneEvent.html +2 -2
  114. package/docs/interfaces/five.ModelTileEvent.html +8 -0
  115. package/docs/interfaces/five.MovePanoOptions.html +1 -1
  116. package/docs/interfaces/five.NetworkAbortError.html +1 -1
  117. package/docs/interfaces/five.NetworkFirbiddenError.html +1 -1
  118. package/docs/interfaces/five.NetworkOptions.html +1 -1
  119. package/docs/interfaces/five.NetworkProxyError.html +1 -1
  120. package/docs/interfaces/five.NetworkResourceEvent.html +2 -2
  121. package/docs/interfaces/five.NetworkResponseError.html +1 -1
  122. package/docs/interfaces/five.NetworkTimeoutError.html +1 -1
  123. package/docs/interfaces/five.ObjectEvent.html +2 -2
  124. package/docs/interfaces/five.PBMMaterial.html +1 -1
  125. package/docs/interfaces/five.PBMMeshMaterialParameters.html +1 -1
  126. package/docs/interfaces/five.PBMPointCloudMaterialParameters.html +1 -1
  127. package/docs/interfaces/five.PanoCircleMeshInterface.html +1 -1
  128. package/docs/interfaces/five.PanoEvent.html +2 -2
  129. package/docs/interfaces/five.PanoTextureEvent.html +2 -2
  130. package/docs/interfaces/five.PanoramaControllerCustomInitArgs.html +1 -1
  131. package/docs/interfaces/five.PanoramaLikeControllerCustomInitArgs.html +1 -1
  132. package/docs/interfaces/five.ParameterMaterialValue.html +1 -1
  133. package/docs/interfaces/five.ParameterTilesetValue.html +1 -1
  134. package/docs/interfaces/five.ParameterValue.html +1 -1
  135. package/docs/interfaces/five.Pose.html +1 -1
  136. package/docs/interfaces/five.RenderEvent.html +2 -2
  137. package/docs/interfaces/five.ResolvedParameterValue.html +1 -1
  138. package/docs/interfaces/five.State.html +1 -1
  139. package/docs/interfaces/five.StateEvent.html +2 -2
  140. package/docs/interfaces/five.TextureOptions.html +1 -1
  141. package/docs/interfaces/five.TopviewControllerCustomInitArgs.html +1 -1
  142. package/docs/interfaces/five.VRPanoramaControllerCustomInitArgs.html +1 -1
  143. package/docs/interfaces/five.ViewLayer.html +30 -26
  144. package/docs/interfaces/five.WorkCubeImage.html +1 -1
  145. package/docs/interfaces/five.WorkImage.html +1 -1
  146. package/docs/interfaces/five.WorkModel.html +8 -8
  147. package/docs/interfaces/five.WorkModelLayer.html +6 -6
  148. package/docs/interfaces/five.WorkObserver.html +27 -2
  149. package/docs/interfaces/five.WorkTile.html +1 -1
  150. package/docs/interfaces/five.WorksEvent.html +2 -2
  151. package/docs/interfaces/five.XRControllerEvent.html +2 -2
  152. package/docs/interfaces/five.XRGestureEvent.html +2 -2
  153. package/docs/interfaces/five.XRPanoramaControllerCustomInitArgs.html +1 -1
  154. package/docs/interfaces/five.XRSessionEvent.html +2 -2
  155. package/docs/interfaces/plugins.BackgroundPluginController.html +1 -1
  156. package/docs/interfaces/plugins.BackgroundPluginType.EventMap.html +1 -1
  157. package/docs/interfaces/plugins.BasePlugin.State.html +1 -1
  158. package/docs/interfaces/plugins.DynamicPathLinePluginController.html +1 -1
  159. package/docs/interfaces/plugins.DynamicPathLinePluginType.EventMap.html +1 -1
  160. package/docs/interfaces/plugins.DynamicPathLinePluginType.State.html +1 -1
  161. package/docs/interfaces/plugins.ItemMaskController.html +1 -1
  162. package/docs/interfaces/plugins.ItemMaskPluginType.EventMap.html +1 -1
  163. package/docs/interfaces/plugins.ItemMaskPluginType.State.html +1 -1
  164. package/docs/interfaces/plugins.OrientationPluginController.html +1 -1
  165. package/docs/interfaces/plugins.OrientationPluginType.EventMap.html +1 -1
  166. package/docs/interfaces/plugins.OrientationPluginType.State.html +1 -1
  167. package/docs/interfaces/plugins.PanoAnimeController.html +1 -1
  168. package/docs/interfaces/plugins.PanoAnimePluginType.EventMap.html +1 -1
  169. package/docs/interfaces/plugins.PanoAnimePluginType.State.html +1 -1
  170. package/docs/interfaces/plugins.PluginTemplateType.EventMap.html +1 -1
  171. package/docs/interfaces/plugins.PluginTemplateType.State.html +1 -1
  172. package/docs/interfaces/plugins.TrajectoryController.html +1 -1
  173. package/docs/interfaces/react.FiveInjectionTypes.html +13 -13
  174. package/docs/modules/five.html +1 -1
  175. package/docs/modules.html +1 -1
  176. package/docs/types/five.EventTypes.html +12 -10
  177. package/docs/types/five.NetworkProgressCallback.html +1 -1
  178. package/docs/types/five.ParseOptions.html +6 -6
  179. package/docs/types/plugins.BasePlugin.EventMap.html +1 -1
  180. package/five/application/events.d.ts +5 -1
  181. package/five/declare.d.ts +2 -1
  182. package/five/index.d.ts +1 -1
  183. package/five/index.js +429 -73
  184. package/five/index.mjs +5385 -4485
  185. package/five/model/intersection.d.ts +2 -0
  186. package/five/model/loaders/at3d.d.ts +1 -0
  187. package/five/model/loaders/b3dm.d.ts +1 -0
  188. package/five/model/loaders/dome.d.ts +1 -0
  189. package/five/model/loaders/domez.d.ts +1 -0
  190. package/five/model/loaders/fbx.d.ts +1 -0
  191. package/five/model/loaders/glTF-helpers/extensions/KHR_animation_pointer.d.ts +6 -0
  192. package/five/model/loaders/glTF-helpers/extensions/KHR_node_visibility.d.ts +6 -0
  193. package/five/model/loaders/glTF-helpers/index.d.ts +4 -0
  194. package/five/model/loaders/gltf.d.ts +1 -0
  195. package/five/model/loaders/obj.d.ts +1 -0
  196. package/five/model/loaders/pbm.d.ts +1 -0
  197. package/five/model/loaders/ply.d.ts +1 -0
  198. package/five/model/loaders/pnts.d.ts +1 -0
  199. package/five/model/loaders/splat.d.ts +1 -0
  200. package/five/model/loaders/spz.d.ts +1 -0
  201. package/five/model/loaders/x3p.d.ts +1 -0
  202. package/five/model/model.d.ts +26 -1
  203. package/five/model/tile3d/index.d.ts +5 -1
  204. package/five/model/tile3d/tile.d.ts +1 -0
  205. package/five/model/tile3d/trajectory.d.ts +1 -0
  206. package/five/model/view-layer.d.ts +1 -2
  207. package/five/renderer/postprocessing/index.d.ts +2 -0
  208. package/five/renderer/postprocessing/passes/flowing-light-2d-pass.d.ts +22 -0
  209. package/five/renderer/postprocessing/passes/flowing-light-3d-pass.d.ts +22 -0
  210. package/five/renderer/postprocessing/passes/gaussian-blur-pass.d.ts +1 -0
  211. package/five/utils/ajax.d.ts +1 -1
  212. package/five/utils/event.d.ts +6 -0
  213. package/five/work/work.d.ts +35 -2
  214. package/five/work/workObserverUtils.d.ts +36 -0
  215. package/gltf-loader/index.js +3 -3
  216. package/gltf-loader/index.mjs +3 -3
  217. package/line/index.js +3 -3
  218. package/line/index.mjs +3 -3
  219. package/llms.txt +5 -0
  220. package/package.json +1 -1
  221. package/plugins/index.js +2 -2
  222. package/plugins/index.mjs +2 -2
  223. package/react/index.js +2 -2
  224. package/react/index.mjs +2 -2
  225. package/shader-lib/index.js +2 -2
  226. package/shader-lib/index.mjs +2 -2
  227. package/sticker/index.js +3 -3
  228. package/sticker/index.mjs +3 -3
  229. package/umd/five-gltf-loader.js +3 -3
  230. package/umd/five-line.js +3 -3
  231. package/umd/five-plugins.js +2 -2
  232. package/umd/five-react.js +2 -2
  233. package/umd/five-shader-lib.js +2 -2
  234. package/umd/five-sticker.js +3 -3
  235. package/umd/five-vfx.js +2 -2
  236. package/umd/five-vue.js +2 -2
  237. package/umd/five.js +429 -73
  238. package/vfx/index.js +2 -2
  239. package/vfx/index.mjs +2 -2
  240. package/vue/index.js +2 -2
  241. package/vue/index.mjs +2 -2
  242. package/work-downloader/index.js +2 -2
  243. package/work-downloader/index.mjs +2 -2
package/docs/documents/features_flowing-light-3d-pass.html ADDED
@@ -0,0 +1,129 @@
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/flowing-light-3d-pass | 如视 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/flowing-light-3d-pass</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="flowing-light-3d-pass-流光-3d-通道" class="tsd-anchor-link">Flowing Light 3D Pass (流光 3D 通道)<a href="#flowing-light-3d-pass-流光-3d-通道" 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
+ <ul>
3
+ <li><strong>Summary</strong>: <code>FlowingLight3DPass</code> 基于 3D 世界坐标绘制流光效果，自动投影到屏幕空间，适合沿模型表面、路径或空间轨迹演示动态流动光带。</li>
4
+ <li><strong>Schema</strong>: <code>FlowingLight3DPass</code> 类及 Line 数据结构。</li>
5
+ <li><strong>Concepts</strong>: 基于相机投影的 3D 光带、世界坐标到屏幕坐标映射、动画驱动。</li>
6
+ <li><strong>Configuration</strong>: 3D 路径点、颜色、不透明度、动画周期。</li>
7
+ <li><strong>Examples</strong>: 空间轨迹演示、结合相机动画、多条 3D 路径。</li>
8
+ </ul>
9
+ <h2 id="schema" class="tsd-anchor-link">Schema<a href="#schema" 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>
10
+ <blockquote>
11
+ <p><strong>Definition</strong>: <a href="../../five/renderer/postprocessing/passes/flowing-light-3d-pass.d.ts">FlowingLight3DPass</a></p>
12
+ </blockquote>
13
+ <p><code>FlowingLight3DPass</code> 继承自 <code>FivePass</code>，支持投影到当前相机视锥。核心接口如下：</p>
14
+ <pre><code class="ts"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">FivePass</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;./pass&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-10">type</span><span class="hl-1"> </span><span class="hl-6">Camera</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;../../../core/camera&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">type</span><span class="hl-1"> </span><span class="hl-7">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">points</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">[]; </span><span class="hl-8">// 世界坐标系路径点</span><br/><span class="hl-1"> </span><span class="hl-6">totalLength</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">color</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Color</span><span class="hl-1">; </span><span class="hl-8">// 光带颜色</span><br/><span class="hl-1"> </span><span class="hl-6">opacity</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// 光带不透明度（0-1）</span><br/><span class="hl-1"> </span><span class="hl-6">duration</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><br/><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">FlowingLight3DPass</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">FivePass</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">constructor</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">: </span><span class="hl-7">Camera</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-3">public</span><span class="hl-1"> </span><span class="hl-5">setLines</span><span class="hl-1">(</span><span class="hl-6">lines</span><span class="hl-1">: </span><span class="hl-7">Line</span><span class="hl-1">[]): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">render</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-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderer</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">writeBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">readBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">deltaTime</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">maskActive</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">,</span><br/><span class="hl-1"> ): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">dispose</span><span class="hl-1">(): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
15
+ </code><button type="button">Copy</button></pre>
16
+
17
+ <h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
18
+ <h3 id="世界空间路径与投影-world-space-projection" class="tsd-anchor-link">世界空间路径与投影 (World-space Projection)<a href="#世界空间路径与投影-world-space-projection" 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>
19
+ <p>路径点定义在 3D 世界坐标系中。Pass 内部自动根据当前相机投影矩阵将 3D 点映射到屏幕空间，从而实现&quot;随相机变化&quot;的动态光带效果。</p>
20
+ <h3 id="循环流动-looping-flow" class="tsd-anchor-link">循环流动 (Looping Flow)<a href="#循环流动-looping-flow" 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>
21
+ <p>默认使用循环模式（<code>LOOP = true</code>），光头在路径上循环流动，无起点/终点的区分。尾部长度为路径总长的 1/4。</p>
22
+ <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>
23
+ <p>Pass 自动同步相机的投影矩阵和视图矩阵，无需手动管理。支持相机运动时光带跟随。</p>
24
+ <h2 id="configuration" class="tsd-anchor-link">Configuration<a href="#configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
25
+ <h3 id="line-配置参数" class="tsd-anchor-link">Line 配置参数<a href="#line-配置参数" 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>
26
+ <table>
27
+ <thead>
28
+ <tr>
29
+ <th style="text-align:left">Parameter</th>
30
+ <th style="text-align:left">Type</th>
31
+ <th style="text-align:left">Required</th>
32
+ <th style="text-align:left">Default</th>
33
+ <th style="text-align:left">Description</th>
34
+ </tr>
35
+ </thead>
36
+ <tbody>
37
+ <tr>
38
+ <td style="text-align:left"><code>points</code></td>
39
+ <td style="text-align:left"><code>THREE.Vector3[]</code></td>
40
+ <td style="text-align:left">✓</td>
41
+ <td style="text-align:left">-</td>
42
+ <td style="text-align:left">世界坐标系路径点数组。至少 2 个点。</td>
43
+ </tr>
44
+ <tr>
45
+ <td style="text-align:left"><code>totalLength</code></td>
46
+ <td style="text-align:left"><code>number</code></td>
47
+ <td style="text-align:left">✓</td>
48
+ <td style="text-align:left">-</td>
49
+ <td style="text-align:left">路径总长度（世界单位）。通常为所有相邻点间距离之和。</td>
50
+ </tr>
51
+ <tr>
52
+ <td style="text-align:left"><code>color</code></td>
53
+ <td style="text-align:left"><code>THREE.Color</code></td>
54
+ <td style="text-align:left">✓</td>
55
+ <td style="text-align:left">-</td>
56
+ <td style="text-align:left">光带颜色（RGB）。</td>
57
+ </tr>
58
+ <tr>
59
+ <td style="text-align:left"><code>opacity</code></td>
60
+ <td style="text-align:left"><code>number</code></td>
61
+ <td style="text-align:left"></td>
62
+ <td style="text-align:left"><code>1</code></td>
63
+ <td style="text-align:left">光带不透明度（0-1）。控制与背景的混合强度。</td>
64
+ </tr>
65
+ <tr>
66
+ <td style="text-align:left"><code>duration</code></td>
67
+ <td style="text-align:left"><code>number</code></td>
68
+ <td style="text-align:left"></td>
69
+ <td style="text-align:left"><code>1000</code></td>
70
+ <td style="text-align:left">动画周期（毫秒）。光头完成一个循环所需时长。</td>
71
+ </tr>
72
+ </tbody>
73
+ </table>
74
+ <blockquote>
75
+ <p><strong>注意</strong>: <code>totalLength</code> 应为世界坐标单位。若不准确，流速会偏差。</p>
76
+ </blockquote>
77
+ <h2 id="instance-methods" class="tsd-anchor-link">Instance Methods<a href="#instance-methods" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
78
+ <h3 id="" class="tsd-anchor-link"><code>constructor(camera: Camera)</code></h3>
79
+ <p>初始化 Pass，需传入相机以获取投影矩阵和视图矩阵。</p>
80
+ <h3 id="-1" class="tsd-anchor-link"><code>setLines(lines: Line[])</code><a href="#-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
81
+ <p>更新要渲染的路径列表。支持运行时动态更改。</p>
82
+ <p><strong>示例</strong>：</p>
83
+ <pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pathLine</span><span class="hl-1">: </span><span class="hl-7">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">points:</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">Vector3</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><span class="hl-11">0</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">Vector3</span><span class="hl-1">(</span><span class="hl-11">5</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><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">Vector3</span><span class="hl-1">(</span><span class="hl-11">10</span><span class="hl-1">, </span><span class="hl-11">1</span><span class="hl-1">, </span><span class="hl-11">6</span><span class="hl-1">),</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1"> </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">12</span><span class="hl-1">, </span><span class="hl-8">// 世界坐标单位</span><br/><span class="hl-1"> </span><span class="hl-6">color:</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">Color</span><span class="hl-1">(</span><span class="hl-11">0xff6600</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.85</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">3000</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([</span><span class="hl-6">pathLine</span><span class="hl-1">]);</span>
84
+ </code><button type="button">Copy</button></pre>
85
+
86
+ <h3 id="-2" class="tsd-anchor-link"><code>render(...)</code><a href="#-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
87
+ <p>由 EffectComposer 自动调用，无需手动调用。自动同步相机矩阵。</p>
88
+ <h3 id="-3" class="tsd-anchor-link"><code>dispose()</code><a href="#-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
89
+ <p>释放着色材质和数据纹理资源，销毁 Pass 时必须调用。</p>
90
+ <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>
91
+ <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>
92
+ <pre><code class="ts"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">FlowingLight3DPass</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;../../lib/five/renderer/postprocessing&#39;</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">&#39;three&#39;</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">// 创建 3D 流光通道</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">flowing3D</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 定义一条 3D 路径（世界坐标）</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">path</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">Vector3</span><span class="hl-1">(-</span><span class="hl-11">5</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/><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">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><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">Vector3</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><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">Vector3</span><span class="hl-1">(</span><span class="hl-11">5</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/><span class="hl-1">];</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">totalLen</span><span class="hl-1"> = </span><span class="hl-11">15</span><span class="hl-1">; </span><span class="hl-8">// 世界单位</span><br/><br/><span class="hl-6">flowing3D</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([{</span><br/><span class="hl-1"> </span><span class="hl-6">points:</span><span class="hl-1"> </span><span class="hl-6">path</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-6">totalLen</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x00ff88</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">4000</span><span class="hl-1">,</span><br/><span class="hl-1">}]);</span><br/><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">flowing3D</span><span class="hl-1">);</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">animate</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-5">requestAnimationFrame</span><span class="hl-1">(</span><span class="hl-6">animate</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-5">render</span><span class="hl-1">();</span><br/><span class="hl-1">}</span><br/><span class="hl-5">animate</span><span class="hl-1">();</span>
93
+ </code><button type="button">Copy</button></pre>
94
+
95
+ <h3 id="多条-3d-路径" class="tsd-anchor-link">多条 3D 路径<a href="#多条-3d-路径" 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
+ <pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">paths</span><span class="hl-1"> = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">points:</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">Vector3</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><span class="hl-11">0</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">Vector3</span><span class="hl-1">(</span><span class="hl-11">10</span><span class="hl-1">, </span><span class="hl-11">5</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">),</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1"> </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">11</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">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-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">points:</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">Vector3</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><span class="hl-11">0</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">Vector3</span><span class="hl-1">(</span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">10</span><span class="hl-1">, </span><span class="hl-11">5</span><span class="hl-1">),</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1"> </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">12</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x00ff00</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2500</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">points:</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">Vector3</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><span class="hl-11">0</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">Vector3</span><span class="hl-1">(</span><span class="hl-11">5</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">10</span><span class="hl-1">),</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1"> </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">11</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x0000ff</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2200</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">(</span><span class="hl-6">paths</span><span class="hl-1">);</span>
97
+ </code><button type="button">Copy</button></pre>
98
+
99
+ <h3 id="计算-3d-路径长度" class="tsd-anchor-link">计算 3D 路径长度<a href="#计算-3d-路径长度" 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>
100
+ <pre><code class="ts"><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">calculatePath3DLength</span><span class="hl-1">(</span><span class="hl-6">points</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">[]): </span><span class="hl-7">number</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">let</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-10">for</span><span class="hl-1"> (</span><span class="hl-3">let</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> = </span><span class="hl-11">1</span><span class="hl-1">; </span><span class="hl-6">i</span><span class="hl-1"> &lt; </span><span class="hl-6">points</span><span class="hl-1">.</span><span class="hl-6">length</span><span class="hl-1">; </span><span class="hl-6">i</span><span class="hl-1">++) {</span><br/><span class="hl-1"> </span><span class="hl-6">length</span><span class="hl-1"> += </span><span class="hl-6">points</span><span class="hl-1">[</span><span class="hl-6">i</span><span class="hl-1">].</span><span class="hl-5">distanceTo</span><span class="hl-1">(</span><span class="hl-6">points</span><span class="hl-1">[</span><span class="hl-6">i</span><span class="hl-1"> - </span><span class="hl-11">1</span><span class="hl-1">]);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-6">length</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pathLine</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">points:</span><span class="hl-1"> [...],</span><br/><span class="hl-1"> </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-5">calculatePath3DLength</span><span class="hl-1">(</span><span class="hl-6">points</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x00ccff</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">3000</span><span class="hl-1">,</span><br/><span class="hl-1">};</span>
101
+ </code><button type="button">Copy</button></pre>
102
+
103
+ <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>
104
+ <pre><code class="ts"><span class="hl-8">// 光带路径随相机移动自动投影</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([{</span><br/><span class="hl-1"> </span><span class="hl-6">points:</span><span class="hl-1"> [...],</span><br/><span class="hl-1"> </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">20</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0xffff00</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">3000</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">setState</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">mode:</span><span class="hl-1"> </span><span class="hl-6">Five</span><span class="hl-1">.</span><span class="hl-6">Mode</span><span class="hl-1">.</span><span class="hl-6">Model</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// ... 其他参数</span><br/><span class="hl-1">});</span>
105
+ </code><button type="button">Copy</button></pre>
106
+
107
+ <h2 id="debugging" class="tsd-anchor-link">Debugging<a href="#debugging" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
108
+ <ul>
109
+ <li><strong>光带不可见</strong>：检查路径点是否在相机视锥内；验证 <code>color</code> 和 <code>opacity</code> 非全透明。</li>
110
+ <li><strong>光带抖动或消失</strong>：确认路径在相机背面时自动丢弃（3D 投影的预期行为）。</li>
111
+ <li><strong>流速不对</strong>：检查 <code>totalLength</code> 计算是否为世界单位；调整 <code>duration</code> 以改变流速。</li>
112
+ </ul>
113
+ <h2 id="common-pitfalls" class="tsd-anchor-link">Common Pitfalls<a href="#common-pitfalls" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
114
+ <ol>
115
+ <li><strong>totalLength 单位混淆</strong>：必须使用世界坐标单位，不能混用屏幕像素或其他单位。</li>
116
+ <li><strong>投影失败</strong>：确保相机矩阵有效，相机在构造时已初始化。</li>
117
+ <li><strong>路径在背面</strong>：相机背后的点自动投影到屏幕外，无需手动处理。</li>
118
+ <li><strong>未调用 dispose()</strong>：销毁 Pass 时必须调用 <code>dispose()</code>，避免 GPU 资源泄漏。</li>
119
+ </ol>
120
+ <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>
121
+ <ul>
122
+ <li><a href="features_postprocessing.html">Postprocessing</a>: 后处理通用概念与 EffectComposer 使用指南。</li>
123
+ <li><a href="features_flowing-light-2d-pass.html">Flowing Light 2D Pass</a>: 屏幕空间的流光效果。</li>
124
+ </ul>
125
+ <hr>
126
+ <pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">postprocessing</span><span class="hl-1">, </span><span class="hl-2">effect</span><span class="hl-1">, </span><span class="hl-2">flowing</span><span class="hl-1">, </span><span class="hl-2">light</span><span class="hl-1">, </span><span class="hl-2">pass</span><span class="hl-1">, </span><span class="hl-2">rendering</span><span class="hl-1">, </span><span class="hl-2">worldspace</span><span class="hl-1">, </span><span class="hl-2">projection</span><span class="hl-1">]</span>
127
+ </code><button type="button">Copy</button></pre>
128
+
129
+ </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#flowing-light-3d-pass-流光-3d-通道"><span>Flowing <wbr/>Light 3<wbr/>D <wbr/>Pass (流光 3<wbr/>D 通道)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#世界空间路径与投影-world-space-projection"><span>世界空间路径与投影 (<wbr/>World-<wbr/>space <wbr/>Projection)</span></a></li><li><a href="#循环流动-looping-flow"><span>循环流动 (<wbr/>Looping <wbr/>Flow)</span></a></li><li><a href="#相机同步"><span>相机同步</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#line-配置参数"><span>Line 配置参数</span></a></li></ul></li><li><a href="#instance-methods"><span>Instance <wbr/>Methods</span></a></li><li><ul><li><a href="#"><span></span></a></li><li><a href="#-1"><span></span></a></li><li><a href="#-2"><span></span></a></li><li><a href="#-3"><span></span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#多条-3d-路径"><span>多条 3<wbr/>D 路径</span></a></li><li><a href="#计算-3d-路径长度"><span>计算 3<wbr/>D 路径长度</span></a></li><li><a href="#结合相机动画"><span>结合相机动画</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
package/docs/documents/features_gaussian-blur-pass.html ADDED
@@ -0,0 +1,182 @@
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/gaussian-blur-pass | 如视 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/gaussian-blur-pass</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="gaussian-blur-pass-高斯模糊通道" class="tsd-anchor-link">Gaussian Blur Pass (高斯模糊通道)<a href="#gaussian-blur-pass-高斯模糊通道" 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
+ <ul>
3
+ <li><strong>Summary</strong>: GaussianBlurPass 是一个后处理通道，用于对渲染结果应用高斯模糊效果。</li>
4
+ <li><strong>Schema</strong>: GaussianBlurPass 类及其关键参数。</li>
5
+ <li><strong>Concepts</strong>: 后处理通道 (Pass)、高斯模糊、Shader、EffectComposer。</li>
6
+ <li><strong>Configuration</strong>: 模糊半径 (radius) 和标准差 (sigma) 参数。</li>
7
+ <li><strong>Examples</strong>: 基础使用、参数调整。</li>
8
+ </ul>
9
+ <h2 id="schema" class="tsd-anchor-link">Schema<a href="#schema" 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>
10
+ <blockquote>
11
+ <p><strong>Definition</strong>: <a href="../../five/renderer/postprocessing/passes/gaussian-blur-pass.d.ts">GaussianBlurPass</a></p>
12
+ </blockquote>
13
+ <p><code>GaussianBlurPass</code> 是 <code>FivePass</code> 的子类，用于实现高斯模糊效果。其核心接口如下：</p>
14
+ <pre><code class="ts"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">FivePass</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;./pass&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-10">type</span><span class="hl-1"> </span><span class="hl-6">Camera</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;../../../core/camera&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">GaussianBlurPass</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">FivePass</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 构造函数，传入相机实例</span><br/><span class="hl-1"> </span><span class="hl-3">constructor</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">: </span><span class="hl-7">Camera</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-3">public</span><span class="hl-1"> </span><span class="hl-5">setRadius</span><span class="hl-1">(</span><span class="hl-6">radius</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 渲染方法（由 EffectComposer 调用）</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">render</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-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderer</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">writeBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">readBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">deltaTime</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">maskActive</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">,</span><br/><span class="hl-1"> ): </span><span class="hl-7">void</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-3">public</span><span class="hl-1"> </span><span class="hl-5">dispose</span><span class="hl-1">(): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
15
+ </code><button type="button">Copy</button></pre>
16
+
17
+ <h3 id="shader-uniforms-内部-shader-参数" class="tsd-anchor-link">Shader Uniforms (内部 Shader 参数)<a href="#shader-uniforms-内部-shader-参数" 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>
18
+ <p>该通道使用 ShaderMaterial，包含以下 uniforms：</p>
19
+ <table>
20
+ <thead>
21
+ <tr>
22
+ <th style="text-align:left">Uniform</th>
23
+ <th style="text-align:left">Type</th>
24
+ <th style="text-align:left">Default</th>
25
+ <th style="text-align:left">Description</th>
26
+ </tr>
27
+ </thead>
28
+ <tbody>
29
+ <tr>
30
+ <td style="text-align:left"><code>colorMap</code></td>
31
+ <td style="text-align:left"><code>THREE.Texture</code></td>
32
+ <td style="text-align:left"><code>null</code></td>
33
+ <td style="text-align:left">输入纹理（来自 readBuffer）</td>
34
+ </tr>
35
+ <tr>
36
+ <td style="text-align:left"><code>resolution</code></td>
37
+ <td style="text-align:left"><code>THREE.Vector2</code></td>
38
+ <td style="text-align:left"><code>相机分辨率</code></td>
39
+ <td style="text-align:left">渲染目标的分辨率</td>
40
+ </tr>
41
+ <tr>
42
+ <td style="text-align:left"><code>radius</code></td>
43
+ <td style="text-align:left"><code>number</code></td>
44
+ <td style="text-align:left"><code>4.0</code></td>
45
+ <td style="text-align:left">模糊采样半径（像素数）</td>
46
+ </tr>
47
+ <tr>
48
+ <td style="text-align:left"><code>sigma</code></td>
49
+ <td style="text-align:left"><code>number</code></td>
50
+ <td style="text-align:left"><code>4.0</code></td>
51
+ <td style="text-align:left">高斯核的标准差</td>
52
+ </tr>
53
+ </tbody>
54
+ </table>
55
+ <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>
56
+ <h3 id="后处理通道-post-processing-pass" class="tsd-anchor-link">后处理通道 (Post-Processing Pass)<a href="#后处理通道-post-processing-pass" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
57
+ <p>GaussianBlurPass 是 Three.js EffectComposer 生态中的一个通道。它接收前一个通道的输出（readBuffer），进行高斯模糊处理后，输出到下一个通道或屏幕（writeBuffer 或 renderToScreen）。</p>
58
+ <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>
59
+ <p>该通道采用离散高斯核进行模糊。在 fragment shader 中：</p>
60
+ <ul>
61
+ <li>对采样范围内的像素（由 <code>radius</code> 定义）计算高斯权重</li>
62
+ <li>根据 <code>sigma</code> 值计算高斯分布的形状</li>
63
+ <li>对所有采样点的颜色值加权平均</li>
64
+ </ul>
65
+ <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>
66
+ <p>构造函数需传入 <code>Camera</code> 实例，用于获取当前渲染分辨率。通过 <code>camera.resolution</code> 自动同步分辨率变化，确保模糊效果在窗口 resize 时保持正确。</p>
67
+ <h2 id="configuration" class="tsd-anchor-link">Configuration<a href="#configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
68
+ <h3 id="常用参数" class="tsd-anchor-link">常用参数<a href="#常用参数" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
69
+ <p>通过 <code>setRadius()</code> 方法调整模糊效果强度：</p>
70
+ <table>
71
+ <thead>
72
+ <tr>
73
+ <th style="text-align:left">Parameter</th>
74
+ <th style="text-align:left">Type</th>
75
+ <th style="text-align:left">Default</th>
76
+ <th style="text-align:left">Range</th>
77
+ <th style="text-align:left">Description</th>
78
+ </tr>
79
+ </thead>
80
+ <tbody>
81
+ <tr>
82
+ <td style="text-align:left"><code>radius</code></td>
83
+ <td style="text-align:left"><code>number</code></td>
84
+ <td style="text-align:left"><code>4.0</code></td>
85
+ <td style="text-align:left"><code>0 ~ 8</code></td>
86
+ <td style="text-align:left">采样半径（像素），值越大模糊越明显</td>
87
+ </tr>
88
+ <tr>
89
+ <td style="text-align:left"><code>sigma</code></td>
90
+ <td style="text-align:left"><code>number</code></td>
91
+ <td style="text-align:left"><code>4.0</code></td>
92
+ <td style="text-align:left"><code>0.1 ~ 10</code></td>
93
+ <td style="text-align:left">高斯核标准差，控制模糊的柔和度</td>
94
+ </tr>
95
+ </tbody>
96
+ </table>
97
+ <blockquote>
98
+ <p>注意：当前实现中 <code>sigma</code> 固定为 4.0，仅 <code>radius</code> 可动态调整。如需修改 <code>sigma</code>，需直接访问 <code>material.uniforms.sigma.value</code>。</p>
99
+ </blockquote>
100
+ <h2 id="instance-methods" class="tsd-anchor-link">Instance Methods<a href="#instance-methods" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
101
+ <h3 id="" class="tsd-anchor-link"><code>constructor(camera: Camera)</code></h3>
102
+ <p>初始化高斯模糊通道，需传入相机实例以获取分辨率信息。</p>
103
+ <h3 id="-1" class="tsd-anchor-link"><code>setRadius(radius: number)</code><a href="#-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
104
+ <p>动态调整模糊半径。</p>
105
+ <ul>
106
+ <li><strong>参数</strong>: <code>radius</code> - 采样半径，建议范围 1 ~ 8</li>
107
+ <li><strong>默认值</strong>: 4.0</li>
108
+ <li><strong>影响</strong>: 较大的 radius 会增加 GPU 计算成本</li>
109
+ </ul>
110
+ <h3 id="-2" class="tsd-anchor-link"><code>render(...)</code><a href="#-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
111
+ <p>由 EffectComposer 在每一帧自动调用，用于执行模糊处理。通常不需要手动调用。</p>
112
+ <h3 id="-3" class="tsd-anchor-link"><code>dispose()</code><a href="#-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
113
+ <p>释放 Shader Material 和 FullScreenQuad 资源。在销毁 Pass 时必须调用，以防内存泄漏。</p>
114
+ <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>
115
+ <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>
116
+ <pre><code class="ts"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">GaussianBlurPass</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;../../lib/five/renderer/postprocessing&#39;</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">// 使用 Five 的 addPass() 方法添加后处理通道</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">blurPass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">GaussianBlurPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">blurPass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 动画循环由 Five 内部管理</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">animate</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-5">requestAnimationFrame</span><span class="hl-1">(</span><span class="hl-6">animate</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-5">render</span><span class="hl-1">();</span><br/><span class="hl-1">}</span><br/><span class="hl-5">animate</span><span class="hl-1">();</span>
117
+ </code><button type="button">Copy</button></pre>
118
+
119
+ <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>
120
+ <h4 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></h4>
121
+ <pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">blurPass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">GaussianBlurPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">blurPass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 响应用户输入调整模糊半径</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">&#39;keydown&#39;</span><span class="hl-1">, (</span><span class="hl-6">e</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">e</span><span class="hl-1">.</span><span class="hl-6">key</span><span class="hl-1"> === </span><span class="hl-9">&#39;+&#39;</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">current</span><span class="hl-1"> = </span><span class="hl-6">blurPass</span><span class="hl-1">[</span><span class="hl-9">&#39;material&#39;</span><span class="hl-1">].</span><span class="hl-6">uniforms</span><span class="hl-1">.</span><span class="hl-6">radius</span><span class="hl-1">.</span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">blurPass</span><span class="hl-1">.</span><span class="hl-5">setRadius</span><span class="hl-1">(</span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">min</span><span class="hl-1">(</span><span class="hl-11">8</span><span class="hl-1">, </span><span class="hl-6">current</span><span class="hl-1"> + </span><span class="hl-11">0.5</span><span class="hl-1">));</span><br/><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">e</span><span class="hl-1">.</span><span class="hl-6">key</span><span class="hl-1"> === </span><span class="hl-9">&#39;-&#39;</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">current</span><span class="hl-1"> = </span><span class="hl-6">blurPass</span><span class="hl-1">[</span><span class="hl-9">&#39;material&#39;</span><span class="hl-1">].</span><span class="hl-6">uniforms</span><span class="hl-1">.</span><span class="hl-6">radius</span><span class="hl-1">.</span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">blurPass</span><span class="hl-1">.</span><span class="hl-5">setRadius</span><span class="hl-1">(</span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">max</span><span class="hl-1">(</span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-6">current</span><span class="hl-1"> - </span><span class="hl-11">0.5</span><span class="hl-1">));</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
122
+ </code><button type="button">Copy</button></pre>
123
+
124
+ <h4 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></h4>
125
+ <pre><code class="ts"><span class="hl-8">// Five 的 addPass() 会自动管理后处理链</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">blurPass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">GaussianBlurPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">blurPass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 可添加其他后处理通道</span><br/><span class="hl-8">// five.addPass(otherPass);</span>
126
+ </code><button type="button">Copy</button></pre>
127
+
128
+ <h4 id="修改高斯标准差-advanced" class="tsd-anchor-link">修改高斯标准差 (Advanced)<a href="#修改高斯标准差-advanced" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4>
129
+ <pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">blurPass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">GaussianBlurPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">blurPass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 获取 Material 并直接修改 sigma</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">sigmaMaterial</span><span class="hl-1"> = </span><span class="hl-6">blurPass</span><span class="hl-1">[</span><span class="hl-9">&#39;material&#39;</span><span class="hl-1">] </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">ShaderMaterial</span><span class="hl-1">;</span><br/><span class="hl-6">sigmaMaterial</span><span class="hl-1">.</span><span class="hl-6">uniforms</span><span class="hl-1">.</span><span class="hl-6">sigma</span><span class="hl-1">.</span><span class="hl-6">value</span><span class="hl-1"> = </span><span class="hl-11">2.0</span><span class="hl-1">; </span><span class="hl-8">// 调整标准差（更强锐利）</span>
130
+ </code><button type="button">Copy</button></pre>
131
+
132
+ <h2 id="debugging" class="tsd-anchor-link">Debugging<a href="#debugging" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
133
+ <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>
134
+ <ul>
135
+ <li>确保 <code>renderToScreen</code> 为 <code>true</code>，或后续通道正确读取该通道的输出。</li>
136
+ <li>确保传入的 <code>camera</code> 对象有有效的 <code>resolution</code> 属性。</li>
137
+ </ul>
138
+ <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>
139
+ <ul>
140
+ <li>大 <code>radius</code> 值会导致 GPU 开销增加。建议在性能受限的设备上限制最大 radius（如 ≤ 6）。</li>
141
+ <li>考虑在低端设备上禁用该通道（设置 <code>blurPass.enabled = false</code>）。</li>
142
+ </ul>
143
+ <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>
144
+ <pre><code class="ts"><span class="hl-8">// 监控当前模糊参数</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">blurPass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">GaussianBlurPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&#39;Blur Radius:&#39;</span><span class="hl-1">, </span><span class="hl-6">blurPass</span><span class="hl-1">[</span><span class="hl-9">&#39;material&#39;</span><span class="hl-1">].</span><span class="hl-6">uniforms</span><span class="hl-1">.</span><span class="hl-6">radius</span><span class="hl-1">.</span><span class="hl-6">value</span><span class="hl-1">);</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">&#39;Blur Sigma:&#39;</span><span class="hl-1">, </span><span class="hl-6">blurPass</span><span class="hl-1">[</span><span class="hl-9">&#39;material&#39;</span><span class="hl-1">].</span><span class="hl-6">uniforms</span><span class="hl-1">.</span><span class="hl-6">sigma</span><span class="hl-1">.</span><span class="hl-6">value</span><span class="hl-1">);</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">&#39;Resolution:&#39;</span><span class="hl-1">, </span><span class="hl-6">blurPass</span><span class="hl-1">[</span><span class="hl-9">&#39;material&#39;</span><span class="hl-1">].</span><span class="hl-6">uniforms</span><span class="hl-1">.</span><span class="hl-6">resolution</span><span class="hl-1">.</span><span class="hl-6">value</span><span class="hl-1">);</span>
145
+ </code><button type="button">Copy</button></pre>
146
+
147
+ <h2 id="common-pitfalls" class="tsd-anchor-link">Common Pitfalls<a href="#common-pitfalls" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
148
+ <ol>
149
+ <li>
150
+ <p><strong>忘记调用 dispose()</strong></p>
151
+ <ul>
152
+ <li>销毁 Pass 时，必须调用 <code>blurPass.dispose()</code> 释放 Shader 资源，否则会导致内存泄漏。</li>
153
+ </ul>
154
+ </li>
155
+ <li>
156
+ <p><strong>分辨率变化未更新</strong></p>
157
+ <ul>
158
+ <li>GaussianBlurPass 会自动从 <code>camera.resolution</code> 同步分辨率，无需手动处理。但如果使用自定义相机，需确保其 <code>resolution</code> 属性始终有效。</li>
159
+ </ul>
160
+ </li>
161
+ <li>
162
+ <p><strong>设置过大的 radius</strong></p>
163
+ <ul>
164
+ <li>超过 8 的 radius 值虽然技术上可行，但会显著增加计算成本。建议不超过 8。</li>
165
+ </ul>
166
+ </li>
167
+ <li>
168
+ <p><strong>与其他 Pass 的 needsSwap 冲突</strong></p>
169
+ <ul>
170
+ <li>如果通道链中多个 Pass 设置了不同的 <code>needsSwap</code> 值，可能导致缓冲区错乱。确保通道顺序和 swap 设置一致。</li>
171
+ </ul>
172
+ </li>
173
+ </ol>
174
+ <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>
175
+ <ul>
176
+ <li><a href="features_postprocessing.html">Postprocessing</a>: 后处理通用概念与 EffectComposer 使用指南。</li>
177
+ </ul>
178
+ <hr>
179
+ <pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">postprocessing</span><span class="hl-1">, </span><span class="hl-2">shader</span><span class="hl-1">, </span><span class="hl-2">effect</span><span class="hl-1">, </span><span class="hl-2">blur</span><span class="hl-1">, </span><span class="hl-2">pass</span><span class="hl-1">, </span><span class="hl-2">rendering</span><span class="hl-1">]</span>
180
+ </code><button type="button">Copy</button></pre>
181
+
182
+ </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#gaussian-blur-pass-高斯模糊通道"><span>Gaussian <wbr/>Blur <wbr/>Pass (高斯模糊通道)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><ul><li><a href="#shader-uniforms-内部-shader-参数"><span>Shader <wbr/>Uniforms (内部 <wbr/>Shader 参数)</span></a></li></ul></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#后处理通道-post-processing-pass"><span>后处理通道 (<wbr/>Post-<wbr/>Processing <wbr/>Pass)</span></a></li><li><a href="#高斯模糊原理"><span>高斯模糊原理</span></a></li><li><a href="#相机依赖"><span>相机依赖</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#常用参数"><span>常用参数</span></a></li></ul></li><li><a href="#instance-methods"><span>Instance <wbr/>Methods</span></a></li><li><ul><li><a href="#"><span></span></a></li><li><a href="#-1"><span></span></a></li><li><a href="#-2"><span></span></a></li><li><a href="#-3"><span></span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#进阶用法-advanced-usage"><span>进阶用法 (<wbr/>Advanced <wbr/>Usage)</span></a></li><li><ul><li><a href="#动态调整模糊强度"><span>动态调整模糊强度</span></a></li><li><a href="#多通道组合（模糊-其他效果）"><span>多通道组合（模糊 + 其他效果）</span></a></li><li><a href="#修改高斯标准差-advanced"><span>修改高斯标准差 (<wbr/>Advanced)</span></a></li></ul></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><ul><li><a href="#检查模糊效果是否生效"><span>检查模糊效果是否生效</span></a></li><li><a href="#性能优化建议"><span>性能优化建议</span></a></li><li><a href="#可视化调试"><span>可视化调试</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>