Vue中使用Three.js FontLoader加载字体失败的问题解决

一、代码本身存在的错误 #

你的代码里有两处明显错误，即使字体加载成功也会导致后续逻辑失败：

1. 类名拼写错误：所有Three应该改为THREE（大写），Three.js的全局对象默认是大写的THREE。
2. Geometry创建错误：const geometry = new Three.MeshBasicMaterial(shapes) 这里应该使用THREE.ShapeGeometry，而不是MeshBasicMaterial，ShapeGeometry才是用来将字体形状转为几何体的类。

修正后的核心代码片段：

const loader = new THREE.FontLoader();

loader.load(
  // 正确路径（需结合下方方案调整）
  '/fonts/noto_sans_kr_regular.json',
  font => {
    const color = 0x006699;

    const matLite = new THREE.MeshBasicMaterial({
      color: color,
      transparent: true,
      opacity: 0.4,
      side: THREE.DoubleSide,
    });

    const message = '   Three.js\nSimple text.';

    const shapes = font.generateShapes(message, 100);

    // 修正为ShapeGeometry
    const geometry = new THREE.ShapeGeometry(shapes);

    geometry.computeBoundingBox();

    const xMid = 
      -0.5 * 
      (geometry.boundingBox.max.x - geometry.boundingBox.min.x);

    geometry.translate(xMid, 0, 0);

    const text = new THREE.Mesh(geometry, matLite);
    text.position.z = -150;
    state.scene.add(text);
  },
  // 添加加载进度和错误回调，方便排查
  (xhr) => console.log((xhr.loaded / xhr.total * 100) + '% loaded'),
  (err) => console.error('Font loading error:', err)
);

二、字体文件路径问题（加载失败的核心原因） #

从你的路径截图和尝试的路径来看，问题出在静态资源的访问规则上：

• 大多数前端构建工具（如Vite、Webpack）默认不会把src目录下的文件直接暴露为可通过HTTP访问的静态资源，所以你尝试的http://localhost:8080/src/store/fonts/...这类路径会返回404。

解决路径问题的两种方案： #

1. 将字体文件移到public目录

   • 在项目根目录创建public/fonts文件夹，把noto_sans_kr_regular.json放进去。
   • 加载路径使用绝对路径：'/fonts/noto_sans_kr_regular.json'，构建工具会自动将public目录下的文件映射到服务器根路径。

2. 通过模块导入获取正确路径（适用于保留src目录的情况）

   • 如果不想移动文件，在支持ES模块的构建工具中，可以直接导入字体文件的路径：

     import fontUrl from '@/store/fonts/noto_sans_kr_regular.json';
     // 然后传给loader
     loader.load(fontUrl, ...);
     

   • 注意：需要确保构建工具能正确处理JSON文件的导入（Vite、Webpack默认支持）。

三、其他排查点 #

• 检查服务器是否正常运行，确保http://localhost:8080能正常访问项目。
• 打开浏览器开发者工具的Network面板，查看字体文件的请求状态：如果是404，说明路径不正确；如果是500，说明服务器端有问题。
• 确认字体文件是Three.js兼容的JSON格式（可通过官方工具生成，避免格式错误）。

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