threejs 显示svg

Three.js 可以通过 `SVGLoader` 来加载 SVG 文件并在场景中显示。以下是一个基本示例：

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载 SVG 文件
var loader = new THREE.SVGLoader();
loader.load('path/to/svg/file.svg', function (data) {
  var paths = data.paths;
  var group = new THREE.Group();

  // 循环遍历 SVG 路径并创建对应的形状
  for (var i = 0; i < paths.length; i++) {
    var path = paths[i];
    var shapes = path.toShapes(true);
    var geometry = new THREE.ShapeBufferGeometry(shapes);
    var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
    var mesh = new THREE.Mesh(geometry, material);
    group.add(mesh);
  }

  // 将 SVG 组添加到场景中
  scene.add(group);
});

// 渲染场景
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

这段代码中，我们使用 `SVGLoader` 加载 SVG 文件，然后遍历每个路径并将其转换为 `THREE.ShapeBufferGeometry` 对象。最后，我们将这些形状添加到一个 `THREE.Group` 中，并将其添加到场景中进行渲染。