textGeometry in React Three Fiber Shows Up as a Cube

Question

I am attempting to make 3D text in React Three Fiber following this guide. However, my text appears as a cube in the end. Here is my code:

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

The result is this:

Are there any ideas for how to render the text correctly? The helvetiker font seems to be loading the right way, as the console.log shows a font there. I am using the extend() inside the function because I had been encountering this error when importing TextGeometry

Answer 1

The solution was to define helvetikerRegular as a font: inside textOptions:

  const textOptions = {
    font: helvetikerRegular,
    size: .4,
    height: .2
  }