How does STYLY Gallery work to load 3d objects?-CodePudding

I was wondering how STYLY Gallery handles many 3d models and show them individually like here

I found a fantastic library (React Unity WebGL) that enables embedding Unity build into React application and I suppose STYLY also uses it.

But I don't know how they manage multiple 3d objects in one place and display them depending on user interaction.

Does anyone know or have any idea about it?

Do I need to build every 3d object for each page like the link above? Or just switch/loading different scenes in Unity build would be enough?

CodePudding user response：

The iframe loaded when you start the web player is https://build.styly.cc/player/release/?8c54733e-7e04-4601-9659-5b2642add3f5; the UUID in the URL is the scene ID from your original link.

Looking at the dev tools for the iframe, it's doing a couple of API requests, one of which is for https://api.styly.cc/api/v2/scene/8c54733e-7e04-4601-9659-5b2642add3f5/content. That URL seems to describe an XML document that has references to assets that are loaded from a CDN.

Looking at the binary data loaded, it seems to be some Unity-specific format:

$ xxd ba158aaf-95e4-4e09-96ff-3567538742ca
00000000: 556e 6974 7946 5300 0000 0006 352e 782e  UnityFS.....5.x.
00000010: 7800 3230 3139 2e33 2e36 6631 0000 0000  x.2019.3.6f1....
00000020: 0000 003d 3d00 0000 4100 0000 5b00 0000  ...==...A...[...
00000030: 431e 0001 00b1 0100 0100 2800 003c cb00  C.........(..<..

I assume the Unity Web Player can load that format into objects and place them into the scene based on the content specification.

So:

No, you do not need to build a separate player for each page, but it looks like a nontrivial amount of work has gone into this on Styly's end to make it work.