HTML projection to object in scene

Demos and projects
1

I got an exciting PR from @dennemark for react-babylonjs, which is a port of the Html component from drei.

Allows you to tie HTML content to any object of your scene. It will be projected to the objects whereabouts automatically.

So that this:

import { Html } from 'react-babylonjs'
...
<transformNode name="transform-node" position={position} rotation={rotation}>
  <sphere name='sphere1' diameter={2} segments={16} position={new Vector3(0, 1, 0)}>
      <Html name="html" center occlude={false} >
           {<div style={{backgroundColor: 'white', borderRadius: '5px', border: '2px solid #000000', padding: '8px'}}>Lorus<br/>Ipsum</div>}
      </Html>
  </sphere>
</transformNode>

… ends up looking like this where I have declaratively attached DOM to be projected in the 3d scene:
html-dom

You can see a live demo here:
GUI - Html Text ⋅ Storybook (brianzinn.github.io)

Source code of Html is here:
react-babylonjs/Html.tsx at master · brianzinn/react-babylonjs (github.com)

6 Likes
How write html in BABYLON.GUI.Rectangle
2

Looks great!

3

Niceeee

4

:blush:
I have used this component already in a project: ULAP - Quartier | FFY
The gui gives you all the advantages of html/css/react.

I have to say the library of @brianzinn is really helpful in developing apps! It´s very convenient to hide logic within react components. I have used it i.e. to use hardware scaling on movement of mouse for better performance (see example above) or for changing parameters of custom node materials conveniently. There are few examples of a small community in the storybooks.

Hope there will be some more interested in using it, so we could build up similar useful higher-level components like ´drei´.

1 Like
5

This is really very useful addition! :slight_smile:

2 Likes
6

Super cool!