React-babylonjs v2.0

Announcements
1

I have updated the react-babylonjs project. It was a major update, so bumped the major version to 2.

There are new features like declared physics and dynamic terrain, but the major breaking change is that it now references @babylonjs/* ES6 NPMs. It works with hooks, composing custom components and functional components like before, but another big change is support for intrinsic elements and editor support, so you can declare your BabylonJS scene using a more HTML-like syntax - they are written in JSX like normal DOM elements (ie: box, sphere & shadowGenerator, etc). Here is the dropdown property list for arcRotateCamera:

10%20PM
Screen Shot 2019-10-11 at 4.08.10 PM.png801Ă—277 76.2 KB

Here is a scene with a ground and sphere. Meshes, camera, lighting, GUI, shadows and physics are declared in the markup. The only “code” is the button click handler:

Screen%20Shot%20Editor%20v2
Screen Shot Editor v2.png934Ă—596 141 KB

You can see working examples:
TypeScript: React App
Storybook: Storybook

There are a bunch more examples in storybook. Next steps for the project are an Electron sample and then attempting react native support with likely expo (like this question: Using BabylonJS with React Native)

Look forward to any feedback. Thanks.

8 Likes
2

This is really cool!

That deserves a documentation update !

3

Holy hell, that is super impressive!

Cannot imagine how much work you must’ve put into this.

4

Thanks @Foxhoundn - Not as impressive as your game! Is there somewhere I can play the game? I am really curious if you are using DOM for your GUI or if you are using a declarative GUI on a mesh/plane, because it would be really cool to drop into VR on your game and still have the GUI!! :slight_smile:

5

Thanks!!

Play the game? Soooooon :smiling_imp:. Trust me, I’ve been on it for a year and I just can’t wait to play it with someone else finally.

I will be doing a stress test very soon.

The GUI is a layer of ReactJS, so I am not sure if that would satisfy your needs.