Create a demo experience for BabylonJS

Questions
1

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:
https://modelviewer.dev

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.

2

  1. Yes. Switch rotation is possible, like in this example - https://playground.babylonjs.com/#0XSPF6#7
    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.

3

Thank you for the rotation speed trick!

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

4

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.

5

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

1 Like
6

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.

7

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

8

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
});
9 
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).

10

Here is the example how mouse moves change model position - https://playground.babylonjs.com/#H2FTZW#15

11

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