ThreeJS TextGeometry部署Vercel时字体资源404错误求助

本地开发时3D文本显示正常，但部署到Vercel后出现/static/helvetiker_regular.typeface.json 404，核心原因是本地相对路径和Vercel部署后的静态资源路径规则不匹配，以下是几种可行的解决方法：

方法1：迁移静态资源到public目录（推荐） #

绝大多数React/Vite类项目中，public目录是默认的静态资源根目录，部署后会直接映射到网站根路径：

1. 把helvetiker_regular.typeface.json移动到项目根目录下的public文件夹（如果没有就新建）
2. 修改字体加载路径为绝对根路径：

loader.load(
    "/helvetiker_regular.typeface.json", // 直接用根路径访问public下的文件
    function (font) {
        // 原有逻辑不变
    }
);

方法2：配置Vercel识别static目录并使用绝对路径 #

如果不想移动文件，需确保Vercel能正确解析static目录的静态资源：

1. 在项目根目录新建vercel.json文件，添加路由规则：

{
  "routes": [
    { "src": "/static/(.*)", "dest": "/static/$1" }
  ]
}

2. 将加载路径改为绝对路径，替换原来的相对路径：

loader.load(
    "/static/helvetiker_regular.typeface.json", // 绝对路径指向static目录
    function (font) {
        // 原有逻辑不变
    }
);

方法3：直接导入字体文件作为模块（最稳定） #

通过模块导入的方式避免路径依赖，让构建工具自动处理文件：

1. 修改代码，直接import字体JSON文件，并用FontLoader的parse方法解析：

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
// 直接导入字体文件
import fontJson from '../static/helvetiker_regular.typeface.json';

const loader = new FontLoader();
// 用parse方法替代load，直接解析导入的JSON
const font = loader.parse(fontJson);

const geometry = new TextGeometry("Hello three.js!", {
    font: font,
    size: 0.5,
    height: 0.2,
    curveSegments: 5,
    bevelEnabled: true,
    bevelThickness: 0.03,
    bevelSize: 0.02,
    bevelOffset: 0,
    bevelSegments: 4,
});

geometry.center();

const material = new THREE.MeshNormalMaterial();
const text = new THREE.Mesh(geometry, material);
scene.add(text);

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