Animated camera on idle mode

miroslav · March 28, 2019, 12:44pm

Hi,
I would like to ask if there is any possibility to :

Create slider, to control animation of a imported camera ( which was exported to *.babylon file from 3dmax). Slider will be animated when scene starts. When the slider will be moved manually, camera flies in animation depending on the slider position. When scene will be in idle mode (like “camera.useAutoRotationBehavior = true;”), animation resumes automatically on its actual position.
To stop animation of camera anytime by start of controlling it (rotate, but with movements even better) and after a few seconds in idle mode ( not controlling), camera will fly back to position, where were paused and continue the animation.

Thank you.

Deltakosh · March 28, 2019, 2:35pm

Hello and welcome,

this is definitely possible.
You should have a look at our Sandbox page where we kind of doing something along the same lines:

github.com

BabylonJS/Babylon.js/blob/master/sandbox/index.js#L452


    // click on the button to pause the animation

    else {

        currentGroup.pause();

    }

});



// event on the slider

slider.addEventListener("input", function() {

    var value = parseFloat(this.value);



    if (playBtn.classList.contains("play")) {

        currentGroup.play(true);

        currentGroup.goToFrame(value);

        currentGroup.pause();

    } else {

        currentGroup.goToFrame(value);

    }

});



var sliderPause = false;

slider.addEventListener("mousedown", function() {

The overall idea is to map the sldier value to camera.alpha value in your case.

The useAutoRotationBehavior will also animate the same value so you can sync the slider.value to camera.alpha easily