In essence, while three.js stands out as a robust solution for web-based 3D graphics, seamlessly integrating it into Android and iOS apps introduces uncertainties and challenges. I just wondering guys, is there any example Android/iOS app that is built using three.js and already in production? I mean like what design pattern they used to build that? Cause I feel like my app that used three.js is very, very slow and has limitations in using and interacting with 3dmodel from designers. Is it also recommended to build a 3d app using three.js rather than natively using Unity or Unreal Engine for an app that users need to interact with 3d and programmatically?
Wdym by design pattern? The idea of running anything browser-based on mobile is the same - just pack it in a WebView. If it runs well in the browser, it will run well in a webview (you can use capacitor for example, it gives you access to a lot of native APIs.)
You can find quite a lot of them on Poki.com (Crossy Road for example.) Many, not all though, are released also on Play Store / AppStore.
Why do you feel that? It depends on what you’re building - for broad scope of applications UE / Unity and Three.js would perform pretty much the same, or with an unnoticeable difference.
It depends. For a configurator or a simple game - three.js / react-three-fiber will be faster to develop, give similar performance, and will be easier to integrate with resources fetched from web (because it runs in the browser.) But if you plan on anything graphics-heavy or complex in general, I’d personally go with Unreal - the performance jump is quite high, and UE takes away a lot of chores related to releasing three.js-based app - most of underlying optimisations, hardware detection, monetization, building / updating builds for iOS / Android.
this is using react-three-fiber, which on native doesn’t run in a webview and opengl but native openGLES. it’s mostly the same code, the project could support both mobile and the web.
So my mean by design pattern is like what is the better way to reused the 3D component. In my experience, the 3D component is rendered in screen A and screen B also using it. Initially, on the screen A it will take 10-30 second to load the model (this is so long, I am assume this is because the size of glb file as currently the file size around 40Mb is it okay to have around 40MB?). But when move from screen A to screen B, the 3D component is glitch (kind a like re-render again but it’s more fast). So user will notice that the model disappear and then appear again.
This is using NativeScript, Vue 3, NativeScript/canvas and Troisjs. NativeScript canvas is a 2d/gl polyfill to render from nativescript to Skia. As the canvas plugin is a polyfill for canvas it could work for any web framework.(Vue, React, Solid, Angular, etc. …)
It depends on what you’re building - for broad scope of applications UE / Unity and Three.js would perform pretty much the same, or with an unnoticeable difference.