Replacing 0 - 100% loading sign with model particle blend in animation. Movable loading 3d model is transparent red during loading stage 0 - 90%, to convey the unfinished progress of the loading operation to the user.

[eschenbach-exorb]

Replacing 0 - 100% loading sign with model particle blend in animation. Movable loading 3D model is transparent red during loading stage 0 - 90%, to convey the unfinished progress of the loading operation to the user.

We are working on a website with ergonomic UI, hovering over a sleek light grey neumorphism style background, which indicates the special shaped button forms, optimized for right hand users. Ergonomic means in our case that the website is structured around the right thumb radius, enabling fast and easy access with as little movement as possible. In the center of the screen, the pre rendered photorealistic 3D model of our only product, a light high-end bag for men, shall be displayed, and slowly turn to the left (when the 3D model viewing is selected, loading and loaded). Two finger orbit zoom control will also be implemented.
But as the title suggests, we have an idea which we think would improve the model-viewer / we're looking for some code which makes the following possible:

On the landing page, 5 switchable pictures of our 3D model on isolated background will be visible at first. By a tap on the "3D 2700MB" button, the 3D file will be loaded. Now here comes the idea, instead of displaying a 0 - 100% loading sign, or morphing between poster (only transparent background) and poster2 (3D model image with transparent background), we would like to see the particles of the 3D file increase evenly/"noise blend in" - from 0% (no particles), to 1% (a few particles), to 2% (a few more particles are visible) and so on up to 100% (all particles are visible). The model is loaded in real time, while the new arriving model particle information is being constantly added to the displayed and moveable loading 3d model. During the 0 - 90% period, the model is filtered transparent red, to indicate the loading stage to the user. At 90,1% the model loses the transparent red filter and is now sufficiently visible for detailed viewing.

We thank everyone for any contribution, and strive towards creating a user experience which not only has a sort of Bladerunner 2049 UI aesthetic, but the real technology behind it to show that we are already living the future.

You can also contact me via my e-mail
[email protected]

Have a great day everyone!
Quentin

[elalish]

That does sound cute, but I think you'll find it may be a bit tricky in practice. Feel free to open a PR, or at the very least make a three.js demo so we can see a sample implementation.

[eschenbach-exorb]

Before we make a PR, I want to develop the idea a bit more. Maybe someone has an answer to the following question:

Is there a 3D file format which saves "particles"? / Which saves the model through X Y Z axis defined location data of single points floating in space?

[elalish]

No, that's not how glTF works. Hence this is trickier than you think.

[eschenbach-exorb]

Could there be a way to display the glTF model before all information is loaded?

Maybe the particle blend in is not possible with glTF, but some other way to display a loading movable model?