@realsee/five 6.8.0 → 6.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (216) hide show
  1. package/ai_guides/features/flowing-light-2d-pass.md +64 -10
  2. package/ai_guides/features/flowing-light-3d-pass.md +64 -10
  3. package/docs/assets/hierarchy.js +1 -1
  4. package/docs/assets/navigation.js +1 -1
  5. package/docs/assets/search.js +1 -1
  6. package/docs/classes/five.AdaptiveLuminancePass.html +1 -1
  7. package/docs/classes/five.BoundingMesh.html +1 -1
  8. package/docs/classes/five.Camera.html +1 -1
  9. package/docs/classes/five.EyeDomeLightingPass.html +1 -1
  10. package/docs/classes/five.Five.html +1 -1
  11. package/docs/classes/five.FivePass.html +1 -1
  12. package/docs/classes/five.InternalWebGLRenderer.html +1 -1
  13. package/docs/classes/five.Model.html +1 -1
  14. package/docs/classes/five.ModelScene.html +1 -1
  15. package/docs/classes/five.NetworkSubscribe.html +1 -1
  16. package/docs/classes/five.PBMContainer.html +1 -1
  17. package/docs/classes/five.PBMCustomShader.html +1 -1
  18. package/docs/classes/five.PBMGSObject.html +1 -1
  19. package/docs/classes/five.PBMGroup.html +1 -1
  20. package/docs/classes/five.PBMMesh.html +1 -1
  21. package/docs/classes/five.PBMMeshMaterial.html +1 -1
  22. package/docs/classes/five.PBMPanoFilter.html +1 -1
  23. package/docs/classes/five.PBMPointCloud.html +1 -1
  24. package/docs/classes/five.PBMPointCloudMaterial.html +1 -1
  25. package/docs/classes/five.PBMSkinnedMesh.html +1 -1
  26. package/docs/classes/five.PBMUpdateable.html +1 -1
  27. package/docs/classes/five.PanoCircleMesh.html +1 -1
  28. package/docs/classes/five.PanoCircleMeshCustom.html +1 -1
  29. package/docs/classes/five.PanoCircleMeshSolid.html +1 -1
  30. package/docs/classes/five.Parameter.html +1 -1
  31. package/docs/classes/five.Scene.html +1 -1
  32. package/docs/classes/five.Subscribe.html +1 -1
  33. package/docs/classes/five.Tile3D.html +1 -1
  34. package/docs/classes/five.TileNode.html +1 -1
  35. package/docs/classes/five.TrajectoryNode.html +1 -1
  36. package/docs/classes/five.WorkResolvedObserver.html +1 -1
  37. package/docs/classes/gltf-loader.DDSLoader.html +1 -1
  38. package/docs/classes/gltf-loader.DRACOLoader.html +1 -1
  39. package/docs/classes/gltf-loader.GLTFLoader.html +1 -1
  40. package/docs/classes/gltf-loader.GLTFObject.html +1 -1
  41. package/docs/classes/gltf-loader.THREEGLTFLoader.html +1 -1
  42. package/docs/classes/line.Line.html +1 -1
  43. package/docs/classes/line.LineGeometry.html +1 -1
  44. package/docs/classes/line.LineMaterial.html +1 -1
  45. package/docs/classes/line.LineSegmentsGeometry.html +1 -1
  46. package/docs/classes/line.THREE_Line2.html +1 -1
  47. package/docs/classes/line.THREE_LineSegments2.html +1 -1
  48. package/docs/classes/plugins.BasePlugin.Controller.html +1 -1
  49. package/docs/classes/plugins.CSS2DObject.html +10 -0
  50. package/docs/classes/plugins.CSS2DRenderer.html +7 -0
  51. package/docs/classes/plugins.CSS3DObject.html +1 -1
  52. package/docs/classes/plugins.CSS3DSprite.html +1 -1
  53. package/docs/classes/plugins.Object3DHelperController.html +1 -1
  54. package/docs/classes/plugins.RoundedBoxGeometry.html +1 -1
  55. package/docs/classes/sticker.Sticker.html +1 -1
  56. package/docs/classes/vfx.Airflow.html +1 -1
  57. package/docs/classes/vfx.Flame.html +1 -1
  58. package/docs/classes/vfx.Particle.html +1 -1
  59. package/docs/classes/vfx.ParticleGPU.html +1 -1
  60. package/docs/classes/vfx.SpotLight.html +1 -1
  61. package/docs/documents/features_flowing-light-2d-pass.html +28 -15
  62. package/docs/documents/features_flowing-light-3d-pass.html +27 -14
  63. package/docs/functions/plugins.CSS2DPlugin.html +1 -0
  64. package/docs/functions/react.getPlugin.html +2 -0
  65. package/docs/functions/react.setPlugin.html +2 -0
  66. package/docs/functions/react.useFivePlugin.html +8 -0
  67. package/docs/functions/react.withFive.html +1 -1
  68. package/docs/hierarchy.html +1 -1
  69. package/docs/interfaces/five.AddableObject.html +1 -1
  70. package/docs/interfaces/five.AjaxOptions.html +1 -1
  71. package/docs/interfaces/five.BaseEvent.html +1 -1
  72. package/docs/interfaces/five.BaseExtendableEvent.html +1 -1
  73. package/docs/interfaces/five.EventCallback.html +1 -1
  74. package/docs/interfaces/five.GestureEvent.html +1 -1
  75. package/docs/interfaces/five.ImageOptions.html +1 -1
  76. package/docs/interfaces/five.IntersectEvent.html +1 -1
  77. package/docs/interfaces/five.IntersectMesh.html +1 -1
  78. package/docs/interfaces/five.IntersectMeshInterface.html +1 -1
  79. package/docs/interfaces/five.Intersection.html +1 -1
  80. package/docs/interfaces/five.LooseWorkWithExtrinsics.html +1 -1
  81. package/docs/interfaces/five.ModeChangeEvent.html +1 -1
  82. package/docs/interfaces/five.ModelControllerCustomInitArgs.html +1 -1
  83. package/docs/interfaces/five.ModelEvent.html +1 -1
  84. package/docs/interfaces/five.ModelSceneEvent.html +1 -1
  85. package/docs/interfaces/five.ModelTileEvent.html +1 -1
  86. package/docs/interfaces/five.MovePanoOptions.html +1 -1
  87. package/docs/interfaces/five.NetworkAbortError.html +1 -1
  88. package/docs/interfaces/five.NetworkFirbiddenError.html +1 -1
  89. package/docs/interfaces/five.NetworkOptions.html +1 -1
  90. package/docs/interfaces/five.NetworkProxyError.html +1 -1
  91. package/docs/interfaces/five.NetworkResourceEvent.html +1 -1
  92. package/docs/interfaces/five.NetworkResponseError.html +1 -1
  93. package/docs/interfaces/five.NetworkTimeoutError.html +1 -1
  94. package/docs/interfaces/five.ObjectEvent.html +1 -1
  95. package/docs/interfaces/five.PBMMaterial.html +1 -1
  96. package/docs/interfaces/five.PBMMeshMaterialParameters.html +1 -1
  97. package/docs/interfaces/five.PBMPointCloudMaterialParameters.html +1 -1
  98. package/docs/interfaces/five.PanoCircleMeshInterface.html +1 -1
  99. package/docs/interfaces/five.PanoEvent.html +1 -1
  100. package/docs/interfaces/five.PanoPrepareEvent.html +1 -1
  101. package/docs/interfaces/five.PanoTextureEvent.html +1 -1
  102. package/docs/interfaces/five.PanoramaControllerCustomInitArgs.html +1 -1
  103. package/docs/interfaces/five.PanoramaLikeControllerCustomInitArgs.html +1 -1
  104. package/docs/interfaces/five.ParameterMaterialValue.html +1 -1
  105. package/docs/interfaces/five.ParameterTilesetValue.html +1 -1
  106. package/docs/interfaces/five.ParameterValue.html +1 -1
  107. package/docs/interfaces/five.Pose.html +1 -1
  108. package/docs/interfaces/five.RenderEvent.html +1 -1
  109. package/docs/interfaces/five.ResolvedParameterValue.html +1 -1
  110. package/docs/interfaces/five.State.html +1 -1
  111. package/docs/interfaces/five.StateEvent.html +1 -1
  112. package/docs/interfaces/five.TextureOptions.html +1 -1
  113. package/docs/interfaces/five.TopviewControllerCustomInitArgs.html +1 -1
  114. package/docs/interfaces/five.VRPanoramaControllerCustomInitArgs.html +1 -1
  115. package/docs/interfaces/five.ViewLayer.html +1 -1
  116. package/docs/interfaces/five.WorkCubeImage.html +1 -1
  117. package/docs/interfaces/five.WorkImage.html +1 -1
  118. package/docs/interfaces/five.WorkObserver.html +1 -1
  119. package/docs/interfaces/five.WorkObserverProto.html +1 -1
  120. package/docs/interfaces/five.WorkTile.html +1 -1
  121. package/docs/interfaces/five.WorksEvent.html +1 -1
  122. package/docs/interfaces/five.XRControllerEvent.html +1 -1
  123. package/docs/interfaces/five.XRGestureEvent.html +1 -1
  124. package/docs/interfaces/five.XRPanoramaControllerCustomInitArgs.html +1 -1
  125. package/docs/interfaces/five.XRSessionEvent.html +1 -1
  126. package/docs/interfaces/plugins.BackgroundPluginController.html +1 -1
  127. package/docs/interfaces/plugins.BackgroundPluginType.EventMap.html +1 -1
  128. package/docs/interfaces/plugins.BasePlugin.State.html +1 -1
  129. package/docs/interfaces/plugins.CSS2DPluginController.html +49 -0
  130. package/docs/interfaces/plugins.CSS2DPluginType.Config.html +2 -0
  131. package/docs/interfaces/plugins.CSS2DPluginType.CreateCSS2DObjectType.html +8 -0
  132. package/docs/interfaces/plugins.CSS2DPluginType.EventMap.html +10 -0
  133. package/docs/interfaces/plugins.CSS2DPluginType.Params.html +4 -0
  134. package/docs/interfaces/plugins.CSS2DPluginType.State.html +8 -0
  135. package/docs/interfaces/plugins.CSS2DRendererParameters.html +2 -0
  136. package/docs/interfaces/plugins.CSS3DPluginController.html +12 -12
  137. package/docs/interfaces/plugins.CSS3DPluginType.EventMap.html +1 -1
  138. package/docs/interfaces/plugins.CSS3DPluginType.State.html +1 -1
  139. package/docs/interfaces/plugins.DynamicPathLinePluginController.html +1 -1
  140. package/docs/interfaces/plugins.DynamicPathLinePluginType.EventMap.html +1 -1
  141. package/docs/interfaces/plugins.DynamicPathLinePluginType.State.html +1 -1
  142. package/docs/interfaces/plugins.GaussianSplattingEntranceAnimationController.html +1 -1
  143. package/docs/interfaces/plugins.GaussianSplattingEntranceAnimationPluginType.EventMap.html +1 -1
  144. package/docs/interfaces/plugins.GaussianSplattingEntranceAnimationPluginType.State.html +1 -1
  145. package/docs/interfaces/plugins.ItemMaskController.html +1 -1
  146. package/docs/interfaces/plugins.ItemMaskPluginType.EventMap.html +1 -1
  147. package/docs/interfaces/plugins.ItemMaskPluginType.State.html +1 -1
  148. package/docs/interfaces/plugins.Object3DHelperPluginType.BaseController.html +1 -1
  149. package/docs/interfaces/plugins.Object3DHelperPluginType.BaseHelper.html +1 -1
  150. package/docs/interfaces/plugins.Object3DHelperPluginType.BoundingBoxController.html +1 -1
  151. package/docs/interfaces/plugins.Object3DHelperPluginType.MoveController.html +1 -1
  152. package/docs/interfaces/plugins.Object3DHelperPluginType.MoveHelperAbstract.html +1 -1
  153. package/docs/interfaces/plugins.Object3DHelperPluginType.RotateController.html +1 -1
  154. package/docs/interfaces/plugins.Object3DHelperPluginType.RotateHelperAbstract.html +1 -1
  155. package/docs/interfaces/plugins.OrientationPluginController.html +1 -1
  156. package/docs/interfaces/plugins.OrientationPluginType.EventMap.html +1 -1
  157. package/docs/interfaces/plugins.OrientationPluginType.State.html +1 -1
  158. package/docs/interfaces/plugins.PanoAnimeController.html +1 -1
  159. package/docs/interfaces/plugins.PanoAnimePluginType.EventMap.html +1 -1
  160. package/docs/interfaces/plugins.PanoAnimePluginType.State.html +1 -1
  161. package/docs/interfaces/plugins.PluginTemplateType.EventMap.html +1 -1
  162. package/docs/interfaces/plugins.PluginTemplateType.State.html +1 -1
  163. package/docs/interfaces/plugins.TrajectoryController.html +1 -1
  164. package/docs/interfaces/react.FiveAppProps.html +11 -0
  165. package/docs/interfaces/react.FiveInjectionTypes.html +1 -1
  166. package/docs/modules/plugins.CSS2DPluginType.html +1 -0
  167. package/docs/modules/plugins.html +1 -1
  168. package/docs/modules/react.html +1 -1
  169. package/docs/types/five.ParseOptions.html +1 -1
  170. package/docs/types/plugins.BasePlugin.EventMap.html +1 -1
  171. package/docs/types/plugins.CSS2DPluginType.PluginData.html +1 -0
  172. package/docs/types/plugins.CSS2DPluginType.ServerData.html +1 -0
  173. package/docs/variables/react.FiveApp.html +3 -0
  174. package/docs/variables/react.FiveAutoCanvas.html +3 -0
  175. package/five/index.js +5 -5
  176. package/five/index.mjs +65 -65
  177. package/five/renderer/postprocessing/passes/flowing-light-2d-pass.d.ts +6 -1
  178. package/five/renderer/postprocessing/passes/flowing-light-3d-pass.d.ts +3 -1
  179. package/gltf-loader/index.js +3 -3
  180. package/gltf-loader/index.mjs +3 -3
  181. package/line/index.js +3 -3
  182. package/line/index.mjs +3 -3
  183. package/package.json +1 -1
  184. package/plugins/CSS2DPlugin/Controller.d.ts +59 -0
  185. package/plugins/CSS2DPlugin/index.d.ts +5 -0
  186. package/plugins/CSS2DPlugin/typing.d.ts +30 -0
  187. package/plugins/index.d.ts +2 -0
  188. package/plugins/index.js +24 -4
  189. package/plugins/index.mjs +557 -393
  190. package/plugins/thirdParty/CSS2DRenderer.d.ts +37 -0
  191. package/react/autoCanvas.d.ts +9 -0
  192. package/react/fiveApp.d.ts +22 -0
  193. package/react/hooks/useFivePlugin.d.ts +26 -0
  194. package/react/index.d.ts +4 -0
  195. package/react/index.js +3 -3
  196. package/react/index.mjs +291 -175
  197. package/react/withFive.d.ts +1 -1
  198. package/shader-lib/index.js +2 -2
  199. package/shader-lib/index.mjs +2 -2
  200. package/sticker/index.js +3 -3
  201. package/sticker/index.mjs +3 -3
  202. package/umd/five-gltf-loader.js +3 -3
  203. package/umd/five-line.js +3 -3
  204. package/umd/five-plugins.js +24 -4
  205. package/umd/five-react.js +3 -3
  206. package/umd/five-shader-lib.js +2 -2
  207. package/umd/five-sticker.js +3 -3
  208. package/umd/five-vfx.js +2 -2
  209. package/umd/five-vue.js +2 -2
  210. package/umd/five.js +5 -5
  211. package/vfx/index.js +2 -2
  212. package/vfx/index.mjs +2 -2
  213. package/vue/index.js +2 -2
  214. package/vue/index.mjs +2 -2
  215. package/work-downloader/index.js +2 -2
  216. package/work-downloader/index.mjs +2 -2
@@ -11,7 +11,7 @@
11
11
  <p><strong>Definition</strong>: <a href="../../five/renderer/postprocessing/passes/flowing-light-3d-pass.d.ts">FlowingLight3DPass</a></p>
12
12
  </blockquote>
13
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">id</span><span class="hl-1">?: </span><span class="hl-7">string</span><span class="hl-1">; </span><span class="hl-8">// 可选的唯一标识符,不传则自动生成 UUID</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><span class="hl-6">delay</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">lineWidth</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">tailLengthRatio</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// 尾巴长度比例(0-1),默认 0.2</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-8">// 修改单条线的参数(通过 id)</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">setLine</span><span class="hl-1">(</span><span class="hl-6">params</span><span class="hl-1">: { </span><span class="hl-6">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1"> } &amp; </span><span class="hl-7">Partial</span><span class="hl-1">&lt;</span><span class="hl-7">Omit</span><span class="hl-1">&lt;</span><span class="hl-7">Line</span><span class="hl-1">, </span><span class="hl-9">&#39;id&#39;</span><span class="hl-1">&gt;&gt;): </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>
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">id</span><span class="hl-1">?: </span><span class="hl-7">string</span><span class="hl-1">; </span><span class="hl-8">// 可选的唯一标识符,不传则自动生成 UUID</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><span class="hl-6">startTime</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">lineWidth</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">tailLengthRatio</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">; </span><span class="hl-8">// 尾巴长度比例(0-1),默认 0.2</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-8">// 追加一条或多条线,返回生成的 id 数组</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">addLine</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">string</span><span class="hl-1">[];</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 按 id 移除一条或多条线,返回实际移除的数量</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">removeLine</span><span class="hl-1">(...</span><span class="hl-6">ids</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">[]): </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 修改单条线的参数(通过 id),支持部分更新</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">setLine</span><span class="hl-1">(</span><span class="hl-6">params</span><span class="hl-1">: { </span><span class="hl-6">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1"> } &amp; </span><span class="hl-7">Partial</span><span class="hl-1">&lt;</span><span class="hl-7">Omit</span><span class="hl-1">&lt;</span><span class="hl-7">Line</span><span class="hl-1">, </span><span class="hl-9">&#39;id&#39;</span><span class="hl-1">&gt;&gt;): </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
15
  </code><button type="button">Copy</button></pre>
16
16
 
17
17
  <h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -88,11 +88,11 @@
88
88
  <td style="text-align:left">动画周期(毫秒)。光头完成一个循环所需时长。</td>
89
89
  </tr>
90
90
  <tr>
91
- <td style="text-align:left"><code>delay</code></td>
91
+ <td style="text-align:left"><code>startTime</code></td>
92
92
  <td style="text-align:left"><code>number</code></td>
93
93
  <td style="text-align:left"></td>
94
- <td style="text-align:left"><code>0</code></td>
95
- <td style="text-align:left">动画延迟(毫秒)。延迟后才开始播放动画。</td>
94
+ <td style="text-align:left">当前内部时间</td>
95
+ <td style="text-align:left">线条开始时间(毫秒)。控制线条动画从何时开始播放,可用于多条线错开起始时间。</td>
96
96
  </tr>
97
97
  <tr>
98
98
  <td style="text-align:left"><code>lineWidth</code></td>
@@ -117,13 +117,26 @@
117
117
  <h3 id="_" class="tsd-anchor-link"><code>constructor(camera: Camera)</code><a href="#_" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
118
118
  <p>初始化 Pass,需传入相机以获取投影矩阵和视图矩阵。</p>
119
119
  <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>
120
- <p>更新要渲染的路径列表。支持运行时动态更改。</p>
121
- <p><strong>自动生成 ID</strong>: 如果 line 没有提供 <code>id</code>,会自动生成 UUID。</p>
120
+ <p>批量设置路径列表,替换所有现有线条。支持运行时动态更改。</p>
121
+ <p><strong>自动生成 ID</strong>: 如果 line 没有提供 <code>id</code>,会自动生成 UUID
122
+ <strong>自动设置 startTime</strong>: 如果 line 没有提供 <code>startTime</code>,会使用当前内部时间。</p>
122
123
  <p><strong>示例</strong>:</p>
123
- <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">id:</span><span class="hl-1"> </span><span class="hl-9">&#39;my-3d-line&#39;</span><span class="hl-1">, </span><span class="hl-8">// 可选,不传则自动生成</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><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">4.0</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>
124
+ <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">id:</span><span class="hl-1"> </span><span class="hl-9">&#39;my-3d-line&#39;</span><span class="hl-1">, </span><span class="hl-8">// 可选,不传则自动生成</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><span class="hl-6">startTime:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">4.0</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>
124
125
  </code><button type="button">Copy</button></pre>
125
126
 
126
- <h3 id="_-2" class="tsd-anchor-link"><code>setLine(params: { id: string } &amp; Partial&lt;Omit&lt;Line, 'id'&gt;&gt;)</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>
127
+ <h3 id="_-2" class="tsd-anchor-link"><code>addLine(...lines: Line[]): string[]</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>
128
+ <p>追加一条或多条线到现有列表中,不影响已有线条。返回新增线条的 id 数组。</p>
129
+ <p><strong>示例</strong>:</p>
130
+ <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">id1</span><span class="hl-1">] = </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">addLine</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">10</span><span class="hl-1">, </span><span class="hl-11">5</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">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/><br/><span class="hl-8">// 追加多条线</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ids</span><span class="hl-1"> = </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">addLine</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-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">8</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">1500</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-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">15</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">1800</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">);</span><br/><span class="hl-8">// ids = [&#39;uuid-1&#39;, &#39;uuid-2&#39;]</span>
131
+ </code><button type="button">Copy</button></pre>
132
+
133
+ <h3 id="_-3" class="tsd-anchor-link"><code>removeLine(...ids: string[]): number</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>
134
+ <p>按 id 移除一条或多条线,返回实际移除的数量。如果 id 不存在,会在控制台输出警告。</p>
135
+ <p><strong>示例</strong>:</p>
136
+ <pre><code class="ts"><span class="hl-8">// 移除单条线</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">removeLine</span><span class="hl-1">(</span><span class="hl-6">id1</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 移除多条线</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">removedCount</span><span class="hl-1"> = </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">removeLine</span><span class="hl-1">(</span><span class="hl-6">id1</span><span class="hl-1">, </span><span class="hl-6">id2</span><span class="hl-1">, </span><span class="hl-6">id3</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">`移除了 </span><span class="hl-3">${</span><span class="hl-6">removedCount</span><span class="hl-3">}</span><span class="hl-9"> 条线`</span><span class="hl-1">);</span>
137
+ </code><button type="button">Copy</button></pre>
138
+
139
+ <h3 id="_-4" class="tsd-anchor-link"><code>setLine(params: { id: string } &amp; Partial&lt;Omit&lt;Line, 'id'&gt;&gt;)</code><a href="#_-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
127
140
  <p>通过 <code>id</code> 修改单条线的参数。支持部分更新,只更新传入的字段。</p>
128
141
  <p><strong>性能优化</strong>:</p>
129
142
  <ul>
@@ -140,9 +153,9 @@
140
153
  <li>动画时间(<code>uTime</code>)不会被重置,流光继续从当前位置播放</li>
141
154
  <li>建议修改 <code>points</code> 时同时更新 <code>totalLength</code></li>
142
155
  </ul>
143
- <h3 id="_-3" class="tsd-anchor-link"><code>render(...)</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>
156
+ <h3 id="_-5" class="tsd-anchor-link"><code>render(...)</code><a href="#_-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
144
157
  <p>由 EffectComposer 自动调用,无需手动调用。自动同步相机矩阵和渲染目标尺寸。</p>
145
- <h3 id="_-4" class="tsd-anchor-link"><code>dispose()</code><a href="#_-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
158
+ <h3 id="_-6" class="tsd-anchor-link"><code>dispose()</code><a href="#_-6" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
146
159
  <p>释放 InstancedMesh、着色材质和渲染目标资源,销毁 Pass 时必须调用。</p>
147
160
  <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>
148
161
  <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>
@@ -150,7 +163,7 @@
150
163
  </code><button type="button">Copy</button></pre>
151
164
 
152
165
  <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>
153
- <pre><code class="typescript"><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><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">3.0</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><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">4.0</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><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-11">1000</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">2.5</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>
166
+ <pre><code class="typescript"><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><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">3.0</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><span class="hl-6">startTime:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">4.0</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><span class="hl-6">startTime:</span><span class="hl-1"> </span><span class="hl-11">1000</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">2.5</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>
154
167
  </code><button type="button">Copy</button></pre>
155
168
 
156
169
  <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>
@@ -162,7 +175,7 @@
162
175
  </code><button type="button">Copy</button></pre>
163
176
 
164
177
  <h3 id="高-dpr-场景优化" class="tsd-anchor-link">高 DPR 场景优化<a href="#高-dpr-场景优化" 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>
165
- <pre><code class="typescript"><span class="hl-8">// InstancedMesh 实现自动优化高 DPR 性能</span><br/><span class="hl-8">// 在 DPR=2 的 Retina 屏幕上,性能显著优于全屏着色器方案</span><br/><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-8">// 多条路径在高 DPR 下仍能保持流畅</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">paths</span><span class="hl-1"> = </span><span class="hl-6">Array</span><span class="hl-1">.</span><span class="hl-5">from</span><span class="hl-1">({ </span><span class="hl-6">length:</span><span class="hl-1"> </span><span class="hl-11">10</span><span class="hl-1"> }, (</span><span class="hl-6">_</span><span class="hl-1">, </span><span class="hl-6">i</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> ({</span><br/><span class="hl-1"> </span><span class="hl-6">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-6">i</span><span class="hl-1"> * </span><span class="hl-11">2</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-6">i</span><span class="hl-1"> * </span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-11">5</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">7</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-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</span><span class="hl-1">() * </span><span class="hl-11">0xffffff</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><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">100</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">200</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">3.0</span><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>
178
+ <pre><code class="typescript"><span class="hl-8">// InstancedMesh 实现自动优化高 DPR 性能</span><br/><span class="hl-8">// 在 DPR=2 的 Retina 屏幕上,性能显著优于全屏着色器方案</span><br/><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-8">// 多条路径在高 DPR 下仍能保持流畅</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">paths</span><span class="hl-1"> = </span><span class="hl-6">Array</span><span class="hl-1">.</span><span class="hl-5">from</span><span class="hl-1">({ </span><span class="hl-6">length:</span><span class="hl-1"> </span><span class="hl-11">10</span><span class="hl-1"> }, (</span><span class="hl-6">_</span><span class="hl-1">, </span><span class="hl-6">i</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> ({</span><br/><span class="hl-1"> </span><span class="hl-6">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-6">i</span><span class="hl-1"> * </span><span class="hl-11">2</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-6">i</span><span class="hl-1"> * </span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-11">5</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">7</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-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</span><span class="hl-1">() * </span><span class="hl-11">0xffffff</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><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">100</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">startTime:</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">200</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">3.0</span><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>
166
179
  </code><button type="button">Copy</button></pre>
167
180
 
168
181
  <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>
@@ -197,7 +210,7 @@
197
210
  <td>只更新 instanceColor attribute</td>
198
211
  </tr>
199
212
  <tr>
200
- <td>只修改 duration/delay</td>
213
+ <td>只修改 duration/startTime</td>
201
214
  <td>⚡️ 极快 (~100x)</td>
202
215
  <td>只更新 instanceMeta attribute</td>
203
216
  </tr>
@@ -246,4 +259,4 @@
246
259
  </ul>
247
260
  <hr>
248
261
  <p>tags: [流光, 光带, 空间轨迹, 模型表面, 特效, postprocessing, effect, flowing, light, pass, rendering, worldspace, projection, instanced, performance, 3d, world-space]</p>
249
- </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="#instancedmesh-实例化渲染-instanced-rendering"><span>Instanced<wbr/>Mesh 实例化渲染 (<wbr/>Instanced <wbr/>Rendering)</span></a></li><li><a href="#世界空间路径与投影-world-space-projection"><span>世界空间路径与投影 (<wbr/>World-<wbr/>space <wbr/>Projection)</span></a></li><li><a href="#头尾追逐动画-head-tail-chase-animation"><span>头尾追逐动画 (<wbr/>Head-<wbr/>Tail <wbr/>Chase <wbr/>Animation)</span></a></li><li><a href="#相机同步"><span>相机同步</span></a></li><li><a href="#dpr-处理"><span>DPR 处理</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><li><a href="#_-4"><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><li><a href="#高-dpr-场景优化"><span>高 <wbr/>DPR 场景优化</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><a href="#performance"><span>Performance</span></a></li><li><ul><li><a href="#与全屏着色器对比"><span>与全屏着色器对比</span></a></li><li><a href="#setline-性能优化"><span>set<wbr/>Line 性能优化</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>
262
+ </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="#instancedmesh-实例化渲染-instanced-rendering"><span>Instanced<wbr/>Mesh 实例化渲染 (<wbr/>Instanced <wbr/>Rendering)</span></a></li><li><a href="#世界空间路径与投影-world-space-projection"><span>世界空间路径与投影 (<wbr/>World-<wbr/>space <wbr/>Projection)</span></a></li><li><a href="#头尾追逐动画-head-tail-chase-animation"><span>头尾追逐动画 (<wbr/>Head-<wbr/>Tail <wbr/>Chase <wbr/>Animation)</span></a></li><li><a href="#相机同步"><span>相机同步</span></a></li><li><a href="#dpr-处理"><span>DPR 处理</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><li><a href="#_-4"><span></span></a></li><li><a href="#_-5"><span></span></a></li><li><a href="#_-6"><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><li><a href="#高-dpr-场景优化"><span>高 <wbr/>DPR 场景优化</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><a href="#performance"><span>Performance</span></a></li><li><ul><li><a href="#与全屏着色器对比"><span>与全屏着色器对比</span></a></li><li><a href="#setline-性能优化"><span>set<wbr/>Line 性能优化</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>
@@ -0,0 +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>CSS2DPlugin | 如视 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="../modules/plugins.html">plugins</a></li><li><a href="" aria-current="page">CSS2DPlugin</a></li></ul><h1>Function CSS2DPlugin</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="css2dplugin"><span class="tsd-kind-call-signature">CSS2DPlugin</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">five</span><span class="tsd-signature-symbol">:</span> <a href="../classes/five.Five.html" class="tsd-signature-type tsd-kind-class">Five</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">params</span><span class="tsd-signature-symbol">?:</span> <a href="../modules/plugins.CSS2DPluginType.html" class="tsd-signature-type tsd-kind-namespace">CSS2DPluginType</a><span class="tsd-signature-symbol">.</span><a href="../interfaces/plugins.CSS2DPluginType.Params.html" class="tsd-signature-type tsd-kind-interface">Params</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/plugins.CSS2DPluginController.html" class="tsd-signature-type tsd-kind-interface">CSS2DPluginController</a><a href="#css2dplugin" 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></div><div class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">five</span>: <a href="../classes/five.Five.html" class="tsd-signature-type tsd-kind-class">Five</a></span></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">params</span>: <a href="../modules/plugins.CSS2DPluginType.html" class="tsd-signature-type tsd-kind-namespace">CSS2DPluginType</a><span class="tsd-signature-symbol">.</span><a href="../interfaces/plugins.CSS2DPluginType.Params.html" class="tsd-signature-type tsd-kind-interface">Params</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../interfaces/plugins.CSS2DPluginController.html" class="tsd-signature-type tsd-kind-interface">CSS2DPluginController</a></h4><aside class="tsd-sources"><ul><li>Defined in lib/plugins/CSS2DPlugin/index.ts:5</li></ul></aside></div></li></ul></section></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></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>
@@ -0,0 +1,2 @@
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>getPlugin | 如视 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="../modules/react.html">react</a></li><li><a href="" aria-current="page">getPlugin</a></li></ul><h1>Function getPlugin</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="getplugin"><span class="tsd-kind-call-signature">getPlugin</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#getplugint">T</a> <span class="tsd-signature-symbol">=</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">workCode</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">pluginName</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#getplugint">T</a> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">undefined</span><a href="#getplugin" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>获取插件实例(非 hook,可在任意位置调用)</p>
2
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="getplugint"><span class="tsd-kind-type-parameter">T</span> = <span class="tsd-signature-type">any</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">workCode</span>: <span class="tsd-signature-type">string</span></span></li><li><span><span class="tsd-kind-parameter">pluginName</span>: <span class="tsd-signature-type">string</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#getplugint">T</a> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">undefined</span></h4><aside class="tsd-sources"><ul><li>Defined in lib/react/hooks/useFivePlugin.ts:39</li></ul></aside></div></li></ul></section></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></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>
@@ -0,0 +1,2 @@
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>setPlugin | 如视 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="../modules/react.html">react</a></li><li><a href="" aria-current="page">setPlugin</a></li></ul><h1>Function setPlugin</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="setplugin"><span class="tsd-kind-call-signature">setPlugin</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">workCode</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">pluginName</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">plugin</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#setplugin" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>手动设置插件实例到缓存(非 hook,可在任意位置调用)</p>
2
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">workCode</span>: <span class="tsd-signature-type">string</span></span></li><li><span><span class="tsd-kind-parameter">pluginName</span>: <span class="tsd-signature-type">string</span></span></li><li><span><span class="tsd-kind-parameter">plugin</span>: <span class="tsd-signature-type">any</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources"><ul><li>Defined in lib/react/hooks/useFivePlugin.ts:49</li></ul></aside></div></li></ul></section></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></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>
@@ -0,0 +1,8 @@
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>useFivePlugin | 如视 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="../modules/react.html">react</a></li><li><a href="" aria-current="page">useFivePlugin</a></li></ul><h1>Function useFivePlugin</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="usefiveplugin"><span class="tsd-kind-call-signature">useFivePlugin</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#usefiveplugint">T</a> <span class="tsd-signature-symbol">=</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">pluginName</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">options</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">UseFivePluginOptions</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#usefiveplugint">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#usefiveplugint">T</a> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">undefined</span><a href="#usefiveplugin" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>插件实例管理 hook</p>
2
+ <ul>
3
+ <li>以 <code>five.work.workCode + pluginName</code> 为 key 缓存插件实例</li>
4
+ <li><code>createPlugin</code> 存在时,缓存未命中会自动创建</li>
5
+ <li>Five 实例变化时自动同步插件内部的 five 引用</li>
6
+ </ul>
7
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="usefiveplugint"><span class="tsd-kind-type-parameter">T</span> = <span class="tsd-signature-type">any</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">pluginName</span>: <span class="tsd-signature-type">string</span></span></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">options</span>: <span class="tsd-signature-type">UseFivePluginOptions</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#usefiveplugint">T</a><span class="tsd-signature-symbol">&gt;</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#usefiveplugint">T</a> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">undefined</span></h4><p>插件实例(可能为 undefined)</p>
8
+ <aside class="tsd-sources"><ul><li>Defined in lib/react/hooks/useFivePlugin.ts:74</li></ul></aside></div></li></ul></section></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></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>
@@ -1 +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>withFive | 如视 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="../modules/react.html">react</a></li><li><a href="" aria-current="page">withFive</a></li></ul><h1>Function withFive</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="withfive"><span class="tsd-kind-call-signature">withFive</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a> <span class="tsd-signature-keyword">extends</span> <a href="../types/react.FiveInjectionFeature.html" class="tsd-signature-type tsd-kind-type-alias">FiveInjectionFeature</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">features</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span> <span class="tsd-signature-keyword">extends</span> <a href="../interfaces/react.PropTypeOfFiveFeatures.html" class="tsd-signature-type tsd-kind-interface">PropTypeOfFiveFeatures</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type tsd-kind-type-parameter">C</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">ComponentClass</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">Component</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type tsd-kind-type-parameter">C</span> <span class="tsd-signature-symbol">&amp;</span> <span class="tsd-signature-type">ComponentClass</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">ForwardRefExoticComponent</span><span class="tsd-signature-symbol">&lt;</span><br/>    <span class="tsd-signature-type">PropsWithoutRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Omit</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">&quot;$five&quot;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span> <span class="tsd-signature-symbol">&amp;</span> <span class="tsd-signature-type">RefAttributes</span><span class="tsd-signature-symbol">&lt;</span><br/>        <span class="tsd-signature-type">Omit</span><span class="tsd-signature-symbol">&lt;</span><br/>            <span class="tsd-signature-type">InstanceType</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">C</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;render&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;context&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;state&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;setState&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;shouldComponentUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillUnmount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidCatch&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;getSnapshotBeforeUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillReceiveProps&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillReceiveProps&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;forceUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;props&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;refs&quot;</span><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">&gt;</span><a href="#withfive" 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></div><div class="tsd-description"><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="withfivef"><span class="tsd-kind-type-parameter">F</span> <span class="tsd-signature-keyword">extends</span> <a href="../types/react.FiveInjectionFeature.html" class="tsd-signature-type tsd-kind-type-alias">FiveInjectionFeature</a><span class="tsd-signature-symbol">[]</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">features</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span> <span class="tsd-signature-keyword">extends</span> <a href="../interfaces/react.PropTypeOfFiveFeatures.html" class="tsd-signature-type tsd-kind-interface">PropTypeOfFiveFeatures</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type tsd-kind-type-parameter">C</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">ComponentClass</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">Component</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type tsd-kind-type-parameter">C</span> <span class="tsd-signature-symbol">&amp;</span> <span class="tsd-signature-type">ComponentClass</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">ForwardRefExoticComponent</span><span class="tsd-signature-symbol">&lt;</span><br/>    <span class="tsd-signature-type">PropsWithoutRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Omit</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">&quot;$five&quot;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span> <span class="tsd-signature-symbol">&amp;</span> <span class="tsd-signature-type">RefAttributes</span><span class="tsd-signature-symbol">&lt;</span><br/>        <span class="tsd-signature-type">Omit</span><span class="tsd-signature-symbol">&lt;</span><br/>            <span class="tsd-signature-type">InstanceType</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">C</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;render&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;context&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;state&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;setState&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;shouldComponentUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillUnmount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidCatch&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;getSnapshotBeforeUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillReceiveProps&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillReceiveProps&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;forceUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;props&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;refs&quot;</span><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">&gt;</span></h4><aside class="tsd-sources"><ul><li>Defined in lib/react/withFive.ts:558</li></ul></aside></div></li></ul></section></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></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>
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>withFive | 如视 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="../modules/react.html">react</a></li><li><a href="" aria-current="page">withFive</a></li></ul><h1>Function withFive</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="withfive"><span class="tsd-kind-call-signature">withFive</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a> <span class="tsd-signature-keyword">extends</span> <a href="../types/react.FiveInjectionFeature.html" class="tsd-signature-type tsd-kind-type-alias">FiveInjectionFeature</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">features</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span> <span class="tsd-signature-keyword">extends</span> <a href="../interfaces/react.PropTypeOfFiveFeatures.html" class="tsd-signature-type tsd-kind-interface">PropTypeOfFiveFeatures</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type tsd-kind-type-parameter">C</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">ComponentClass</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">Component</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type tsd-kind-type-parameter">C</span> <span class="tsd-signature-symbol">&amp;</span> <span class="tsd-signature-type">ComponentClass</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">ForwardRefExoticComponent</span><span class="tsd-signature-symbol">&lt;</span><br/>    <span class="tsd-signature-type">PropsWithoutRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Omit</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">&quot;$five&quot;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span> <span class="tsd-signature-symbol">&amp;</span> <span class="tsd-signature-type">RefAttributes</span><span class="tsd-signature-symbol">&lt;</span><br/>        <span class="tsd-signature-type">Omit</span><span class="tsd-signature-symbol">&lt;</span><br/>            <span class="tsd-signature-type">InstanceType</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">C</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;render&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;context&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;state&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;setState&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;forceUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;shouldComponentUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillUnmount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidCatch&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;getSnapshotBeforeUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillReceiveProps&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillReceiveProps&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;props&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;refs&quot;</span><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">&gt;</span><a href="#withfive" 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></div><div class="tsd-description"><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="withfivef"><span class="tsd-kind-type-parameter">F</span> <span class="tsd-signature-keyword">extends</span> <a href="../types/react.FiveInjectionFeature.html" class="tsd-signature-type tsd-kind-type-alias">FiveInjectionFeature</a><span class="tsd-signature-symbol">[]</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">features</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span> <span class="tsd-signature-keyword">extends</span> <a href="../interfaces/react.PropTypeOfFiveFeatures.html" class="tsd-signature-type tsd-kind-interface">PropTypeOfFiveFeatures</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#withfivef">F</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type tsd-kind-type-parameter">C</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">ComponentClass</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">Component</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type tsd-kind-type-parameter">C</span> <span class="tsd-signature-symbol">&amp;</span> <span class="tsd-signature-type">ComponentClass</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">ForwardRefExoticComponent</span><span class="tsd-signature-symbol">&lt;</span><br/>    <span class="tsd-signature-type">PropsWithoutRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Omit</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">P</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">&quot;$five&quot;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span> <span class="tsd-signature-symbol">&amp;</span> <span class="tsd-signature-type">RefAttributes</span><span class="tsd-signature-symbol">&lt;</span><br/>        <span class="tsd-signature-type">Omit</span><span class="tsd-signature-symbol">&lt;</span><br/>            <span class="tsd-signature-type">InstanceType</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type tsd-kind-type-parameter">C</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;render&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;context&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;state&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;setState&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;forceUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;shouldComponentUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillUnmount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidCatch&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;getSnapshotBeforeUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentDidUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillMount&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillReceiveProps&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillReceiveProps&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;componentWillUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;UNSAFE_componentWillUpdate&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;props&quot;</span><br/>                <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;refs&quot;</span><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">&gt;</span></h4><aside class="tsd-sources"><ul><li>Defined in lib/react/withFive.ts:558</li></ul></aside></div></li></ul></section></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></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>