Errors caused by relocated geometries (to examples/jsm/geometry/... in three.js)

[polymorpher]

Some geometries are moved outside the main three.js module, for example, https://threejs.org/docs/#examples/en/geometries/TextGeometry

Therefore, when they are rendered using the standard way, i,e, <textGeometry .../>, an error would occur indicating the module is moved in three.js.

Is there a way to instruct r3f to look for the particular module in examples/jsm/geometry/...?

[CodyJasonBennett]

Yes, as it's not a part of the three namespace, you can import the module from examples and extend it.

import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import { extend } from '@react-three/fiber'

extend({ TextGeometry })

return <textGeometry args={[ ... ]} />

See:

• https://docs.pmnd.rs/react-three-fiber/API/objects#using-3rd-party-objects-declaratively
• https://codesandbox.io/s/o1ebj

[pgodman]

Hi!

I had the same issue as @dottodot. I dug in some and what I discovered is that any extend()s you do before the first <canvas> is rendered will get clobbered by any three functions. In this case, I guess the folks at three wanted to put a breaking placeholder there to remind people to not use that TextGeometry. Net effect is that when the first <canvas> is rendered the extend that you used gets replaced with the placeholder.

Here's the code that does this from r3f as I understand it:

const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
  children,
  fallback,
  resize,
  style,
  gl,
  events = createPointerEvents,
  shadows,
  linear,
  flat,
  legacy,
  orthographic,
  frameloop,
  dpr,
  performance,
  raycaster,
  camera,
  onPointerMissed,
  onCreated,
  ...props
}, forwardedRef) {
  // Create a known catalogue of Threejs-native elements
  // This will include the entire THREE namespace by default, users can extend
  // their own elements by using the createRoot API instead
  React__namespace.useMemo(() => index.extend(THREE__namespace), []);

I'm not sure what the right fix is here, but I worked around the issue by putting my extend inline where I'm about to use it:

function XYText(props: {text: string, position: Vector3}) {
  const font = useLoader(FontLoader, './NeueHaasGroteskDisp Pro_Bold.json');
  extend({TextGeometry}); /* Because canvas clobbers the extend above */

  const result = <mesh>
    <textGeometry args={['test', {font, size: 100, height: .00001}]}/> 
    <meshPhysicalMaterial attach='material' color={'red'}/>
  </mesh>;
  return result;
}

[da-saman]

thanks for this solution, works for me

[JoaquinSantarcangelo]

Same here, had some loading problems and it worked. thanks!

[AlulaLeak]

Worked for me too.. Thanks!

[christopherjbaker]

I used a timeout so it would only happen once and wasn't tied to the React flow: setTimeout(() => extend({ TextGeometry }), 0)