THREE.js中Text Loader加载失败出现黑屏及404错误如何解决

错误原因 #

404错误代表你请求的/fonts/helvetiker_regular.typeface.json文件不存在，字体加载失败后不会创建文字网格，场景里没有任何可渲染内容就会显示黑屏。同时你原有代码里存在参数拼写错误：beveloffset的O需要大写为bevelOffset，否则斜面偏移配置不会生效。

解决方案1：直接使用已导入的字体对象（推荐，无需额外配置） #

你代码里已经通过import typefaceFont from 'three/examples/fonts/helvetiker_regular.typeface.json'引入了字体数据，不需要再通过网络请求加载，直接解析即可，替换原有Font加载段的代码：

const fontLoader = new FontLoader()
// 直接解析已导入的字体数据
const font = fontLoader.parse(typefaceFont)
const textGeometry = new TextGeometry(
    'Hello Three.js',
    {
        font:font,
        size:0.5,
        height:0.2,
        curveSegments:12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset:0,
        bevelSegments: 5
    }
)
// 可以显式设置材质颜色避免和默认黑背景重合
const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff })
const text = new THREE.Mesh(textGeometry, textMaterial)
scene.add(text)

解决方案2：配置静态文件路径 #

如果要保留fontLoader.load的网络加载方式：

• 在你项目的静态资源目录（一般是public目录）下新建fonts文件夹
• 从项目node_modules/three/examples/fonts/路径下复制helvetiker_regular.typeface.json文件到刚新建的public/fonts目录下即可。

内容的提问来源于stack exchange，提问作者Azr.em