如何用Three.js生成可导出规整SVG的线框球体适配Axidraw绘图机？

这个问题我之前帮人处理过——Three.js默认的WireframeGeometry本质是拆解网格三角面的边缘，导出的SVG全是零散的小线段，完全不符合Axidraw这类绘图机需要的连续闭合路径需求。要生成规整的、由完整水平/垂直环形组成的SVG，得换个思路：手动构建连续的经纬环路径，而不是依赖网格的线框。

核心思路 #

SphereGeometry的经纬线本身是连续的环形，但Three.js的网格线框会把这些环形拆成三角面的边片段。我们需要直接生成每个完整的纬度环（水平）和经度环（垂直），用LineLoop（闭合线段）来创建这些环，这样SVGRenderer导出时会把每个环输出为单一的<path>元素，完美适配Axidraw的绘图需求。

完整实现代码 #

// 初始化场景、相机、渲染器（包括SVGRenderer）
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 准备SVGRenderer（用于导出）
const svgRenderer = new THREE.SVGRenderer();
svgRenderer.setSize(window.innerWidth, window.innerHeight);

// 生成球体的完整经纬环
const sphereRadius = 1;
const latitudeSegments = 16; // 水平环数量
const longitudeSegments = 32; // 垂直环数量

// 1. 生成水平纬度环（绕Y轴的闭合圆）
for (let lat = 0; lat <= latitudeSegments; lat++) {
    // 计算当前纬度的高度和半径
    const theta = (lat / latitudeSegments) * Math.PI;
    const ringRadius = sphereRadius * Math.sin(theta);
    const y = sphereRadius * Math.cos(theta);

    // 创建CircleGeometry作为环形路径
    const circleGeometry = new THREE.CircleGeometry(ringRadius, longitudeSegments);
    // 平移到当前纬度的Y高度
    circleGeometry.translate(0, y, 0);
    // 用LineLoop创建闭合环形（避免拆成线段）
    const ring = new THREE.LineLoop(circleGeometry, new THREE.LineBasicMaterial({ color: 0x000000 }));
    scene.add(ring);
}

// 2. 生成垂直经度环（半圆绕Y轴旋转）
for (let lon = 0; lon < longitudeSegments; lon++) {
    // 计算当前经度的旋转角度
    const phi = (lon / longitudeSegments) * Math.PI * 2;

    // 创建半圆路径（从顶部到底部的垂直环）
    const path = new THREE.Path();
    path.moveTo(0, sphereRadius, 0);
    for (let i = 1; i <= latitudeSegments; i++) {
        const theta = (i / latitudeSegments) * Math.PI;
        const x = sphereRadius * Math.sin(theta) * Math.cos(phi);
        const y = sphereRadius * Math.cos(theta);
        const z = sphereRadius * Math.sin(theta) * Math.sin(phi);
        path.lineTo(x, y, z);
    }
    path.lineTo(0, -sphereRadius, 0); // 闭合到底部
    path.lineTo(0, sphereRadius, 0); // 闭合回顶部

    // 用Path创建LineLoop
    const curveGeometry = new THREE.PathGeometry(path);
    const ring = new THREE.LineLoop(curveGeometry, new THREE.LineBasicMaterial({ color: 0x000000 }));
    scene.add(ring);
}

// 添加环境光和相机位置
scene.add(new THREE.AmbientLight('#fff'));
camera.position.z = 3;

// 渲染到页面（可选）
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

// 导出SVG的函数
function exportSVG() {
    const svgString = svgRenderer.render(scene, camera);
    const blob = new Blob([svgString], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'wireframe-sphere.svg';
    a.click();
    URL.revokeObjectURL(url);
}
// 可以添加按钮触发exportSVG()

关键细节说明 #

• 用LineLoop而非LineSegments：LineLoop会创建闭合的连续路径，导出SVG时每个环是一个完整的<path>，而LineSegments会拆成独立线段。
• 手动计算经纬坐标：直接基于球体的极坐标公式生成每个环的点，确保路径连续无断点。
• 适配Axidraw需求：导出的SVG中每个环形都是单一闭合路径，绘图机可以连续绘制，无需频繁抬笔，避免线条断裂或多余的移动。

验证导出效果 #

运行代码后调用exportSVG()，得到的SVG文件中，每个水平/垂直环都是独立的<path>元素，路径是连续的闭合曲线，完全符合Axidraw的绘图要求。

内容的提问来源于stack exchange，提问作者iamrobin.