How to integrate Needle with a Web frontend library (React, Flutter, etc.)?

When bringing my Unity Application via Needle to the web, Iā€™d like to communicate with Components on a webpage, build interactive interfaces or might want to implement functionality using Web APIs which Unity does not expose. Combining Unity with React or Flutter might be a great way to achieve these goals.

Are there any best practices on how to integrate my needle experience within a website, e. g. web buttons to trigger animatons, variants etc. My goal is the development of an interactive product configurator on the web. The questions might be simple, but Iā€™m still new to all of this - so sorry :wink:

Thanks!

Original Post on Discord

by user 642744761865863243

We recently added a React template which might get you started there.

What we usually did is we built application specific logic inside npmdef files and then per npmdef exposed one or more of those types as apis for your vanilla js or frontend framework to talk to. That way you keep kind of an overview of what is exposed when e.g. refactoring your application without having to do the same for your frontend.

Basically you can use any framework you like and e.g. add a <needle-engine> component tag somewhere.
From there you can access the Context which gives you the scene etc (it is the same as when you write this.context from a script-component)

You can use methods like GameObject.findObjectOfType(Animator) for example (from vanilla js it would be Needle.GameObject.findObjectOfType(Needle.Animator))

We also patch the threejs object with some of these methods - e.g. if you have access to an Object3D you can write myObject.getComponent(Needle.Animator)

About scripting and js interop you can read a bit here: Needle Engine Scripting | Needle Engine Documentation

That sounds great - I will have a look later. Thanks so far!

by user 642744761865863243

Ok great :slightly_smiling_face: feel free to ping me if you have further questions or anything is not working as youā€™d expect

Huge fan of the React template I must say!

by user 103054507105067008