THREE.js使用FontLoader加载字体出现404错误无法渲染文本问题求助

FontLoader.load() 要求第一个入参为字体文件的URL字符串，你代码中传入的是通过import引入的字体JSON对象，对象转字符串后得到[object Object]，导致请求路径错误触发404。

有两种可选方案：

• 方案1：使用FontLoader.parse()直接解析已导入的JSON对象
  无需再调用异步load方法，直接替换字体加载部分的代码即可，同时修正拼写错误：

  const fontLoader = new FontLoader();
  // 直接解析已经import的字体json对象
  const font = fontLoader.parse(typefaceFont);
  
  const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 明确设置颜色避免和背景同色看不见
  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, // 修正原来的拼写错误：beveloffset改为驼峰写法
        bevelSegments: 5
    }
  );
  const text = new THREE.Mesh(textGeometry, textMaterial);
  scene.add(text);
  

• 方案2：传入字体路径调用load方法
  删掉导入字体的import语句，直接给load方法传字体文件的公开访问路径：

  // 删除 import typefaceFont from "./fonts/helvetiker_regular.typeface.json" 这行
  const fontLoader = new FontLoader();
  fontLoader.load('./fonts/helvetiker_regular.typeface.json', (font) => {
    const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    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 text = new THREE.Mesh(textGeometry, textMaterial);
    scene.add(text);
  });
  

你原代码中beveloffset属性拼写错误，正确为驼峰格式bevelOffset，拼写错误会导致倒角配置不生效。

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