React-babylonjs v3

Demos and projects
1

Well, it’s been over a year since react-babylonjs v2 came out. There have been ~30 releases and ~50 github issues closed in the meantime - also some incredible PRs from the community. It’s really the ideas from random people that keep pushing the project forward! There has been lots of new functionality: instancing (and instancedMesh), more complete babylon API support (and changes to support Babylon 4.2 and React 17), improved declarative support for textures, hooks for AssetManager and SceneLoader (need Suspense), Cascaded Shadow Maps (from Dennemark), properly support quaternions in renderer, assigning to multiple properties declaratively (ie: textures), lots of new hooks (and fixes) like useHover, useHook, effect layers, behaviors (from hookex), add observable to before/after scene render - to allow PIXIjs in back/foreground, allow registering dynamic property assignment for renderer (ie: assign “hot pink” as a Color3 - see chromajs story), kebab property assignment (ie: rotation-x for external GUI library), various improvements to the code generation and many other changes.

Also hookex created a project that uses react-babylonjs to allow it to work with react-spring, which gives really nice animations and physics.

The primary reason though for a 3.0 release was to introduce 4 breaking changes:

  1. <model> is replaced by <Model> (host element to component) and it must now be enclosed in a React Suspense block. The model supplies loading progress with a context, so the fallback component on Suspense can report progress.
  2. Somewhere in v2 the fromInstance prop was introduced and the passed in instance would be automatically disposed (requiring a hack to patch the dispose method on the object otherwise). The new functionality is to not dispose and you can opt-in to dispose with disposeInstanceOnUnmount. ie:
<mesh name='box' fromInstance={mesh} rotation={props.rotation} disposeInstanceOnUnmount .../>
  1. When you got a ref using the React useRef hook in v2 you needed to use the hostInstance to access the babylon.js object. I found a method on the reconciler that allowed me hide the metadata the reconciler is using and provide functionality using standard references.
  2. Some hooks were renamed. ie: useBabylonScene is now just useScene, etc.

I also added some basic support in the Scene Explorer for showing the now hidden metadata from refs. To be able to show props not available on the babylonjs object (like shadow casting, nested property assigning, etc). I wanted, however, the properties read-only and that’s not supported for Custom Properties. I have a PR for the Scene Explorer to allow custom properties to be declared read-only if that seems like a useful addition then I can propose (it’s missing readonly slider and maybe others).

Upcoming goals are support for declarative NME and to revisit react-native support via Expo. React-native support was a goal after the 2.0 release, but was a really busy year and hoping to do that in earnest this year.

See you on the playground :slight_smile:

brianzinn/react-babylonjs (github.com)

8 Likes
2

Congrats to the release!
I can only recommend react-babylonjs! Brian is doing a great job and if you are missing features, he is there to help you!

1 Like
3

Wow @brianzinn,

amazing work as always! Can’t wait to use the new version! I can promise it will happen VERY soon :slight_smile:

4

Congrats buddy! this is so rad!

7

Downgrade your node to LTS version (like 16.3.0) or change your package.json to:

"start": "react-scripts --openssl-legacy-provider start"

That’s a less secure SSL, but is fine for development purposes.

1 Like
9

after you downgrade node you need to delete your “node_modules” directory and “npm install” again. There is a typescript template as well if you are working in typescript:

npx create-react-app your-app-name --template typescript