react- Three/Fiber 创建 3D 文本

Question

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

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

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

<mesh>
  <!--  This can't even be compiled (maybe it has to do with typescript) -->
  <textGeometry />
</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}>

但它仍然不起作用并给出了这个错误：

can't access property "yMax", data.boundingBox is undefined

感谢您的帮助，

Answer 1

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

import myFont from '../relative_path'

确保从 r3f 导入扩展

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

接下来，r3f没有标配textGeometry，所以需要像这样导入

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