threejs系列：使用iconfont创造一个小动物场-五八三

内容：本文是使用threejs解析svg格式的iconfont图标内容，在第三维方向上延伸挤出，达到3D的效果。主要内容包括创建threejs环境和使用iconfont绘制3D内容。技术选用：react+three。

创世——创建Threejs环境

造物主来到这里，一片黑暗，于是打算创建世界（场景Scene），这个世界需要灯光Light，即使世界存在，没有光线是无法看清世界的。接着需要造物者的视角，所以来个摄像机Camera模拟造物者的视角。然后创建世界的第一个物体——立方体Cube，给他上点颜色色，让他在空白的世界能够区别出来，哐哐一顿造之后，出现了一个不断翻滚的立方体。

创建react环境和安装threejs

yarn add three

使用threejs绘制一个立方体

创建一个dom容器用来接受threejs

<div
  id="three-container"
  style={{
    width: '100%',
    height: '100%',
    background: '#fff'
  }}
  ></div>

threejs一般是使用canvas进行的绘制，这里创建了一个dom容器来接收threejs的canvas实例。

绘制一个立方体

// 获取容器dom
const container: any = document.getElementById('three-container');
// 创建场景
const scene = new THREE.Scene();
// 创建摄像机，模拟人眼的视角
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 容器中加入渲染器
container.appendChild(renderer.domElement);
// 创建鼠标控制器
const controls = createControls(camera, renderer)
// 创建光源
const light = createAmbientLight([-10, 6, 20])
scene.add(light)
scene.background = new THREE.Color(0.9, 0.9, 0.9);

// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({ color: 0x64B5D6 })
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 执行动画
function animate() {
  requestAnimationFrame(animate);
  // 在渲染的每一帧表更立方体的位置，达到旋转的效果
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

创建灯光

/* 创建光源 */
  const createAmbientLight = (pos?: any) => {
    const lightGroup = new THREE.Group();
    const ambientLight = new THREE.AmbientLight(0x404040);
    lightGroup.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(pos[0], pos[1], pos[2]);
    lightGroup.add(directionalLight);
    return lightGroup;
  };

AmbientLight是环境光，环境光会均匀的照亮场景中的所有物体。

DirectionalLight是平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果。

创建鼠标控制器

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';


const createControls = (camera: any, renderer: any) => {
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enableZoom = true;
    return controls;
  };

Orbitcontrols是轨道控制器，可以使得相机围绕目标进行轨道运动。

结果如图

造物——iconfont平面图标走向3维

造物者觉得只有一个立方体太单调了，打算创作一些东西来丰富刚刚创造的世界。于是从二维世界找了两个生物和栅栏模版，通过传送门来到3维世界，然后施加变幻魔法让2维生物变成3维生物，最后单调的世界出现了一个熊猫和两个树，还用栅栏围了起来，让这个世界变得精彩起来。

传送门——svg加载器

import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';


export function loadSvgAsync(url: string) {
  return new Promise((resolve, reject) => {
    const loader = new SVGLoader();
    loader.load(
      // resource URL
      url,
      // loaded
      function (data: any) {
        resolve(data);
      },
      // progressing
      function (xhr: any) {
        // console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
      },
      // errors
      function (error: any) {
        console.log(`An error happened in load ${url}`);
        reject(error);
      },
    );

loader来自于threejs的案例提供的加载器，可用于加载svg格式的文件并解析相关内容。

2D变3D魔法——svgShaper

export const svgShsper = (svgData: any) => {
  const extrudeSettings = {
    depth: 1,
    bevelEnabled: true,
    bevelSegments: 5,
    steps: 2,
    bevelSize: 0.5,
    bevelThickness: 0.5,
  };

  const material: any = {};
  const { paths } = svgData;
  const group = new Group();

  for (let i = 0; i < paths.length; i++) {
    const path = paths[i];

    const shapes = path.toShapes(true);

    for (let j = 0; j < shapes.length; j++) {
      const shape = shapes[j];
      // 使用拓展模型来从第三维挤出
      const geometry = new ExtrudeGeometry(shape, extrudeSettings);
      const mesh = new Mesh(
        geometry,
        new MeshPhongMaterial({
          ...material,
          color: material.color ?? path.color ?? '#00ff00',
        }),
      );
      group.add(mesh);
    }
  }

  // 计算中心和大小
  const box = new Box3().setFromObject(group);
  const center = new Vector3();
  box?.getCenter(center);

  const size = new Vector3();
  box?.getSize(size);

  // 整体尺寸单位化和平移中心
  group.children.forEach((mesh: any) => {
    if (mesh?.isMesh) {
      const { geometry } = mesh;

      geometry.translate(-center.x, -center.y, -center.z);
      geometry.scale(1 / size.x, 1 / size.y, 1 / size.z);
    }
  });
  group.rotateX(3.14)
  return group;
}

因为svg中的坐标数据是相对viewBox来的，且svg的坐标中心在视图左上角,threejs的坐标中心在视图中间，所以绘制完成后需要对模型进行重定位和比例缩放，让模型至于视图的中心。

绘制过程

const { scene } = three3d;
const PI = 3.14;
// 熊猫
const pandaData = await loadSvgAsync('../../../assets/panda2.svg');
const panda = svgShsper(pandaData)
panda.rotateX(-PI / 6)
scene.add(panda)
// 树木
const treeData = await loadSvgAsync('../../../assets/tree.svg');
const tree = svgShsper(treeData)
scene.add(tree)
tree.translateX(1.5)
tree.scale.set(2, 5, 1)
tree.translateY(-2)
const tree2 = svgShsper(treeData)
scene.add(tree2)
tree2.translateX(3)
tree2.scale.set(2, 5, 1)
tree2.translateY(-2.5)
tree2.translateZ(1)
// 绘制四边栅栏
const fenceData = await loadSvgAsync('../../../assets/fence.svg');
const fence = svgShsper(fenceData)
fence.scale.set(1, 1, 0.1)
for (let i = 0; i < 11; i++) {
  const fenceClone = fence.clone();
  fenceClone.position.set(-5.5 + i * 1, 0, -5)
  scene.add(fenceClone)
}
for (let i = 0; i < 11; i++) {
  const fenceClone = fence.clone();
  fenceClone.rotateY(PI / 2)
  fenceClone.position.set(-5.5, 0, -5 + i * 1)
  scene.add(fenceClone)
}
for (let i = 0; i < 11; i++) {
  const fenceClone = fence.clone();
  fenceClone.rotateY(PI / 2)
  fenceClone.position.set(4.5, 0, -5 + i * 1)
  scene.add(fenceClone)
}
for (let i = 0; i < 11; i++) {
  const fenceClone = fence.clone();
  fenceClone.position.set(-5.5 + i * 1, 0, 5)
  scene.add(fenceClone)
}

从iconfont选用了三个图标，分别是

tree

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688009174079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1320" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M327.111111 910.222222a184.888889 71.111111 0 1 0 369.777778 0 184.888889 71.111111 0 1 0-369.777778 0Z" fill="#83B79B" p-id="1321"></path><path d="M483.555556 611.555556h56.888888a14.222222 14.222222 0 0 1 14.222223 14.222222v256a28.444444 28.444444 0 0 1-28.444445 28.444444h-28.444444a28.444444 28.444444 0 0 1-28.444445-28.444444V625.777778a14.222222 14.222222 0 0 1 14.222223-14.222222z" fill="#472C1E" p-id="1322"></path><path d="M504.931556 28.444444L227.555556 649.102222h219.008z" fill="#3BAC17" p-id="1323"></path><path d="M504.931556 28.444444l277.376 620.657778H563.313778z" fill="#086F38" p-id="1324"></path><path d="M388.792889 649.102222L504.931556 28.444444l120.490666 620.657778z" fill="#02843F" p-id="1325"></path></svg>

panda

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688027702176" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22004" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M959.521801 454.543258a510.393978 510.393978 0 0 0-8.765022-55.826449 203.011396 203.011396 0 0 0-11.327106 40.453948 213.799116 213.799116 0 0 1-210.090837 181.638227 45.038729 45.038729 0 0 0-27.508685 13.48465c-23.395867 25.75568-36.273707 30.475308-68.434595 16.990658a99.381866 99.381866 0 0 0-60.680922-8.29306 43.690264 43.690264 0 0 1-58.051416-29.598805 68.569442 68.569442 0 0 0-46.252347-38.83579 169.164926 169.164926 0 0 1-113.945287-107.135539 294.774435 294.774435 0 0 1 49.21897-286.076836 19.148202 19.148202 0 0 1 26.295066-8.360483 38.363827 38.363827 0 0 0 40.925911-6.742325c23.800406-15.642193 48.072775-30.610154 71.401218-46.859156A38.296404 38.296404 0 0 0 557.948943 99.559863 93.516043 93.516043 0 0 0 487.154534 0.515114a98.84248 98.84248 0 0 0-96.819783 52.253016 74.165571 74.165571 0 0 0 3.236316 86.099486c8.023366 11.933915 7.281711 20.226974-4.652204 28.722303-10.855143 7.618827-20.833783 16.653542-31.082117 25.283718A283.177637 283.177637 0 0 0 254.409486 407.684101c-0.876502 26.969299 0.471963 53.534058-2.224968 80.031394a311.69767 311.69767 0 0 0 5.326437 137.88054 52.253016 52.253016 0 0 1 2.562083 13.08011c1.011349 13.08011-5.19159 16.181579-16.249002 10.585449a98.033401 98.033401 0 0 1-12.810417-8.158213 262.006737 262.006737 0 0 1-86.841142-111.72032 296.662286 296.662286 0 0 1 28.722303-317.293799c10.38318-13.956612 22.721634-26.362489 34.183586-39.442599A262.07416 262.07416 0 0 0 101.021599 281.130667a305.225038 305.225038 0 0 0-41.195604 168.558117 2132.05791 2132.05791 0 0 0 17.530045 215.75439 671.198422 671.198422 0 0 0 47.196272 142.330474 132.216987 132.216987 0 0 0 130.598829 90.481997c51.781054 0 62.905889-14.900538 48.342468-63.849815a517.001456 517.001456 0 0 1-14.698268-66.816438c-1.011349-6.135515 4.584781-13.484649 6.742325-20.226974 5.056744 4.921897 11.933915 9.034715 15.035384 15.035384 10.450603 21.103476 19.215625 42.881185 29.194266 64.254355a389.301827 389.301827 0 0 0 101.13487 152.376537 189.863863 189.863863 0 0 0 184.60485 33.711624c25.014025-8.023366 29.733652-18.136853 18.47397-41.53272a355.253087 355.253087 0 0 1-31.958619-119.002031 177.525409 177.525409 0 0 1 16.788388-111.248357 50.769705 50.769705 0 0 1 31.55408-23.05875c15.439924-1.955274 24.879178 14.293728 26.025373 28.115493a823.035574 823.035574 0 0 1 2.831776 100.123522c-1.011349 25.75568-9.102138 51.309091-10.248333 77.064771a47.870505 47.870505 0 0 0 47.196272 55.354486 143.476669 143.476669 0 0 0 127.227667-70.255024 908.460827 908.460827 0 0 0 63.849815-146.375868 805.775222 805.775222 0 0 0 42.409222-308.056815zM915.89896 64.904314a76.255692 76.255692 0 0 0-79.761701-3.438585 97.224322 97.224322 0 0 0-48.612161 74.570111 102.550758 102.550758 0 0 0 15.439924 21.979978c21.845132 19.080779 45.982654 35.666898 66.951284 55.489332a35.464628 35.464628 0 0 0 46.387193 6.742325 93.718313 93.718313 0 0 0 46.72431-59.80442 90.684267 90.684267 0 0 0-47.128849-95.471317z" fill="#0E407B" p-id="22005"></path><path d="M776.535109 372.893706a39.510023 39.510023 0 0 0-49.42124 3.843125c-15.911886 16.046733-34.251009 35.262358-26.36249 59.467303a413.102233 413.102233 0 0 0 38.228981 78.143543c5.19159 9.034715 17.395198 13.956612 21.979979 17.260352a57.781723 57.781723 0 0 0 50.904551-23.800406 103.8318 103.8318 0 0 0-35.262358-134.846494z m-213.664269-11.124836a42.072106 42.072106 0 0 0-55.01737-23.935253 96.550089 96.550089 0 0 0-66.074782 92.504695 56.500681 56.500681 0 0 0 34.992666 59.332457c21.305746 6.742325 38.566097-1.483311 58.455955-28.25034a119.136877 119.136877 0 0 1 16.653541-20.698937 59.80442 59.80442 0 0 0 10.922566-78.615506z m86.841142 205.16894c-20.698937-5.19159-42.072106-8.293059-64.726317-12.338454a110.911241 110.911241 0 0 0-23.935253 7.88852c-8.158213 4.719627-9.102138 13.08011 0 17.86716 27.710954 14.293728 53.938597 40.453948 88.25703 14.293728 5.528706-4.180241 10.720296-8.899869 16.181579-13.484649-5.124167-4.652204-9.708948-12.540724-15.844463-14.158882z" fill="#0E407B" p-id="22006"></path><path d="M959.521801 454.543258a510.393978 510.393978 0 0 0-8.765022-55.826449 203.011396 203.011396 0 0 0-11.327106 40.453948 213.799116 213.799116 0 0 1-210.090837 181.638227 45.038729 45.038729 0 0 0-27.508685 13.48465c-23.395867 25.75568-36.273707 30.475308-68.434595 16.990658a99.381866 99.381866 0 0 0-60.680922-8.29306 43.690264 43.690264 0 0 1-58.051416-29.598805 68.569442 68.569442 0 0 0-46.252347-38.83579 169.164926 169.164926 0 0 1-113.945287-107.135539 294.774435 294.774435 0 0 1 49.21897-286.076836 19.148202 19.148202 0 0 1 26.295066-8.360483 38.363827 38.363827 0 0 0 40.925911-6.742325c23.800406-15.642193 48.072775-30.610154 71.401218-46.859156A38.296404 38.296404 0 0 0 557.948943 99.559863 93.516043 93.516043 0 0 0 487.154534 0.515114a98.84248 98.84248 0 0 0-96.819783 52.253016 74.165571 74.165571 0 0 0 3.236316 86.099486c8.023366 11.933915 7.281711 20.226974-4.652204 28.722303-10.855143 7.618827-20.833783 16.653542-31.082117 25.283718A283.177637 283.177637 0 0 0 254.409486 407.684101c-0.876502 26.969299 0.471963 53.534058-2.224968 80.031394a311.69767 311.69767 0 0 0 5.326437 137.88054 52.253016 52.253016 0 0 1 2.562083 13.08011c1.011349 13.08011-5.19159 16.181579-16.249002 10.585449a98.033401 98.033401 0 0 1-12.810417-8.158213 262.006737 262.006737 0 0 1-86.841142-111.72032 296.662286 296.662286 0 0 1 28.722303-317.293799c10.38318-13.956612 22.721634-26.362489 34.183586-39.442599A262.07416 262.07416 0 0 0 101.021599 281.130667a305.225038 305.225038 0 0 0-41.195604 168.558117 2132.05791 2132.05791 0 0 0 17.530045 215.75439 671.198422 671.198422 0 0 0 47.196272 142.330474 132.216987 132.216987 0 0 0 130.598829 90.481997c51.781054 0 62.905889-14.900538 48.342468-63.849815a517.001456 517.001456 0 0 1-14.698268-66.816438c-1.011349-6.135515 4.584781-13.484649 6.742325-20.226974 5.056744 4.921897 11.933915 9.034715 15.035384 15.035384 10.450603 21.103476 19.215625 42.881185 29.194266 64.254355a389.301827 389.301827 0 0 0 101.13487 152.376537 189.863863 189.863863 0 0 0 184.60485 33.711624c25.014025-8.023366 29.733652-18.136853 18.47397-41.53272a355.253087 355.253087 0 0 1-31.958619-119.002031 177.525409 177.525409 0 0 1 16.788388-111.248357 50.769705 50.769705 0 0 1 31.55408-23.05875c15.439924-1.955274 24.879178 14.293728 26.025373 28.115493a823.035574 823.035574 0 0 1 2.831776 100.123522c-1.011349 25.75568-9.102138 51.309091-10.248333 77.064771a47.870505 47.870505 0 0 0 47.196272 55.354486 143.476669 143.476669 0 0 0 127.227667-70.255024 908.460827 908.460827 0 0 0 63.849815-146.375868 805.775222 805.775222 0 0 0 42.409222-308.056815z" fill="#0E407B" p-id="22007"></path><path d="M549.858153 652.430487a55.421909 55.421909 0 0 0 61.287731 40.925911c24.879178-1.011349 38.700944-10.450603 41.195604-27.373838zM915.831537 64.971738a76.255692 76.255692 0 0 0-79.761701-3.438586 97.224322 97.224322 0 0 0-48.612161 74.570111 102.550758 102.550758 0 0 0 15.439923 21.979978c21.845132 19.080779 45.982654 35.666898 66.951284 55.489332a35.464628 35.464628 0 0 0 46.387194 6.742325 93.718313 93.718313 0 0 0 46.72431-59.80442 90.684267 90.684267 0 0 0-47.196273-95.808433z m-139.296428 308.124237a39.510023 39.510023 0 0 0-49.42124 3.843125c-15.911886 16.046733-34.251009 35.262358-26.36249 59.467304a413.102233 413.102233 0 0 0 38.228981 78.210966c5.19159 9.034715 17.395198 13.956612 21.979979 17.260352a57.781723 57.781723 0 0 0 50.904551-23.800406 103.8318 103.8318 0 0 0-35.329781-134.981341z m-213.664269-11.124835a42.072106 42.072106 0 0 0-55.01737-23.935253 96.550089 96.550089 0 0 0-66.074782 92.504695 56.500681 56.500681 0 0 0 34.992666 59.332457c21.305746 6.742325 38.566097-1.483311 58.455955-28.250341a119.136877 119.136877 0 0 1 16.653541-20.698936 59.80442 59.80442 0 0 0 10.922566-79.154892z m86.841142 205.16894c-20.698937-5.19159-42.072106-8.293059-64.726317-12.338454a110.978664 110.978664 0 0 0-23.935253 7.888519c-8.158213 4.652204-9.102138 13.08011 0 17.867161 27.710954 14.293728 53.938597 40.453948 88.25703 14.293728 5.528706-4.180241 10.720296-8.899869 16.181579-13.484649-5.326436-4.921897-9.708948-12.810417-15.911886-14.428575z" fill="#0E407B" p-id="22008"></path><path d="M549.925576 652.430487a55.354486 55.354486 0 0 0 61.287732 40.925911c24.879178-1.011349 38.700944-10.450603 41.195603-27.373838z" fill="#0E407B" p-id="22009"></path></svg>

fence

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688090422254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2972" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1002.666667 315.733333H21.333333c-12.8 0-21.333333 8.533333-21.333333 21.333334v53.333333c0 12.8 8.533333 21.333333 21.333333 21.333333h981.333334c12.8 0 21.333333-8.533333 21.333333-21.333333v-53.333333c0-12.8-8.533333-21.333333-21.333333-21.333334zM1002.666667 708.266667H21.333333c-12.8 0-21.333333 8.533333-21.333333 21.333333v53.333333c0 12.8 8.533333 21.333333 21.333333 21.333334h981.333334c12.8 0 21.333333-8.533333 21.333333-21.333334v-53.333333c0-10.666667-8.533333-21.333333-21.333333-21.333333z" fill="#A67C51" p-id="2973"></path><path d="M951.466667 102.4L872.533333 6.4c-8.533333-10.666667-23.466667-10.666667-32 0l-78.933333 96c-2.133333 4.266667-4.266667 8.533333-4.266667 12.8V1002.666667c0 12.8 8.533333 21.333333 21.333334 21.333333h155.733333c12.8 0 21.333333-8.533333 21.333333-21.333333V117.333333c0-6.4-2.133333-10.666667-4.266666-14.933333zM529.066667 8.533333c-8.533333-10.666667-23.466667-10.666667-32 0l-78.933334 96c-2.133333 4.266667-4.266667 8.533333-4.266666 12.8V1002.666667c0 12.8 8.533333 21.333333 21.333333 21.333333h155.733333c12.8 0 21.333333-8.533333 21.333334-21.333333V117.333333c0-4.266667-2.133333-10.666667-4.266667-12.8L529.066667 8.533333zM183.466667 8.533333c-8.533333-10.666667-23.466667-10.666667-32 0L72.533333 102.4c-2.133333 4.266667-4.266667 8.533333-4.266666 14.933333V1002.666667c0 12.8 8.533333 21.333333 21.333333 21.333333h155.733333c12.8 0 21.333333-8.533333 21.333334-21.333333V117.333333c0-4.266667-2.133333-10.666667-4.266667-12.8L183.466667 8.533333z" fill="#BE8E5F" p-id="2974"></path><path d="M855.466667 757.333333m-27.733334 0a27.733333 27.733333 0 1 0 55.466667 0 27.733333 27.733333 0 1 0-55.466667 0Z" fill="#E6E6E5" p-id="2975"></path><path d="M512 757.333333m-27.733333 0a27.733333 27.733333 0 1 0 55.466666 0 27.733333 27.733333 0 1 0-55.466666 0Z" fill="#E6E6E5" p-id="2976"></path><path d="M168.533333 757.333333m-27.733333 0a27.733333 27.733333 0 1 0 55.466667 0 27.733333 27.733333 0 1 0-55.466667 0Z" fill="#E6E6E5" p-id="2977"></path><path d="M855.466667 360.533333m-27.733334 0a27.733333 27.733333 0 1 0 55.466667 0 27.733333 27.733333 0 1 0-55.466667 0Z" fill="#E6E6E5" p-id="2978"></path><path d="M512 360.533333m-27.733333 0a27.733333 27.733333 0 1 0 55.466666 0 27.733333 27.733333 0 1 0-55.466666 0Z" fill="#E6E6E5" p-id="2979"></path><path d="M168.533333 360.533333m-27.733333 0a27.733333 27.733333 0 1 0 55.466667 0 27.733333 27.733333 0 1 0-55.466667 0Z" fill="#E6E6E5" p-id="2980"></path><path d="M876.8 247.466667a81.066667 21.333333 90 1 0 42.666667 0 81.066667 21.333333 90 1 0-42.666667 0Z" fill="#A67C51" p-id="2981"></path><path d="M887.466667 221.866667a38.4 10.666667 90 1 0 21.333333 0 38.4 10.666667 90 1 0-21.333333 0Z" fill="#BE8E5F" p-id="2982"></path><path d="M787.2 627.2a81.066667 21.333333 90 1 0 42.666667 0 81.066667 21.333333 90 1 0-42.666667 0Z" fill="#A67C51" p-id="2983"></path><path d="M797.866667 601.6a38.4 10.666667 90 1 0 21.333333 0 38.4 10.666667 90 1 0-21.333333 0Z" fill="#BE8E5F" p-id="2984"></path><path d="M174.933333 881.066667a81.066667 21.333333 90 1 0 42.666667 0 81.066667 21.333333 90 1 0-42.666667 0Z" fill="#A67C51" p-id="2985"></path><path d="M185.6 855.466667a38.4 10.666667 90 1 0 21.333333 0 38.4 10.666667 90 1 0-21.333333 0Z" fill="#BE8E5F" p-id="2986"></path><path d="M98.133333 480a81.066667 21.333333 90 1 0 42.666667 0 81.066667 21.333333 90 1 0-42.666667 0Z" fill="#A67C51" p-id="2987"></path><path d="M108.8 454.4a38.4 10.666667 90 1 0 21.333333 0 38.4 10.666667 90 1 0-21.333333 0Z" fill="#BE8E5F" p-id="2988"></path><path d="M520.533333 529.066667a98.133333 25.6 90 1 0 51.2 0 98.133333 25.6 90 1 0-51.2 0Z" fill="#A67C51" p-id="2989"></path><path d="M533.333333 497.066667a46.933333 12.8 90 1 0 25.6 0 46.933333 12.8 90 1 0-25.6 0Z" fill="#BE8E5F" p-id="2990"></path></svg>

注：svg的路径需要放在静态文件路径。