如何在Three.js中缩放2D SVG组对象并匹配网格线？

直接给你可行的解决思路和代码：

核心思路 #

SVGLoader加载的路径默认使用SVG自身的像素坐标系，和Three.js场景的网格单位（比如GridHelper的1单位）不匹配，所以需要先获取SVG的实际边界，计算缩放比例将其对齐到场景坐标系，同时调整位置让SVG中心与网格坐标对齐。

具体实现步骤 #

1. 计算SVG整体包围盒：遍历所有加载的SVG路径，合并它们的边界，得到整个SVG瓦片的宽高范围。
2. 计算适配网格的缩放因子：根据你期望的瓦片对应网格单位数，用目标尺寸除以SVG原始尺寸得到缩放比例。
3. 应用缩放并修正位置：给SVG组设置缩放，同时调整位置让SVG中心对齐到网格的坐标原点（或目标瓦片位置）。

代码示例 #

import * as THREE from 'three';
import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';

const scene = new THREE.Scene();
// 假设你的网格辅助是1单位对应一个瓦片
const gridHelper = new THREE.GridHelper(20, 20);
scene.add(gridHelper);

const loader = new SVGLoader();
loader.load('your-tile.svg', (data) => {
  const svgGroup = new THREE.Group();
  const paths = data.paths;

  // 计算整个SVG的合并包围盒
  const combinedBox = new THREE.Box3();
  paths.forEach(path => {
    const shapes = path.toShapes(true);
    shapes.forEach(shape => {
      const geometry = new THREE.ShapeGeometry(shape);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, fill: true });
      const mesh = new THREE.Mesh(geometry, material);
      svgGroup.add(mesh);
      // 更新合并包围盒
      combinedBox.expandByObject(mesh);
    });
  });

  // 计算缩放因子：让SVG最大边适配1个网格单位（可根据需求修改目标值）
  const svgSize = combinedBox.getSize(new THREE.Vector3());
  const scaleFactor = 1 / Math.max(svgSize.x, svgSize.y);
  svgGroup.scale.setScalar(scaleFactor);

  // 调整位置，让SVG中心对齐到网格原点（或目标瓦片坐标）
  const svgCenter = combinedBox.getCenter(new THREE.Vector3());
  svgCenter.multiplyScalar(scaleFactor); // 缩放后的中心偏移
  svgGroup.position.set(-svgCenter.x, -svgCenter.y, 0);

  // 如果需要将瓦片放到指定网格位置，比如(5,5)
  // svgGroup.position.add(new THREE.Vector3(5, 5, 0));

  scene.add(svgGroup);
});

补充说明 #

• 你之前尝试获取object2的世界缩放没用，是因为世界缩放是组的层级缩放结果，而问题根源是SVG原始尺寸和场景坐标系不匹配，必须先基于SVG自身的边界计算缩放。
• 如果你的GridHelper单位不是1，比如每个网格代表5个单位，把代码中的1替换成对应数值即可。
• 若SVG有复杂路径，确保path.toShapes(true)的参数正确（true代表保留孔洞）。

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