We would like to place multiple babylon.js players on one of our product overview pages.
Since we need to keep our site mobile friendly and keep the initial loading time low, we want to prevent that the 3D model is loaded and displayed automatically when the page is loaded.
Is there some sort of support for this already provided by the babylon.js viewer?
A preview-image of the scene with a play-button that lets the babylon.js player load and display the model would be a great solution.
There is the support for event-based development in Babylon.js Viewer.
The viewer exposes observables that are executed when a certain event happens. At the moment, there are 3 observables currently available:
public onSceneInitObservable: PromiseObservable<Scene>; // Executed when a scene object was initialized
public onEngineInitObservable: PromiseObservable<Engine>; // Executed after the engine was created
public onModelLoadedObservable: PromiseObservable<AbstractMesh[]>; // Executed after a model was loaded.
But for your needs (if you want to save loading time and bandwidth for mobile users) it seems that better would be just load the viewer (the script itself and the model) on user’s click.
As for preview picture with play button - you may get batch screenshots from Viewer with the help of simple script and style Play button with CSS.
You may also check my small script - Progress Bar for Babylon Viewer - maybe it is almost what you need.
You don’t have to init on page load (which is the default behavior).
The babylon-viewer can be initialized on user click as well. So similar to the way youtube works, you could display a preview image and a “Play” button, and init the viewer only when a user presses the button.
To disable the auto-init:
This can be used to also init the viewer the user presses. the tag is not more than an HTML selector, so it can accept an HTML ID or class as well.