使用Three.js与ReactJS实现SVG模型外边界扩展及CSG差集运算的问题

我完全懂你现在的头疼之处——想给SVG导出的3D模型做外边界扩展，再通过CSG差集得到轮廓效果，但不管怎么调厚度参数，扩展的效果都几乎看不见，完全达不到你想要的那种“外扩一圈”的效果对吧？我来帮你一步步排查代码里的问题，然后给出能实现预期效果的调整方案。

一、当前代码里的核心问题 #

先来看你现在的扩展逻辑：你直接对挤出后的3D模型顶点做偏移，用法线乘以厚度，但这里有几个致命的小错误，导致扩展效果异常：

• 位运算误用：代码里normals[i + 2] & thickness * 2这里的&是位运算符号，不是乘法！这会让z轴方向的偏移计算完全出错，数值被截断成二进制运算的结果，自然看不到效果。应该改成乘法*。
• ExtrudeGeometry顶点结构问题：ExtrudeGeometry的顶点包含了模型的顶部、底部和侧面，侧面顶点的法线是垂直于挤出方向的，你对所有顶点统一偏移，会导致侧面顶点被错误拉扯，不仅扩展效果乱，还会破坏模型结构。
• React Three Fiber使用误区：你在组件里手动创建了new THREE.Scene()，但R3F已经自动帮你管理场景了，手动创建的场景和R3F的场景是完全分离的，这会导致后续的CSG运算和渲染出现不可预料的问题；另外你手动创建THREE.Mesh再在JSX里引用geometry，也不符合R3F的组件化写法，容易引发ref和矩阵更新的问题。

二、正确的实现思路：先偏移2D Shape，再挤出3D模型 #

最可靠的方式是先对SVG生成的2D Shape做外扩，再分别挤出原模型和外扩后的模型，最后用CSG做差集。这样能保证外扩是沿着2D轮廓的法线方向，不会破坏3D模型的结构。

三、修改后的完整代码 #

我把你的代码做了针对性调整，修复了所有问题，并且改成符合R3F的写法：

import React, { useRef, useMemo } from 'react';
import { useLoader, useThree } from '@react-three/fiber';
import * as THREE from 'three';
import { CSG } from 'three-csg-ts';
import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader";
import { BufferGeometryUtils } from 'three/examples/jsm/Addons.js';

const Figure = () => {
  const { scene } = useThree(); // 用R3F提供的场景，不要手动创建
  const subtractedMeshRef = useRef<THREE.Mesh>(null);

  // 加载SVG并处理成Shape，同时生成外扩后的Shape
  const { originalShapes, expandedShapes } = useMemo(() => {
    const svgData = useLoader(SVGLoader, "/penguin.svg");
    const originalShapes = svgData.paths.flatMap((path) => path.toShapes(true));
    
    // 生成外扩后的Shape：这里用Path的computeOffsetPoints来实现2D轮廓外扩
    const expandedShapes = originalShapes.map(shape => {
      const path = new THREE.Path(shape.getPoints());
      // 外扩厚度：这里设为5，你可以根据需求调整
      const offsetPoints = path.computeOffsetPoints(5);
      // 用偏移后的点创建新的Shape
      const expandedShape = new THREE.Shape(offsetPoints);
      // 确保Shape是闭合的
      expandedShape.autoClose = true;
      return expandedShape;
    });

    return { originalShapes, expandedShapes };
  }, []);

  // 预先生成原模型和外扩模型的Geometry与Material
  const [originalGeo, expandedGeo, material, material2] = useMemo(() => {
    // 挤出配置
    const extrudeSettings = {
      steps: 1,
      depth: 50,
      bevelEnabled: false
    };

    // 原模型
    const originalGeo = new THREE.ExtrudeGeometry(originalShapes, extrudeSettings);
    originalGeo.center();
    
    // 外扩模型
    const expandedGeo = new THREE.ExtrudeGeometry(expandedShapes, extrudeSettings);
    expandedGeo.center();

    // 材质
    const material = new THREE.MeshPhongMaterial({ color: 'black' });
    const material2 = new THREE.MeshPhongMaterial({ color: 'red' });

    return [originalGeo, expandedGeo, material, material2];
  }, [originalShapes, expandedShapes]);

  // 执行CSG差集运算
  const subtractedMesh = useMemo(() => {
    const originalMesh = new THREE.Mesh(originalGeo, material);
    const expandedMesh = new THREE.Mesh(expandedGeo, material2);

    // 必须更新矩阵，CSG运算依赖矩阵数据
    originalMesh.updateMatrix();
    expandedMesh.updateMatrix();

    // 执行差集：外扩模型 - 原模型 = 轮廓
    const csgOriginal = CSG.fromMesh(originalMesh);
    const csgExpanded = CSG.fromMesh(expandedMesh);
    const csgResult = csgExpanded.subtract(csgOriginal);

    const resultMesh = CSG.toMesh(csgResult, new THREE.Matrix4());
    resultMesh.material = material2; // 轮廓用红色材质
    return resultMesh;
  }, [originalGeo, expandedGeo, material, material2]);

  return (
    <group>
      {/* 渲染差集后的轮廓模型 */}
      <mesh ref={subtractedMeshRef} geometry={subtractedMesh.geometry} material={subtractedMesh.material} scale={[0.05, 0.05, 0.05]} />
      {/* 可选：渲染原模型做对比 */}
      {/* <mesh geometry={originalGeo} material={material} scale={[0.05, 0.05, 0.05]} /> */}
      
      {/* 补光，让材质显示正常 */}
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1} />
    </group>
  );
};

export default Figure;

四、关键调整说明 #

1. 2D Shape外扩：用Path.computeOffsetPoints方法直接对Shape的2D轮廓做外扩，这是最稳定的方式，能保证外扩方向完全沿着轮廓的法线，不会出现3D顶点偏移的混乱问题。
2. 修复CSG运算逻辑：用useMemo缓存模型数据，避免重复计算；确保两个模型都更新了矩阵后再做CSG运算，这是CSG能正确执行的前提。
3. R3F正确用法：用useThree获取R3F管理的场景，移除手动创建的Scene；用组件化的方式写mesh，缓存几何和材质提升性能。
4. 补光：添加了环境光和方向光，让Phong材质能正确显示明暗，你之前的代码里没有光，材质可能会显示全黑。

五、额外提示 #

• 如果你觉得Path.computeOffsetPoints的外扩效果不够理想（比如某些复杂拐角处有异常），可以尝试用第三方库three-path-offset来做更精确的2D路径偏移。
• CSG运算后的模型如果出现面缺失，可以尝试反转其中一个模型的面法线（比如originalGeo.scale(-1, 1, 1)），因为CSG对法线方向很敏感。

内容来源于stack exchange