使用react-three/fiber创建3D文本

Question

我将尝试使用Threejs + react-three/fiber创建3D文字。 我使用字体加载器来加载字体，代码如下：

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

之后我尝试在网格中使用 <component> 组件，但由于某些原因它无法工作，而其他类型的几何体则可以正常工作。

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

遇到这个问题后，我尝试在js中创建textGeometry而不是jsx。所以我做了以下操作：

     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未定义

谢谢您的帮助，

- MrChaker Atallah

Answer 1

首先我要说明的是，我还是一个学生，所以不能准确地解释为什么需要执行所有这些步骤，但以下是对我有效的方法。看起来你的问题出在你用于解析的路径上。文件名本身似乎不正确，但即使文件路径有效，仍然不会起作用，必须进行导入。确保您的JSON文件位于src文件夹内，并使用相对路径导入JSON文件。

import myFont from '../relative_path'

请确保从r3f中导入extend。

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

下一步，textGeometry并不是r3f的标准组件，因此需要像这样导入。

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

然后扩展TextGeometry

extend({ TextGeometry })

这应该能够使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>
)

显然，您可以更改参数和材料以适应您的需求。

- Zach Mommaerts

---

谢谢，字体导入解决了错误问题，但是在扩展后仍然存在 jsx textGeo 问题（无论如何都没关系）。至于结果，它是用我使用的环境光颜色着色的随机二维形状。我尝试调整数字，但似乎远离3D文本。 - MrChaker Atallah

TextGeometry不是threejs的一部分，他们已经将其删除。现在它位于示例文件夹中，这就是为什么它没有默认扩展而无法工作的原因。r3f不知道threejs是什么，它通过查看其命名空间+扩展命名空间将jsx转换为三个运行时。 - hpalu

Answer 2

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

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

- Thomas Pötz