I built a project with about 10 image targets, corresponding to 10 models.
Loading all 10 models when loading the page takes quite a while. I want to know if there is a way to dynamically load a model after scanning the target image (only load that model). While waiting for loading, I will display a loading model…
The expected flow is:
- Scan target image
- xrimagefound => detect model, show loading model
- Load detected model
- Run animation of the model
Can I do it with such a flow? and what solution to dynamically load the model?
Please help me.
Are you going to have several models active at the same time?
Yes, 10 models will be active at the same time so that when the image is scanned, the model will be displayed.
Could you show me what you have got so far?
I mainly need what’s inside <a-scene> and only one of your image targets. If you made any special components in javascript for your image target, please add that code as well.
Also, be sure to use the </> icon in the menu above the textfield when pasting the code.
That’s just the idea, I want to see if this method is feasible?
You can dynamically set the src of the model inside an entity with xrextras-named-image-target, so what you’re asking is feasible. However, the user will have to wait for the actual model to load whenever an image target is found.
To avoid this, I would probably delay the preloading of all the models with a setTimeout after the whole page has loaded. Like, download all models 5 seconds after the camera shows up.
That’s a good idea, thank you very much