@realsee/five 6.8.9 → 6.9.0-alpha.1

package/docs/documents/features_flowing-light-3d-pass.html

@@ -11,7 +11,7 @@
 <p><strong>Definition</strong>: <a href="../../five/renderer/postprocessing/passes/flowing-light-3d-pass.d.ts">FlowingLight3DPass</a></p>
 </blockquote>
 <p><code>FlowingLight3DPass</code> 继承自 <code>FivePass</code>,支持投影到当前相机视锥。核心接口如下:</p>
-<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>
+<pre><code class="ts"><span class="hl-11">import</span><span class="hl-1"> </span><span class="hl-8">*</span><span class="hl-1"> </span><span class="hl-11">as</span><span class="hl-1"> </span><span class="hl-5">THREE</span><span class="hl-1"> </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">FivePass</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;./pass&#39;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-11">type</span><span class="hl-1"> </span><span class="hl-5">Camera</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;../../../core/camera&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">type</span><span class="hl-1"> </span><span class="hl-9">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-5">id</span><span class="hl-1">?: </span><span class="hl-9">string</span><span class="hl-1">;                   </span><span class="hl-7">// 可选的唯一标识符,不传则自动生成 UUID</span><br/><span class="hl-1">  </span><span class="hl-5">points</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Vector3</span><span class="hl-1">[];      </span><span class="hl-7">// 世界坐标系路径点</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">;           </span><span class="hl-7">// 路径总长度(世界单位)</span><br/><span class="hl-1">  </span><span class="hl-5">color</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Color</span><span class="hl-1">;            </span><span class="hl-7">// 光带颜色</span><br/><span class="hl-1">  </span><span class="hl-5">opacity</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;              </span><span class="hl-7">// 光带不透明度(0-1)</span><br/><span class="hl-1">  </span><span class="hl-5">duration</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;             </span><span class="hl-7">// 动画周期(毫秒)</span><br/><span class="hl-1">  </span><span class="hl-5">startTime</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;            </span><span class="hl-7">// 线条开始时间(毫秒),默认使用当前内部时间</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;            </span><span class="hl-7">// 线宽(像素)</span><br/><span class="hl-1">  </span><span class="hl-5">tailLengthRatio</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;      </span><span class="hl-7">// 尾巴长度比例(0-1),默认 0.2</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-11">export</span><span class="hl-1"> </span><span class="hl-8">class</span><span class="hl-1"> </span><span class="hl-9">FlowingLight3DPass</span><span class="hl-1"> </span><span class="hl-8">extends</span><span class="hl-1"> </span><span class="hl-9">FivePass</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-8">constructor</span><span class="hl-1">(</span><span class="hl-5">camera</span><span class="hl-1">: </span><span class="hl-9">Camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 批量设置路径列表(替换所有现有线条)</span><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">setLines</span><span class="hl-1">(</span><span class="hl-5">lines</span><span class="hl-1">: </span><span class="hl-9">Line</span><span class="hl-1">[]): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 追加一条或多条线,返回生成的 id 数组</span><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">addLine</span><span class="hl-1">(...</span><span class="hl-5">lines</span><span class="hl-1">: </span><span class="hl-9">Line</span><span class="hl-1">[]): </span><span class="hl-9">string</span><span class="hl-1">[];</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 按 id 移除一条或多条线,返回实际移除的数量</span><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">removeLine</span><span class="hl-1">(...</span><span class="hl-5">ids</span><span class="hl-1">: </span><span class="hl-9">string</span><span class="hl-1">[]): </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 修改单条线的参数(通过 id),支持部分更新</span><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">setLine</span><span class="hl-1">(</span><span class="hl-5">params</span><span class="hl-1">: { </span><span class="hl-5">id</span><span class="hl-1">: </span><span class="hl-9">string</span><span class="hl-1"> } &amp; </span><span class="hl-9">Partial</span><span class="hl-1">&lt;</span><span class="hl-9">Omit</span><span class="hl-1">&lt;</span><span class="hl-9">Line</span><span class="hl-1">, </span><span class="hl-10">&#39;id&#39;</span><span class="hl-1">&gt;&gt;): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">render</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-5">renderer</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">WebGLRenderer</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">writeBuffer</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">readBuffer</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">deltaTime</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">maskActive</span><span class="hl-1">?: </span><span class="hl-9">boolean</span><span class="hl-1">,</span><br/><span class="hl-1">  ): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">dispose</span><span class="hl-1">(): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 
 <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>
@@ -121,19 +121,19 @@
 <p><strong>自动生成 ID</strong>: 如果 line 没有提供 <code>id</code>,会自动生成 UUID。
 <strong>自动设置 startTime</strong>: 如果 line 没有提供 <code>startTime</code>,会使用当前内部时间。</p>
 <p><strong>示例</strong>:</p>
-<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>
+<pre><code class="ts"><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pathLine</span><span class="hl-1">: </span><span class="hl-9">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-3d-line&#39;</span><span class="hl-1">,  </span><span class="hl-7">// 可选,不传则自动生成</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">3</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">1</span><span class="hl-1">, </span><span class="hl-3">6</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">12</span><span class="hl-1">,  </span><span class="hl-7">// 世界坐标单位</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0xff6600</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">opacity:</span><span class="hl-1"> </span><span class="hl-3">0.85</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">3000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">startTime:</span><span class="hl-1"> </span><span class="hl-3">500</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">4.0</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">([</span><span class="hl-5">pathLine</span><span class="hl-1">]);</span>
 </code><button type="button">Copy</button></pre>
 
 <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>
 <p>追加一条或多条线到现有列表中,不影响已有线条。返回新增线条的 id 数组。</p>
 <p><strong>示例</strong>:</p>
-<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>
+<pre><code class="ts"><span class="hl-7">// 追加单条线</span><br/><span class="hl-8">const</span><span class="hl-1"> [</span><span class="hl-6">id1</span><span class="hl-1">] = </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">addLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">12</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0xff0000</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 追加多条线</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">ids</span><span class="hl-1"> = </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">addLine</span><span class="hl-1">(</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> [...],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ff00</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">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-5">points:</span><span class="hl-1"> [...],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">15</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x0000ff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">1800</span><span class="hl-1">,</span><br/><span class="hl-1">  },</span><br/><span class="hl-1">);</span><br/><span class="hl-7">// ids = [&#39;uuid-1&#39;, &#39;uuid-2&#39;]</span>
 </code><button type="button">Copy</button></pre>
 
 <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>
 <p>按 id 移除一条或多条线,返回实际移除的数量。如果 id 不存在,会在控制台输出警告。</p>
 <p><strong>示例</strong>:</p>
-<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>
+<pre><code class="ts"><span class="hl-7">// 移除单条线</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">removeLine</span><span class="hl-1">(</span><span class="hl-5">id1</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 移除多条线</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">removedCount</span><span class="hl-1"> = </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">removeLine</span><span class="hl-1">(</span><span class="hl-5">id1</span><span class="hl-1">, </span><span class="hl-5">id2</span><span class="hl-1">, </span><span class="hl-5">id3</span><span class="hl-1">);</span><br/><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">`移除了 </span><span class="hl-8">${</span><span class="hl-5">removedCount</span><span class="hl-8">}</span><span class="hl-10"> 条线`</span><span class="hl-1">);</span>
 </code><button type="button">Copy</button></pre>
 
 <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>
@@ -144,7 +144,7 @@
 <li>如果 <code>points</code> 数量改变,会重建整个 mesh,性能开销较大</li>
 </ul>
 <p><strong>示例</strong>:</p>
-<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">setLine</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><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><br/><br/><span class="hl-8">// 修改多个属性 - 高性能</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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><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">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.5</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">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">5.0</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 修改 points (相同数量) - 高性能</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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><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">6</span><span class="hl-1">, </span><span class="hl-11">3</span><span class="hl-1">, </span><span class="hl-11">4</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-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">12</span><span class="hl-1">, </span><span class="hl-11">2</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-8">// 仍是 3 个点</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><br/><br/><span class="hl-8">// 修改 points (不同数量) - 会重建 mesh</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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><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><span class="hl-8">// 从 3 个点变为 2 个点</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>
+<pre><code class="ts"><span class="hl-7">// 只修改颜色 - 高性能</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-3d-line&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0xff0000</span><span class="hl-1">),</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 修改多个属性 - 高性能</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-3d-line&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ff00</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">opacity:</span><span class="hl-1"> </span><span class="hl-3">0.5</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">3000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">5.0</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 修改 points (相同数量) - 高性能</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-3d-line&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">6</span><span class="hl-1">, </span><span class="hl-3">3</span><span class="hl-1">, </span><span class="hl-3">4</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">12</span><span class="hl-1">, </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">8</span><span class="hl-1">),</span><br/><span class="hl-1">  ],  </span><span class="hl-7">// 仍是 3 个点</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">15</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 修改 points (不同数量) - 会重建 mesh</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-3d-line&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">),</span><br/><span class="hl-1">  ],  </span><span class="hl-7">// 从 3 个点变为 2 个点</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">12</span><span class="hl-1">,</span><br/><span class="hl-1">});</span>
 </code><button type="button">Copy</button></pre>
 
 <p><strong>注意事项</strong>:</p>
@@ -159,23 +159,23 @@
 <p>释放 InstancedMesh、着色材质和渲染目标资源,销毁 Pass 时必须调用。</p>
 <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
 <h3 id="快速上手-quick-example" class="tsd-anchor-link">快速上手 (Quick Example)<a href="#快速上手-quick-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
-<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">FlowingLight3DPass</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;../../lib/five/renderer/postprocessing&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;three&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 创建 3D 流光通道</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">flowing3D</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 定义一条 3D 路径(世界坐标)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">path</span><span class="hl-1"> = [</span><br/><span class="hl-1">  </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector3</span><span class="hl-1">(-</span><span class="hl-11">5</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector3</span><span class="hl-1">(-</span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-11">3</span><span class="hl-1">, </span><span class="hl-11">2</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector3</span><span class="hl-1">(</span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-11">3</span><span class="hl-1">, -</span><span class="hl-11">2</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector3</span><span class="hl-1">(</span><span class="hl-11">5</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">),</span><br/><span class="hl-1">];</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">totalLen</span><span class="hl-1"> = </span><span class="hl-11">15</span><span class="hl-1">;  </span><span class="hl-8">// 世界单位</span><br/><br/><span class="hl-6">flowing3D</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([{</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> </span><span class="hl-6">path</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-6">totalLen</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x00ff88</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">4000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><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">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">flowing3D</span><span class="hl-1">);</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">animate</span><span class="hl-1">() {</span><br/><span class="hl-1">  </span><span class="hl-5">requestAnimationFrame</span><span class="hl-1">(</span><span class="hl-6">animate</span><span class="hl-1">);</span><br/><span class="hl-1">  </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">render</span><span class="hl-1">();</span><br/><span class="hl-1">}</span><br/><span class="hl-5">animate</span><span class="hl-1">();</span>
+<pre><code class="typescript"><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">Five</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">FlowingLight3DPass</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;../../lib/five/renderer/postprocessing&#39;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> </span><span class="hl-8">*</span><span class="hl-1"> </span><span class="hl-11">as</span><span class="hl-1"> </span><span class="hl-5">THREE</span><span class="hl-1"> </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;three&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-7">// 创建 3D 流光通道</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">flowing3D</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 定义一条 3D 路径(世界坐标)</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">path</span><span class="hl-1"> = [</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(-</span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(-</span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">3</span><span class="hl-1">, </span><span class="hl-3">2</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">3</span><span class="hl-1">, -</span><span class="hl-3">2</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">];</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">totalLen</span><span class="hl-1"> = </span><span class="hl-3">15</span><span class="hl-1">;  </span><span class="hl-7">// 世界单位</span><br/><br/><span class="hl-5">flowing3D</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">([{</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> </span><span class="hl-5">path</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-5">totalLen</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ff88</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">opacity:</span><span class="hl-1"> </span><span class="hl-3">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">4000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">3.0</span><span class="hl-1">,</span><br/><span class="hl-1">}]);</span><br/><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">addPass</span><span class="hl-1">(</span><span class="hl-5">flowing3D</span><span class="hl-1">);</span><br/><br/><span class="hl-8">function</span><span class="hl-1"> </span><span class="hl-4">animate</span><span class="hl-1">() {</span><br/><span class="hl-1">  </span><span class="hl-4">requestAnimationFrame</span><span class="hl-1">(</span><span class="hl-5">animate</span><span class="hl-1">);</span><br/><span class="hl-1">  </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">render</span><span class="hl-1">();</span><br/><span class="hl-1">}</span><br/><span class="hl-4">animate</span><span class="hl-1">();</span>
 </code><button type="button">Copy</button></pre>
 
 <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>
-<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>
+<pre><code class="typescript"><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pass</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-5">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">paths</span><span class="hl-1"> = [</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">11</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0xff0000</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">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-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">12</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ff00</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">startTime:</span><span class="hl-1"> </span><span class="hl-3">500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">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-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">10</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">11</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x0000ff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2200</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">startTime:</span><span class="hl-1"> </span><span class="hl-3">1000</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">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-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">(</span><span class="hl-5">paths</span><span class="hl-1">);</span>
 </code><button type="button">Copy</button></pre>
 
 <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>
-<pre><code class="typescript"><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">calculatePath3DLength</span><span class="hl-1">(</span><span class="hl-6">points</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">[]): </span><span class="hl-7">number</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-3">let</span><span class="hl-1"> </span><span class="hl-6">length</span><span class="hl-1"> = </span><span class="hl-11">0</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-10">for</span><span class="hl-1"> (</span><span class="hl-3">let</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> = </span><span class="hl-11">1</span><span class="hl-1">; </span><span class="hl-6">i</span><span class="hl-1"> &lt; </span><span class="hl-6">points</span><span class="hl-1">.</span><span class="hl-6">length</span><span class="hl-1">; </span><span class="hl-6">i</span><span class="hl-1">++) {</span><br/><span class="hl-1">    </span><span class="hl-6">length</span><span class="hl-1"> += </span><span class="hl-6">points</span><span class="hl-1">[</span><span class="hl-6">i</span><span class="hl-1">].</span><span class="hl-5">distanceTo</span><span class="hl-1">(</span><span class="hl-6">points</span><span class="hl-1">[</span><span class="hl-6">i</span><span class="hl-1"> - </span><span class="hl-11">1</span><span class="hl-1">]);</span><br/><span class="hl-1">  }</span><br/><span class="hl-1">  </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-6">length</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">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/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pathLine</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> </span><span class="hl-6">points</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-5">calculatePath3DLength</span><span class="hl-1">(</span><span class="hl-6">points</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x00ccff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">3000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><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>
+<pre><code class="typescript"><span class="hl-8">function</span><span class="hl-1"> </span><span class="hl-4">calculatePath3DLength</span><span class="hl-1">(</span><span class="hl-5">points</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Vector3</span><span class="hl-1">[]): </span><span class="hl-9">number</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-8">let</span><span class="hl-1"> </span><span class="hl-5">length</span><span class="hl-1"> = </span><span class="hl-3">0</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-11">for</span><span class="hl-1"> (</span><span class="hl-8">let</span><span class="hl-1"> </span><span class="hl-5">i</span><span class="hl-1"> = </span><span class="hl-3">1</span><span class="hl-1">; </span><span class="hl-5">i</span><span class="hl-1"> &lt; </span><span class="hl-5">points</span><span class="hl-1">.</span><span class="hl-5">length</span><span class="hl-1">; </span><span class="hl-5">i</span><span class="hl-1">++) {</span><br/><span class="hl-1">    </span><span class="hl-5">length</span><span class="hl-1"> += </span><span class="hl-5">points</span><span class="hl-1">[</span><span class="hl-5">i</span><span class="hl-1">].</span><span class="hl-4">distanceTo</span><span class="hl-1">(</span><span class="hl-5">points</span><span class="hl-1">[</span><span class="hl-5">i</span><span class="hl-1"> - </span><span class="hl-3">1</span><span class="hl-1">]);</span><br/><span class="hl-1">  }</span><br/><span class="hl-1">  </span><span class="hl-11">return</span><span class="hl-1"> </span><span class="hl-5">length</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">points</span><span class="hl-1"> = [</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">3</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">1</span><span class="hl-1">, </span><span class="hl-3">6</span><span class="hl-1">),</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pathLine</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> </span><span class="hl-5">points</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-4">calculatePath3DLength</span><span class="hl-1">(</span><span class="hl-5">points</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ccff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">3000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">3.0</span><span class="hl-1">,</span><br/><span class="hl-1">};</span>
 </code><button type="button">Copy</button></pre>
 
 <h3 id="结合相机动画" class="tsd-anchor-link">结合相机动画<a href="#结合相机动画" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
-<pre><code class="typescript"><span class="hl-8">// 光带路径随相机移动自动投影</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([{</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-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">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">5</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">0</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">20</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0xffff00</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">3000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><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/><br/><span class="hl-8">// 相机动画过程中光带自动跟随投影</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">setState</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-6">mode:</span><span class="hl-1"> </span><span class="hl-6">Five</span><span class="hl-1">.</span><span class="hl-6">Mode</span><span class="hl-1">.</span><span class="hl-6">Model</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-8">// ... 其他参数</span><br/><span class="hl-1">});</span>
+<pre><code class="typescript"><span class="hl-7">// 光带路径随相机移动自动投影</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pass</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-5">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">([{</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(-</span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">20</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0xffff00</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">3000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">4.0</span><span class="hl-1">,</span><br/><span class="hl-1">}]);</span><br/><br/><span class="hl-7">// 相机动画过程中光带自动跟随投影</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">setState</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">mode:</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">.</span><span class="hl-5">Mode</span><span class="hl-1">.</span><span class="hl-5">Model</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-7">// ... 其他参数</span><br/><span class="hl-1">});</span>
 </code><button type="button">Copy</button></pre>
 
 <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>
-<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>
+<pre><code class="typescript"><span class="hl-7">// InstancedMesh 实现自动优化高 DPR 性能</span><br/><span class="hl-7">// 在 DPR=2 的 Retina 屏幕上,性能显著优于全屏着色器方案</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pass</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">FlowingLight3DPass</span><span class="hl-1">(</span><span class="hl-5">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 多条路径在高 DPR 下仍能保持流畅</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">paths</span><span class="hl-1"> = </span><span class="hl-5">Array</span><span class="hl-1">.</span><span class="hl-4">from</span><span class="hl-1">({ </span><span class="hl-5">length:</span><span class="hl-1"> </span><span class="hl-3">10</span><span class="hl-1"> }, (</span><span class="hl-5">_</span><span class="hl-1">, </span><span class="hl-5">i</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> ({</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-5">i</span><span class="hl-1"> * </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-5">i</span><span class="hl-1"> * </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">, </span><span class="hl-3">5</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">7</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">() * </span><span class="hl-3">0xffffff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1"> + </span><span class="hl-5">i</span><span class="hl-1"> * </span><span class="hl-3">100</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">startTime:</span><span class="hl-1"> </span><span class="hl-5">i</span><span class="hl-1"> * </span><span class="hl-3">200</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">3.0</span><span class="hl-1">,</span><br/><span class="hl-1">}));</span><br/><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">(</span><span class="hl-5">paths</span><span class="hl-1">);</span>
 </code><button type="button">Copy</button></pre>
 
 <h2 id="debugging" class="tsd-anchor-link">Debugging<a href="#debugging" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -232,7 +232,7 @@
 </tbody>
 </table>
 <p><strong>最佳实践</strong>:</p>
-<pre><code class="ts"><span class="hl-8">// ✅ 高性能 - 频繁修改颜色</span><br/><span class="hl-5">requestAnimationFrame</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">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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-6">lineId</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-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</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><br/><span class="hl-1">  });</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// ✅ 高性能 - 动画路径(保持点数)</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">animatePath</span><span class="hl-1">(</span><span class="hl-6">t</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">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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-6">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector3</span><span class="hl-1">(</span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector3</span><span class="hl-1">(</span><span class="hl-11">5</span><span class="hl-1"> + </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">sin</span><span class="hl-1">(</span><span class="hl-6">t</span><span class="hl-1">) * </span><span class="hl-11">2</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">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-8">// 始终 3 个点</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">// ⚠️ 低性能 - 避免频繁改变点数</span><br/><span class="hl-5">setInterval</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-3">const</span><span class="hl-1"> </span><span class="hl-4">pointCount</span><span class="hl-1"> = </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">floor</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">5</span><span class="hl-1">) + </span><span class="hl-11">2</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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-6">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> </span><span class="hl-5">generateRandomPoints</span><span class="hl-1">(</span><span class="hl-6">pointCount</span><span class="hl-1">)  </span><span class="hl-8">// 点数不固定</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">}, </span><span class="hl-11">100</span><span class="hl-1">);</span>
+<pre><code class="ts"><span class="hl-7">// ✅ 高性能 - 频繁修改颜色</span><br/><span class="hl-4">requestAnimationFrame</span><span class="hl-1">(() </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-5">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">(), </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">(), </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">())</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// ✅ 高性能 - 动画路径(保持点数)</span><br/><span class="hl-8">function</span><span class="hl-1"> </span><span class="hl-4">animatePath</span><span class="hl-1">(</span><span class="hl-5">t</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">) {</span><br/><span class="hl-1">  </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-5">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">5</span><span class="hl-1"> + </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">sin</span><span class="hl-1">(</span><span class="hl-5">t</span><span class="hl-1">) * </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">2</span><span class="hl-1">, </span><span class="hl-3">3</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector3</span><span class="hl-1">(</span><span class="hl-3">10</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">),</span><br/><span class="hl-1">    ]  </span><span class="hl-7">// 始终 3 个点</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-7">// ⚠️ 低性能 - 避免频繁改变点数</span><br/><span class="hl-4">setInterval</span><span class="hl-1">(() </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pointCount</span><span class="hl-1"> = </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">floor</span><span class="hl-1">(</span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">() * </span><span class="hl-3">5</span><span class="hl-1">) + </span><span class="hl-3">2</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-5">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> </span><span class="hl-4">generateRandomPoints</span><span class="hl-1">(</span><span class="hl-5">pointCount</span><span class="hl-1">)  </span><span class="hl-7">// 点数不固定</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">}, </span><span class="hl-3">100</span><span class="hl-1">);</span>
 </code><button type="button">Copy</button></pre>
 
 <h3 id="优化建议" class="tsd-anchor-link">优化建议<a href="#优化建议" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>