THREE.FontLoader() 在三个 JS 中不起作用

Question

我是 Three JS 的新手，我想创建一个 3D 文本。我按照大部分教程来创建它，但即使我按照所有步骤或 copy/past 教程的代码进行操作，我也会出错。这是我的组件：

import * as THREE from "three";
import bumped from "../Bumped.json";

const Text = () => {
  const font = new THREE.FontLoader().parse(bumped);

  const textOptions = {
    font,
    size: 5,
    height: 1,
  };

  return (
    <mesh>
      <textGeometry attach="geometry" args={["three.js", textOptions]} />
      <meshStandardMaterial attach="material" />
    </mesh>
  );
};

export default Text;

我的错误： //THREE.FontLoader 已经移动到 /examples/jsm/loaders/FontLoader.js

//未捕获类型错误：（中间值）.parse 不是函数

当然，该组件将位于主页中的 Canvas 元素内。我的控制台错误：My console Errors

Answer 1

错误意味着 FontLoader 自 r133 以来不再是核心库的一部分。您需要额外导入才能在您的应用程序中使用此加载程序。试试看：

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';

请注意，您现在使用的 FontLoader 没有 THREE 命名空间。

THREE.FontLoader() 在三个 JS 中不起作用

THREE.FontLoader() doesn't work in Three JS

javascript

three.js

reactjs

react-three-fiber