Raycasting with MSDF fonts 'three-bmfont-text'

Questions
1

Hey all.

I’ve been using MSDF fonts in my project and everything is working well except for the raycaster detection.

I’m asking here to figure out if some custom raycaster work needs to be done or if there are any better alternatives to render text with the raycaster.

As of now, I have the text rendering the same way as the ‘three-bmfont-text’ example from GitHub: GitHub - Jam3/three-bmfont-text: renders BMFont files in ThreeJS with word-wrapping. I also have a standard raycaster set up which detects all of the objects on my scene with no problems except the rendered msdf text.

Has anyone else encountered this problem before or am I missing something with text rendering and raycasting? I’m pretty new to Three.js and WebGL so any tips and pointers would be much appreciated.

2

three-bmfont-text uses custom shaders to render text more crisply, and does not include 3D vertex positions anywhere in the geometry. Using THREE.Raycaster with that will be impossible. I’d recommend creating and raycasting against simplified objects ( TextGeometry, or even just planes) instead, and just use three-bmfont-text for the rendering.

3

i would suggest you use troika-3d-text instead of bmfont. troika has practically everything, raycasting (plane), even character selection.

example: Basic demo (forked) - CodeSandbox (it’s not tied to react, that’s just how i use it)