React Three Fiber中TextGeometry显示为立方体的问题排查

我尝试在React Three Fiber中制作3D文本，但最终文本显示为立方体。以下是我的代码：

import { extend } from "@react-three/fiber"
import { FontLoader } from "three/examples/jsm/loaders/FontLoader"
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import helvetiker from "three/examples/fonts/helvetiker_regular.typeface.json"

const 3DText = () => {
  extend({ TextGeometry })

  const helvetikerRegular = new FontLoader().parse(helvetiker)
  console.log('helvetiker regular ->', helvetikerRegular)

  const textOptions = {
    helvetikerRegular,
    size: 5,
    height: 1,
  }
  
  return(
    <mesh position={[0,4,0]} rotation={[0, 0, 0]}>
      <textGeometry attach='geometry' args={["three.js", textOptions]}/>
      <meshLambertMaterial attach='material' color={'gold'}/>
    </mesh>
  )

}

export default 3DText

结果显示为立方体：

控制台日志显示helvetiker字体已正确加载，由于导入TextGeometry时遇到错误，我在函数内部使用了extend()。请问有什么方法可以正确渲染文本？

解决方法 #

你的代码存在两个关键问题：

1. TextGeometry参数名错误：TextGeometry要求字体参数必须通过font字段传入，你直接把字体变量名作为key，导致Three.js无法识别字体配置，只能渲染默认的立方体占位几何。
2. 组件命名不合法：JS变量/组件名不能以数字开头，3DText属于非法命名，会引发语法错误。

修正后的代码如下：

import { extend } from "@react-three/fiber"
import { FontLoader } from "three/examples/jsm/loaders/FontLoader"
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import helvetiker from "three/examples/fonts/helvetiker_regular.typeface.json"

// 修正组件命名为合法格式
const ThreeDText = () => {
  extend({ TextGeometry })

  const helvetikerRegular = new FontLoader().parse(helvetiker)
  console.log('helvetiker regular ->', helvetikerRegular)

  const textOptions = {
    font: helvetikerRegular, // 将参数名改为font
    size: 5,
    height: 1,
  }
  
  return(
    <mesh position={[0,4,0]} rotation={[0, 0, 0]}>
      <textGeometry attach='geometry' args={["three.js", textOptions]}/>
      <meshLambertMaterial attach='material' color={'gold'}/>
    </mesh>
  )
}

export default ThreeDText

修改后TextGeometry就能正确识别字体参数，渲染出预期的3D文本效果。

内容的提问来源于stack exchange，提问作者Philip Sopher