如何通过THREE.SVGRenderer控制THREE.Line路径的渲染顺序？

我生成了一条自回避随机线，使用THREE.SVGRenderer渲染效果符合预期，但尝试用SVG路径动画技巧实现动画时失败——因为生成的SVG路径线段顺序和THREE.Line所用THREE.BufferGeometry中的点顺序不匹配。

我的THREE.BufferGeometry中的点是按连续折线顺序排列的节点序列。

生成的SVG路径代码如下：

<path d="M-91.23724729581473,46.981849249447244L22.80931182395362,13.667447054384706M22.80931182395362,13.667447054384706L91.23724729581463,69.19145071282227M-91.23724729581473,-69.19145071282213L-91.23724729581473,46.981849249447244M91.23724729581463,-46.981849249447095L22.80931182395362,-102.50585290788467M91.23724729581463,69.19145071282227L-22.80931182395371,102.50585290788482M-22.80931182395371,102.50585290788482L-22.80931182395371,-13.667447054384558M-22.80931182395371,-13.667447054384558L91.23724729581463,-46.981849249447095" style="fill:none;stroke:rgb(0,0,0);stroke-opacity:1;stroke-width:15;stroke-linecap:round"></path>

检查后发现，SVG路径中的线段并非按顺序绘制，而是通过多个M（Move To）命令跳转到不同位置绘制，导致路径动画无法按预期的折线顺序播放。

我想解决的问题：

• 是否可以通过向SVGRenderer传递参数来自定义/调整SVG路径中线段的顺序？
• 有没有优雅的实现方式，让SVG生成连续的路径（不用M命令重复跳转），甚至直接渲染<polyline>元素替代<path>？

我查阅过SVGRenderer的相关文档，未找到对应的自定义选项，恳请帮助！

1. 手动生成符合顺序的SVG（最稳妥方案） #

既然SVGRenderer默认输出的路径不符合顺序要求，最直接的方式是从BufferGeometry中提取原始点数据，自行构建符合要求的SVG元素：

实现步骤：

• 从BufferGeometry的position属性中提取所有顶点坐标，严格遵循原始顺序
• 用坐标列表构建<polyline>的points属性，或构建连续的<path>（仅开头用一次M，后续全用L连接）

示例代码：

// 从目标Line的BufferGeometry中提取顶点数据
const positions = yourLineObject.geometry.attributes.position.array;
const pointList = [];

// 遍历提取2D坐标（若为3D场景，可根据需求处理z轴）
for (let i = 0; i < positions.length; i += 3) {
    const x = positions[i];
    const y = positions[i + 1];
    pointList.push(`${x},${y}`);
}

// 创建polyline元素（推荐，更适合连续折线）
const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
polyline.setAttribute('points', pointList.join(' '));
polyline.setAttribute('style', 'fill:none;stroke:rgb(0,0,0);stroke-opacity:1;stroke-width:15;stroke-linecap:round');

// 替换SVGRenderer生成的内容
const svgContainer = document.querySelector('#your-svg-container-id');
svgContainer.innerHTML = '';
svgContainer.appendChild(polyline);

生成的<polyline>完全遵循BufferGeometry的点顺序，可直接用于CSS路径动画。

2. 扩展SVGRenderer（复用原有渲染流程） #

如果需要保留SVGRenderer的其他渲染逻辑，可以重写它的renderLine方法，修改路径生成逻辑：

实现思路：

• 保存原有的renderLine方法，执行后再修改生成的路径
• 从BufferGeometry提取顶点，重新构建连续的路径d属性

示例代码：

// 保存SVGRenderer原有renderLine方法
const originalRenderLine = THREE.SVGRenderer.prototype.renderLine;

// 重写renderLine方法
THREE.SVGRenderer.prototype.renderLine = function(line, scene, camera) {
    // 执行原有渲染逻辑
    originalRenderLine.call(this, line, scene, camera);
    
    // 获取刚生成的path元素
    const pathElement = this.svg.lastChild;
    if (!pathElement || pathElement.tagName !== 'path') return;
    
    // 从BufferGeometry提取顶点，构建连续路径
    const positions = line.geometry.attributes.position.array;
    let pathD = '';
    
    for (let i = 0; i < positions.length; i += 3) {
        const x = positions[i];
        const y = positions[i + 1];
        pathD += i === 0 ? `M${x},${y}` : `L${x},${y}`;
    }
    
    // 更新path的d属性
    pathElement.setAttribute('d', pathD);
};

注意：该方案依赖Three.js的内部实现，版本更新可能导致代码失效，需对应版本调整。

3. 调整BufferGeometry索引（不推荐） #

若不想修改SVG生成逻辑，可尝试调整BufferGeometry的index属性，让SVGRenderer按预期顺序绘制线段，但这种方式会影响Three.js的3D渲染效果，仅适用于3D渲染不受索引影响的场景。

内容的提问来源于stack exchange，提问作者Sebastian Bayer