React component on plane as hud (react-three-fiber)

Questions
1

I want to make a hud for my game, I can make a transparent div on top of my scene, but it doesn’t let me implement what I want, which is animation and distortion of the hud when moving, and to make unrealBloomPass work on the hud. I came up with the idea to place the react component on planeGeometry, but I don’t know how to make the hud always be in the camera and not overlapped by other objects in the scene, besides I don’t know how to place the react component on planeGeometry, I tried Html from drei, but unrealBloomPass doesn’t work on Html. Can you tell me what I need to implement this.

2

that’s really easy:

function Hud() {
  const { gl, scene, camera, size } = useThree()
  const [virtualScene] = useState(() => new Scene())
  useFrame(() => {
    gl.autoClear = true
    gl.render(scene, camera)
    gl.autoClear = false
    gl.clearDepth()
    gl.render(virtualScene, virtualCam)
  }, 1)

you can use reacts createPortal to render jsx into an external scene. that’s how i use it mostly.

viewcube: react-three-fiber viewcube (forked) - CodeSandbox
hud with effects: r3f hud - CodeSandbox

you also don’t necessarily have to render on top of a prev result, you could also render into a texture: Magic mirror - CodeSandbox

2 Likes
3

What if I need to render a React component?

4

that’s portals. look into the magic mirror demo up there. you can render components into a external scene.

5

I mean html

6

you can render html on top, but you can’t apply threejs effects. you may be able to pull this off with a canvastexture, in which case you could render components into the texture using something like react-konva. you could also try to build the ui in threejs, for instance drei gives you an easy text component based on troika, i think that’s what i’d try first.

7

I have an authorization form that I would like to do as hud and apply unrealBloomPass.
If you have the opportunity, please provide an example.

8

your only chance in that case is something like GitHub - felixmariotto/three-mesh-ui: ⏹ Make VR user interfaces for Three.js by @felixmariotto they have a r3f example on that github as well react-three-mesh-ui (forked) - CodeSandbox otherwise it’s impossible, you can’t bloom a html form.