@realsee/five 6.8.0-alpha.9 → 6.8.0

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

@@ -125,16 +125,16 @@
 <p><strong>注意</strong>: <code>totalLength</code> 和 <code>lineWidth</code> 使用归一化单位,与屏幕实际像素无关。</p>
 </blockquote>
 <h2 id="instance-methods" class="tsd-anchor-link">Instance Methods<a href="#instance-methods" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
-<h3 id="" class="tsd-anchor-link"><code>constructor(camera: Camera)</code></h3>
+<h3 id="_" class="tsd-anchor-link"><code>constructor(camera: Camera)</code><a href="#_" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <p>初始化 Pass,需传入相机以获取屏幕分辨率。</p>
-<h3 id="-1" class="tsd-anchor-link"><code>setLines(lines: Line[])</code><a href="#-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<h3 id="_-1" class="tsd-anchor-link"><code>setLines(lines: Line[])</code><a href="#_-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <p>更新要渲染的路径列表。可随时调用以修改或新增路径。</p>
 <p><strong>自动生成 ID</strong>: 如果 line 没有提供 <code>id</code>,会自动生成 UUID。</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-line-1&#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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.7</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.7</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.3</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">0.8</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">0x00c2ff</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">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</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>
 </code><button type="button">Copy</button></pre>
 
-<h3 id="-2" class="tsd-anchor-link"><code>setLine(params: { id: string } &amp; Partial&lt;Omit&lt;Line, 'id'&gt;&gt;)</code><a href="#-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<h3 id="_-2" class="tsd-anchor-link"><code>setLine(params: { id: string } &amp; Partial&lt;Omit&lt;Line, 'id'&gt;&gt;)</code><a href="#_-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <p>通过 <code>id</code> 修改单条线的参数。支持部分更新,只更新传入的字段。</p>
 <p><strong>性能优化</strong>:</p>
 <ul>
@@ -151,128 +151,31 @@
 <li>动画时间(<code>uTime</code>)不会被重置,流光继续从当前位置播放</li>
 <li>建议修改 <code>points</code> 时同时更新 <code>totalLength</code></li>
 </ul>
-<h3 id="-3" class="tsd-anchor-link"><code>render(...)</code><a href="#-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<h3 id="_-3" class="tsd-anchor-link"><code>render(...)</code><a href="#_-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <p>由 EffectComposer 自动调用,无需手动调用。自动同步渲染目标尺寸。</p>
-<h3 id="-4" class="tsd-anchor-link"><code>dispose()</code><a href="#-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<h3 id="_-4" class="tsd-anchor-link"><code>dispose()</code><a href="#_-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <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>
-<p>import { Five } from '@realsee/five';
-import { FlowingLight2DPass } from '../../lib/five/renderer/postprocessing';
-import * as THREE from 'three';</p>
-<p>const five = new Five();</p>
-<p>// 创建 2D 流光通道
-const flowing2D = new FlowingLight2DPass(five.camera);</p>
-<p>// 定义一条屏幕空间的路径(归一化坐标)
-const path = [
-new THREE.Vector2(0.2, 0.2),
-new THREE.Vector2(0.5, 0.8),
-new THREE.Vector2(0.8, 0.2),
-];
-const totalLen = 1.2; // 归一化单位</p>
-<p>flowing2D.setLines([{
-points: path,
-totalLength: totalLen,
-color: new THREE.Color(0x00ff00),
-opacity: 0.9,
-duration: 2000,
-lineWidth: 0.01,
-}]);</p>
-<p>five.addPass(flowing2D);</p>
-<p>function animate() {
-requestAnimationFrame(animate);
-five.render();
-}
-animate();</p>
+<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">FlowingLight2DPass</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">// 创建 2D 流光通道</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">flowing2D</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight2DPass</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">// 定义一条屏幕空间的路径(归一化坐标)</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.2</span><span class="hl-1">, </span><span class="hl-11">0.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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.5</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-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.8</span><span class="hl-1">, </span><span class="hl-11">0.2</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">1.2</span><span class="hl-1">; </span><span class="hl-8">// 归一化单位</span><br/><br/><span class="hl-6">flowing2D</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">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.9</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">0.01</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">flowing2D</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>
+</code><button type="button">Copy</button></pre>
+
 <h3 id="多条路径-动态更新" class="tsd-anchor-link">多条路径 &amp; 动态更新<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>
-<p>const pass = new FlowingLight2DPass(five.camera);</p>
-<p>// 初始路径集合
-const paths = [
-{
-points: [
-new THREE.Vector2(0.1, 0.1),
-new THREE.Vector2(0.9, 0.1),
-],
-totalLength: 0.8,
-color: new THREE.Color(0xff6600),
-duration: 1500,
-lineWidth: 0.01,
-},
-{
-points: [
-new THREE.Vector2(0.1, 0.5),
-new THREE.Vector2(0.9, 0.5),
-],
-totalLength: 0.8,
-color: new THREE.Color(0x0066ff),
-opacity: 0.7,
-duration: 2000,
-delay: 500,
-lineWidth: 0.015,
-},
-];</p>
-<p>pass.setLines(paths);
-five.addPass(pass);</p>
-<p>// 响应用户交互动态更新路径
-document.addEventListener('click', (e) =&gt; {
-const rect = five.canvas.getBoundingClientRect();
-const x = (e.clientX - rect.left) / rect.width;
-const y = (e.clientY - rect.top) / rect.height; // 左上角为原点,无需翻转</p>
-<p>const newPath = {
-points: [
-new THREE.Vector2(0.5, 0.5),
-new THREE.Vector2(x, y),
-],
-totalLength: Math.hypot(x - 0.5, y - 0.5),
-color: new THREE.Color(Math.random() * 0xffffff),
-duration: 1200,
-lineWidth: 0.01,
-};
-pass.setLines([...paths, newPath]);
-});</p>
+<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">FlowingLight2DPass</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">// 初始路径集合</span><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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.1</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">0.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">0xff6600</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><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</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-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</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">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">0x0066ff</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.7</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">delay:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.015</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><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">pass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 响应用户交互动态更新路径</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">&#39;click&#39;</span><span class="hl-1">, (</span><span class="hl-6">e</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rect</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">canvas</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">x</span><span class="hl-1"> = (</span><span class="hl-6">e</span><span class="hl-1">.</span><span class="hl-6">clientX</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">y</span><span class="hl-1"> = (</span><span class="hl-6">e</span><span class="hl-1">.</span><span class="hl-6">clientY</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1">; </span><span class="hl-8">// 左上角为原点,无需翻转</span><br/><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">newPath</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.5</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-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-6">x</span><span class="hl-1">, </span><span class="hl-6">y</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-6">Math</span><span class="hl-1">.</span><span class="hl-5">hypot</span><span class="hl-1">(</span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-11">0.5</span><span class="hl-1">, </span><span class="hl-6">y</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">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">1200</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">0.01</span><span class="hl-1">,</span><br/><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">setLines</span><span class="hl-1">([...</span><span class="hl-6">paths</span><span class="hl-1">, </span><span class="hl-6">newPath</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>
-<p>function calculatePathLength(points: THREE.Vector2[]): number {
-let length = 0;
-for (let i = 1; i &lt; points.length; i++) {
-length += points[i].distanceTo(points[i - 1]);
-}
-return length;
-}</p>
-<p>const points = [
-new THREE.Vector2(0.3, 0.7),
-new THREE.Vector2(0.7, 0.7),
-new THREE.Vector2(0.7, 0.3),
-new THREE.Vector2(0.3, 0.3),
-new THREE.Vector2(0.3, 0.7),
-];</p>
-<p>const pathLine = {
-points: points,
-totalLength: calculatePathLength(points),
-color: new THREE.Color(0x00ffff),
-duration: 2000,
-lineWidth: 0.01,
-};</p>
+<pre><code class="typescript"><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">calculatePathLength</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">Vector2</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.7</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.7</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.7</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">calculatePathLength</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">0x00ffff</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">0.01</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="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight2DPass</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">// 创建一个矩形路径(注意:左上角为原点)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rectPath</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),  </span><span class="hl-8">// 左上</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),  </span><span class="hl-8">// 右上</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),  </span><span class="hl-8">// 右下</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),  </span><span class="hl-8">// 左下</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.3</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-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">1.6</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">1.0</span><span class="hl-1">, </span><span class="hl-11">1.0</span><span class="hl-1">, </span><span class="hl-11">1.0</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">1.0</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">delay:</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">0.01</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">rectPath</span><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>
-<p>// InstancedMesh 实现自动优化高 DPR 性能
-// 在 DPR=2 的 Retina 屏幕上,性能显著优于全屏着色器方案</p>
-<p>const pass = new FlowingLight2DPass(camera);</p>
-<p>// 多条路径在高 DPR 下仍能保持流畅
-const paths = Array.from({ length: 10 }, (_, i) =&gt; ({
-points: [
-new THREE.Vector2(0.1, 0.1 + i * 0.08),
-new THREE.Vector2(0.9, 0.1 + i * 0.08),
-],
-totalLength: 0.8,
-color: new THREE.Color(Math.random() * 0xffffff),
-duration: 2000 + i * 100,
-delay: i * 200,
-lineWidth: 0.01,
-}));</p>
-<p>pass.setLines(paths);</p>
+<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">FlowingLight2DPass</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">0.08</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">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">0.08</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">0.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-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</span><span class="hl-1">() * </span><span class="hl-11">0xffffff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">100</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">200</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</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>
+</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>
 <ul>
 <li><strong>光带不出现</strong>: 检查 <code>color</code> 和 <code>opacity</code>,确保非全透明;验证 <code>points</code> 至少 2 个;确认坐标在 [0, 1] 范围内。</li>
@@ -352,5 +255,5 @@ lineWidth: 0.01,
 <li><a href="features_flowing-light-3d-pass.html">Flowing Light 3D Pass</a>: 基于 3D 世界坐标的流光效果。</li>
 </ul>
 <hr>
-<p>tags: [postprocessing, effect, flowing, light, pass, rendering, screenspace, instanced, performance]</p>
-</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#flowing-light-2d-pass-流光-2d-通道"><span>Flowing <wbr/>Light 2<wbr/>D <wbr/>Pass (流光 2<wbr/>D 通道)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#instancedmesh-实例化渲染-instanced-rendering"><span>Instanced<wbr/>Mesh 实例化渲染 (<wbr/>Instanced <wbr/>Rendering)</span></a></li><li><a href="#归一化坐标系统-normalized-coordinates"><span>归一化坐标系统 (<wbr/>Normalized <wbr/>Coordinates)</span></a></li><li><a href="#头尾追逐动画-head-tail-chase-animation"><span>头尾追逐动画 (<wbr/>Head-<wbr/>Tail <wbr/>Chase <wbr/>Animation)</span></a></li><li><a href="#ndc-坐标转换"><span>NDC 坐标转换</span></a></li><li><a href="#dpr-处理与宽高比适配"><span>DPR 处理与宽高比适配</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#line-配置参数"><span>Line 配置参数</span></a></li></ul></li><li><a href="#instance-methods"><span>Instance <wbr/>Methods</span></a></li><li><ul><li><a href="#"><span></span></a></li><li><a href="#-1"><span></span></a></li><li><a href="#-2"><span></span></a></li><li><a href="#-3"><span></span></a></li><li><a href="#-4"><span></span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#多条路径-动态更新"><span>多条路径 &amp; 动态更新</span></a></li><li><a href="#计算路径总长度"><span>计算路径总长度</span></a></li><li><a href="#矩形路径示例"><span>矩形路径示例</span></a></li><li><a href="#高-dpr-场景优化"><span>高 <wbr/>DPR 场景优化</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><a href="#performance"><span>Performance</span></a></li><li><ul><li><a href="#与全屏着色器对比"><span>与全屏着色器对比</span></a></li><li><a href="#setline-性能优化"><span>set<wbr/>Line 性能优化</span></a></li><li><a href="#优化建议"><span>优化建议</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+<p>tags: [流光, 光带, 导航路径, 指示线, 动态路径, 特效, postprocessing, effect, flowing, light, pass, rendering, screenspace, instanced, performance, 2d, screen-space]</p>
+</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#flowing-light-2d-pass-流光-2d-通道"><span>Flowing <wbr/>Light 2<wbr/>D <wbr/>Pass (流光 2<wbr/>D 通道)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#instancedmesh-实例化渲染-instanced-rendering"><span>Instanced<wbr/>Mesh 实例化渲染 (<wbr/>Instanced <wbr/>Rendering)</span></a></li><li><a href="#归一化坐标系统-normalized-coordinates"><span>归一化坐标系统 (<wbr/>Normalized <wbr/>Coordinates)</span></a></li><li><a href="#头尾追逐动画-head-tail-chase-animation"><span>头尾追逐动画 (<wbr/>Head-<wbr/>Tail <wbr/>Chase <wbr/>Animation)</span></a></li><li><a href="#ndc-坐标转换"><span>NDC 坐标转换</span></a></li><li><a href="#dpr-处理与宽高比适配"><span>DPR 处理与宽高比适配</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#line-配置参数"><span>Line 配置参数</span></a></li></ul></li><li><a href="#instance-methods"><span>Instance <wbr/>Methods</span></a></li><li><ul><li><a href="#_"><span></span></a></li><li><a href="#_-1"><span></span></a></li><li><a href="#_-2"><span></span></a></li><li><a href="#_-3"><span></span></a></li><li><a href="#_-4"><span></span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#多条路径-动态更新"><span>多条路径 &amp; 动态更新</span></a></li><li><a href="#计算路径总长度"><span>计算路径总长度</span></a></li><li><a href="#矩形路径示例"><span>矩形路径示例</span></a></li><li><a href="#高-dpr-场景优化"><span>高 <wbr/>DPR 场景优化</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><a href="#performance"><span>Performance</span></a></li><li><ul><li><a href="#与全屏着色器对比"><span>与全屏着色器对比</span></a></li><li><a href="#setline-性能优化"><span>set<wbr/>Line 性能优化</span></a></li><li><a href="#优化建议"><span>优化建议</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>