如何将Google Font的TTF转为JSON适配ThreeJS？含报错及加载问题

一、正确的TTF转JSON方法 #

普通在线转换器生成的JSON不符合Three.js FontLoader的要求，必须使用Three.js官方指定的typeface.json格式。推荐两种转换方式：

• 本地脚本转换：从Three.js仓库中获取utils/fonts/convert_ttf_to_json.py脚本，将下载的Google Font TTF文件放到脚本同目录，运行命令：

  python convert_ttf_to_json.py 你的字体文件.ttf
  

  生成的文件就是FontLoader可直接解析的标准格式。
• npm工具转换：安装typeface-generator包，通过命令行完成转换，同样能生成符合要求的字体JSON。

二、修复代码中的逻辑错误 #

你当前的代码存在逻辑问题：FontLoader.parse()已经将JSON解析为字体对象，不需要再调用loader.load()（该方法用于加载远程/本地文件URL）。正确写法如下：

import LatoFont from '../assets/fonts/lato-bold.typeface.json'
import * as THREE from 'three'

const loader = new THREE.FontLoader();
const font = loader.parse(LatoFont);

// 直接用解析后的字体对象创建TextGeometry
const textGeo = new THREE.TextGeometry("Krypton", {
    font: font,
    size: 200,
    height: 50,
    curveSegments: 12,
    bevelEnabled: false,
    bevelThickness: 0.5,
    bevelSize: 0.3,
    bevelOffset: 0,
    bevelSegments: 5,
})

const materials = [
    new THREE.MeshPhongMaterial({ color: 0x00ff00, flatShading: true }), // 正面
    new THREE.MeshPhongMaterial({ color: 0x00ff00 }) // 侧面
]
const textMesh = new THREE.Mesh(textGeo, materials);

textGeo.computeBoundingBox();
const centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);

textMesh.position.x = centerOffset;
textMesh.position.y = 100;
textMesh.position.z = 0;

textMesh.rotation.y = Math.PI * 2;

group.add(textMesh);

三、Vite构建库的资源加载问题 #

构建组件库时，public目录下的资源不会自动打包到库中，导致其他项目引用时无法加载。调整方案如下：

1. 修改项目结构 #

将字体JSON文件从static目录移到源码目录（比如lib/assets/fonts），和业务代码放在一起。

2. 调整Vite配置 #

确保字体JSON被正确打包，同时处理资源路径：

const path = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/main.ts'),
      name: 'logo-threejs',
      fileName: (format) => `logo-threejs.${format}.js`
    },
    rollupOptions: {
      // 仅将three列为外部依赖，字体资源打包进库
      external: ['three'],
      output: {
        // 配置资源输出路径，确保引用时路径正确
        assetFileNames: 'assets/[name].[hash][extname]'
      }
    }
  },
  // 确保字体JSON被识别为资源
  assetsInclude: ['**/*.typeface.json'],
});

3. 更新导入路径 #

修改代码中的字体导入路径为相对源码的路径：

import LatoFont from './assets/fonts/lato-bold.typeface.json'

四、报错原因说明 #

你遇到的JSON.parse: unexpected character错误，本质是使用了非官方工具转换的JSON，格式不符合Three.js FontLoader的要求，必须使用官方指定的转换工具生成对应格式的JSON文件。

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