Create a demo experience for BabylonJS

Hello, I was wondering on how to create a demo experience for the BabylonJS viewer, because many people do not understand right away that this is a 3D viewer and not a picture.

Here are two examples of what people are doing:

I was thinking of using autoRotationBehavior, but I have a few questions:

1 - is there a way to switch the rotation? We would like to move the model to the left and to the right and then make it spin?

2 - is there a callback on start and on stop. I could use autoRotationBehavior.rotationInProgress in a render loop, but we stop the render loop when we have nothing to render and I would have to artificially create one.

Using something like:

scene.activeCamera.useAutoRotationBehavior = true;
wait 1 sec
scene.activeCamera.useAutoRotationBehavior = false;

I want to know when the animation has started/stopped so I could show/hide an overlay prompting the user to use their finger.

  1. Yes. Switch rotation is possible, like in this example -
    camera0.useAutoRotationBehavior = true; camera0.autoRotationBehavior.idleRotationSpeed *= -3; // negative value camera1.useAutoRotationBehavior = true; camera1.autoRotationBehavior.idleRotationSpeed *= 3;

  2. I am not sure that I completely understand what you’d like to achieve but you may bind any events with useAutoRotationBehavior property.

Thank you for the rotation speed trick!

Could you please explain more on how to bind the event to `useAutoRotationBehavior?

The camera either rotates or not, depending on useAutoRotationBehavior is true or false.
Simple example is here - Mu-so 2nd Generation 3D
You can turn rotation on/off with image button.
If need the code, toggle rotation function starts from line 204. You can use any events here - mouse move, mouse over etc.

I think even an autorotation will not fix this. UI popup, like your Custom Electricity example is maybe more incentive to users

1 Like

Yes, that is why we went with the popup. The only issue is that I need an observer which is attached to the autoRotationBehavior.rotationInProgress so I can use:

scene.activeCamera.useAutoRotationBehavior = true;
amera0.autoRotationBehavior.idleRotationSpeed = 0;

And when it stops and starts to show and hide the ui popup element.

I don’t see the problem with using usual addEventListener() in this case.

It seems that I do not understand on what to use the addEventListener().

My understanding is that It should be something like this:

autoRotationBehavior.onRotationStop(() =>{
// hide the ui

autoRotationBehavior.onRotationStart(() =>{
// showTheUi
if (scene.activeCamera.useAutoRotationBehavior) {
// showTheUi

If false, hide the UI.
You would need event listener if user will interact with other HTML elements (for example, when mouse is over UI element - hide UI and stop rotation).

Here is the example how mouse moves change model position -

Example of HTML page with animations and Autorotation with Timeout - Mu-so Qb 2 - Merry Christmas, с Новым Годом 2021!