Build with THREE Js as Webapp or Native app or Progressive Webapp

Questions
,
1

Hi ,

I have created 3d scenes where I used THREE js and physics library Ammo js .
It basically displays different 3d shapes which react to each other on button clicks .

So I planned to build to make it publicly available .
But I am confused whether to build a Webapp or Native app or Progressive Webapp .
I don’t even know which of these are possible and also how can each be done like using which stack .

And I also wanted to use camera at some point of time , Is that possible ?
And each can signup to make their own account and create,edit and save their own models .

  1. Can anyone say which will be the best choice ?
  2. And also provide some reference like video tutuorials of how to build them .
  3. And also the advantage and disadvantage of each one with regard to three js .

Any small reference would be of great help .

Thanks.

2 Likes
2

I think Native app would be a good choice here.

1 Like
3

Thanks bro.
Is there any reference to how to get start with it bro.
And can Ammo js be utilized there ??

4

Yes, but I think you could also use a native physics library which should be faster than a js one.

1 Like
5

three is a web library, you can’t make native apps with it. even if you do, it will run in a webview.

the only exception is react-native, your three app will run in a native opengles context. see: https://github.com/react-spring/react-three-fiber/blob/86b0f78d684ee9f25135f490b9159919cf486697/recipes.md#usage-with-react-native since microsoft itself is involved in react now im pretty sure this will extend to native desktop apps soon as well.

3 Likes
6

Doesn’t electron count as native?

7

But I couldn’t find any simulations available in native physics libraries. Do any of them have which I am not aware of !

8

What about PWA ?
Can I built a webapp and builld pwa with it .

9

i do some testing with threejs and TWA app you can try my beta app from

2 Likes
10

electron is just a chrome browser. plain three js is for the web, no escaping it.

2 Likes
11

What is TWA? And yeah I guess I’m confused is native then stuff like C++?

1 Like
12

You can use a camera
https://sbcode.net/extra_html/webcam.html

It works on IOS safari, and also contains a chroma key option.

Sourcecode @ GitHub - Sean-Bradley/Three.js-TypeScript-Boilerplate at webcam

1 Like
13

I suggest you make a PWA (which is very simple) or a Hybrid App (feels like native and can be downloaded from the app store) using capacitor.

Ammo (even the wasm version) and three.js will work with both without any issues.

1 Like
14

I just created a awesome three.js project template. PWA and Native App ready! It uses TypeScript and you can easily add React.

1 Like
15

Did we reach a consensus here? :slight_smile: what is the best solution?

16

That’s awesome thanks.

17

That was great .I too feel like pwa would be the best way to go . I would surely check that out .
Any tutorials or blogs on PWA with three.js would hlep a lot .
Thanks.

18

https://web.dev/progressive-web-apps/

1 Like