React中使用THREE.js FontLoader加载自定义字体失败求助

错误原因分析 #

1. 字体文件格式不匹配：你加载的myFont.json并非Three.js要求的typeface.json格式。常见错误包括直接将TTF字体改后缀为json、使用旧的typeface.js格式（带JS模块包裹代码），导致FontLoader无法解析为合法JSON。
2. 文件路径错误：React项目中dist是打包输出目录，开发环境直接引用该路径无法正确加载；即便放到public文件夹，相对路径写法也会导致资源访问异常。
3. 字体文件语法错误：生成的json文件存在语法问题（如多余逗号、引号不闭合），触发JSON.parse解析失败。

解决办法 #

1. 生成标准typeface.json格式字体 #

Three.js的FontLoader仅支持纯JSON结构的typeface.json，需将TTF字体转换为该格式：

• 使用在线转换工具上传TTF字体，生成合规的json文件。
• 或用npm包typeface-npm本地生成，确保输出内容为纯JSON（无module.exports等JS模块代码，直接是{...}结构）。

2. 修正React项目资源路径 #

将生成的myFont.json放入项目public文件夹，使用根路径引用：

const loader = new FontLoader();

loader.load(
    '/myFont.json', // React会自动映射到public根目录
    (droidFont) => {
        // 文本几何创建逻辑
        const geometry = new TextGeometry('HTML', {
            font: droidFont,
            size: 10,
            height: 5,
        });
        geometry.center(); // 可选：让文本居中，避免位置偏移
        const textMesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
        textMesh.position.set(-8, 15, -40);
        scene.add(textMesh);
    },
    (xhr) => {
        console.log(`加载进度：${(xhr.loaded/xhr.total*100)}%`);
    },
    (error) => {
        console.error('字体加载失败：', error);
    }
);

注意：React开发环境中，public是唯一可通过根路径直接访问的静态资源目录，避免使用../../../这类相对路径，打包后路径会失效。

3. 验证字体文件合法性 #

打开myFont.json检查：

• 开头为{、结尾为}，无多余JS代码。
• 所有字符串、键名使用双引号，无语法错误。
• 可通过在线JSON校验工具验证文件是否合规。

4. 辅助排查步骤 #

• 打开浏览器开发者工具「Network」面板，查看myFont.json请求状态：
  • 404：说明路径错误，检查文件是否在public下、路径写法是否正确。
  • 200但仍报错：查看响应内容，确认返回的是合法JSON而非HTML或其他错误内容。
• 临时替换为Three.js官方测试字体，验证代码逻辑是否正常，若正常则问题出在你的字体文件上。

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