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'

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

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>
)

}

显然您可以更改 args 和 material 以满足您的需要。

react-three/fiber 创建 3D 文本

react-three/fiber creating 3D text

3d

jsx

three.js

reactjs

react-three-fiber