如何在Three.js（WebGL渲染器）中加载并显示SVG logo图形？

你已经成功迈出了第一步——用THREE.SVGLoader加载了SVG文档，接下来的核心就是把SVG的路径转换为Three.js能识别的几何体和网格。我来一步步帮你完成这个过程：

核心思路 #

SVGLoader加载完成后返回的svgDocument里包含了所有SVG路径信息，我们需要把这些路径转换为THREE.Shape对象，再通过ShapeGeometry（平面效果）或ExtrudeGeometry（带厚度的3D效果）生成几何体，最后搭配材质创建网格并添加到场景中。

完整代码实现 #

下面是修改后的preload函数，包含了从路径到网格的完整流程：

function preload () { 
  const svgLoader = new THREE.SVGLoader(); 
  svgLoader.load('images/logo.svg', svgDocument => { 
    // 获取SVG中的所有路径
    const paths = svgDocument.paths;

    // 遍历每个路径，转换为网格
    paths.forEach(path => {
      // 将SVG路径转换为Three.js Shape（true表示合并复合路径）
      const shapes = path.toShapes(true);
      
      // 处理每个Shape（一个路径可能对应多个Shape）
      shapes.forEach(shape => {
        // 1. 创建平面几何体（如果需要3D效果，改用ExtrudeGeometry）
        const geometry = new THREE.ShapeGeometry(shape);
        
        // 可选：创建带厚度的3D几何体
        // const geometry = new THREE.ExtrudeGeometry(shape, {
        //   depth: 5, // 厚度值，按需调整
        //   bevelEnabled: false // 关闭倒角（如果不需要）
        // });

        // 2. 根据SVG路径的样式创建材质
        const material = new THREE.MeshBasicMaterial({
          color: path.userData.style.fill || 0x000000, // 复用SVG填充色，默认黑色
          side: THREE.DoubleSide, // 双面渲染，避免SVG背面不可见
          transparent: true,
          opacity: path.userData.style.fillOpacity || 1,
        });

        // 3. 创建网格并调整坐标适配Three.js坐标系
        const logoMesh = new THREE.Mesh(geometry, material);

        // 关键：SVG的Y轴向下，Three.js的Y轴向上，翻转Y轴修正方向
        logoMesh.scale.y = -1;

        // 将SVG居中显示（基于Shape的边界盒计算）
        const boundingBox = new THREE.Box3().setFromObject(logoMesh);
        const center = boundingBox.getCenter(new THREE.Vector3());
        logoMesh.position.sub(center);

        // 可选：调整整体缩放（根据你的SVG实际尺寸调整数值）
        logoMesh.scale.multiplyScalar(0.02);

        // 4. 将网格添加到场景
        scene.add(logoMesh);

        // 可选：添加描边效果（还原SVG的描边样式）
        if (path.userData.style.stroke) {
          const lineGeometry = new THREE.EdgesGeometry(geometry);
          const lineMaterial = new THREE.LineBasicMaterial({
            color: path.userData.style.stroke,
            linewidth: path.userData.style.strokeWidth || 1
          });
          const lineMesh = new THREE.LineSegments(lineGeometry, lineMaterial);
          lineMesh.scale.copy(logoMesh.scale);
          lineMesh.position.copy(logoMesh.position);
          scene.add(lineMesh);
        }
      });
    });
  }, 
  // 加载进度回调（可选）
  (xhr) => {
    console.log(`SVG加载进度: ${(xhr.loaded / xhr.total * 100)}%`);
  },
  // 加载错误回调（可选）
  (error) => {
    console.error('SVG加载失败:', error);
  }); 
}

关键细节说明 #

• 坐标适配：SVG的坐标系原点在左上角且Y轴向下，和Three.js的中心原点、Y轴向上的规则冲突，所以必须通过logoMesh.scale.y = -1翻转Y轴，再借助边界盒计算实现居中。
• 几何体选择：ShapeGeometry适合平面SVG展示，ExtrudeGeometry可以快速给SVG添加厚度，实现轻量化3D效果。
• 样式还原：利用path.userData.style可以获取SVG原有的填充色、透明度、描边色等样式，让渲染效果更贴近原设计。
• 缩放调整：如果你的SVG尺寸过大，可能需要通过scale.multiplyScalar()缩小网格，避免超出相机视野范围。

内容的提问来源于stack exchange，提问作者Slava Fomin II