React- Three/Fiber 创建 3D 文本

Question

我正在尝试使用 Threejs + React- Three/Fiber 创建 3D 文本。我使用字体加载器加载字体，如下所示：

  const font = new FontLoader().parse('/Microsoft Tai Le_Regular.json');

之后，我尝试在网格内使用组件，由于某种原因它不起作用，任何其他类型的几何图形都可以工作。

    <mesh>
      <textGeometry /> // this can't even be compiled ( maybe it has to do with typescript
    </mesh>

有了这个问题，我尝试在 js 而不是 jsx 上创建 textGeometry 所以我这样做了：

     const textOptions = {
    font: font,
    size: props.size,
    height: props.height,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5
  };
  
  const textGeo = new TextGeometry(props.text, textOptions);

并将“textGeo”传递给网格几何道具

<mesh
  geometry={textGeo}
>

仍然不起作用并给出此错误：无法访问属性“yMax”，data.boundingBox 未定义

感谢您的帮助，

Answer 1

因此，我将在序言中说，我仍然是一名学生，因此我无法确切解释为什么需要完成所有这些步骤，但这对我有用。看来您的问题在于您用来解析的路径。文件名本身看起来不准确，但即使文件路径有效，仍然不行，必须导入。确保您的 json 文件位于 src 文件夹内，并使用相对路径导入 json 文件。

import myFont from '../relative_path'

确保从 r3f 导入扩展

import { extend } from '@react-three/fiber'

接下来，textGeometry不是r3f的标准，所以需要像这样导入

import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'

然后扩展TextGeometry

extend({ TextGeometry })

这应该可以编译文本几何。请看下面的完整片段。

import { extend } from '@react-three/fiber'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import myFont from '../relative_path'

extend({ TextGeometry })

export default function Text() {
const font = new FontLoader().parse(myFont);

return(
<mesh position={[0,10,0]}>
    <textGeometry args={['test', {font, size:5, height: 1}]}/>
    <meshLambertMaterial attach='material' color={'gold'}/>
</mesh>
)

}

显然，您可以更改参数和材料来满足您的需求。

Answer 2

对于使用 Typescript 并收到
“类型‘JSX.IntrinsicElements’上不存在属性‘textGeometry’”错误的任何人，以下是解决该问题的方法：

import { extend, Object3DNode } from "@react-three/fiber";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
extend({ TextGeometry });

declare module "@react-three/fiber" {
  interface ThreeElements {
    textGeometry: Object3DNode<TextGeometry, typeof TextGeometry>;
  }
}

输入 textGeometry 并将其附加到全局 JSX 命名空间。
来源：
https ://docs.pmnd.rs/react- Three-Fiber/tutorials/typescript#extending- Threeelements