Babylon UI - ReactJS DOM or 2D Canvas?

Hi all, great to be here.
I am working on a configurator type application similar to this Xbox configurator.

My scene works really well and I’m at the stage where I need to build some UI for it. I’d like to use ReactJS and have interactive DOM elements which can trigger changes in the scene. The UI I am creating is fairly similar to the picture above.

I wanted to use React to do this because of how easy it is to make it mobile compatible.

TIA for any tips or tutorials on how to achieve this.

1 Like

The inspector is fully built in React and @Deltakosh is really happy with it, so you can definitely control your scene as you wish from there.

Now it probably depends on the controls complexity you want to create. If it looks like the XBox Configurator React will be cool even more if the site hosting it has already been built in React.

Let me know if I can help at all. I have built sites with 2-way communication from React <–> BabylonJS. First with redux, but with the new Context API and especially hooks and Functional Components (in React 16.7 alpha+) you can also go that way.

Here is an example where I have React DOM elements updating the BabylonJS scene, much like how the configurator would work:
https://brianzinn.github.io/create-react-app-babylonjs/withProps

Thanks very much @brianzinn. I will play around with your examples and let you know if I get stuck with anything!