Electric wall desk with adjustable animation sliders #4791

vehrmann · 2024-05-28T19:53:10Z

vehrmann
May 28, 2024

I am happy to share my solution to access animations within modelviewer and control their timing via sliders. This approach can not only handle one animation, but several independent ones.
Vidajo Wall-Ti

Feel free to check out the source code, I used this approach to be able to access the scene graph. Then I could access the animation mixer and add multiple animations of my model individually.

If you have any questions or suggestions, let me know.

P.S.: I still struggle with iOS compatibility, but I am aware of the flaws...

sebmestrallet · 2024-11-11T17:21:46Z

sebmestrallet
Nov 11, 2024

@vehrmann wow I'm impressed by what you achieved! I'd like to interact with the (unique) animation in my glTF asset using a slider, but there are many things going on in your code. Can this be done without THREE.js? Is your registerAnimations() required?

@elalish I saw that https://modelviewer.dev/editor/ allows to control animations using a "Time" slider, but the code behind is also very complex (nested <div>s for the slider, a LOT of event listeners, very generic actions) which made me think most of what I see is from a web framework.

Can a very simple code, controlling the animation time using a slider, be referenced in https://modelviewer.dev/examples/animation/index.html? With the following HTML as base and hard-coded animation name and time limits?

<model-viewer id="model-viewer" src="..." camera-controls></model-viewer>
<input type="range" id="slider-animation" min="0" max="10" step="0.1" value="0">

2 replies

vehrmann Nov 11, 2024
Author

@sebmestrallet to control a single animation with a slider is quite easy. See code below.
In case you have multiple animations and control one of them with a slider, then the other is set to time=0.
That is why I needed the THREE.js-mixer in my case: it allows me to control the timing of each animation individually.

<html>
    <model-viewer
        camera-controls
        touch-action="pan-y"
        animation-name="Running"
        src = "https://modelviewer.dev/shared-assets/models/RobotExpressive.glb"
    >
    <input class="slider-animation" type="range" min="0" max="100" step="1" value="0">

    </model-viewer>

    <script type="module">
        // Get references to the model-viewer and slider elements
        const modelViewer = document.querySelector("model-viewer");
        const slider = document.querySelector(".slider-animation");

        // Function to update the animation progress based on the slider's value
        slider.addEventListener("input", () => {
            const progress = slider.value / 100; // Convert slider value (0-100) to progress (0-1)
            modelViewer.currentTime = progress * modelViewer.duration; // Set current time based on slider
        });
    
        // Update slider to match animation progress when the animation loops
        modelViewer.addEventListener("frameupdate", () => {
            const progress = (modelViewer.currentTime / modelViewer.duration) * 100;
            slider.value = progress;
        });

    </script>
    <script type="module" src="https://modelviewer.dev/node_modules/@google/model-viewer/dist/model-viewer.min.js"></script>
</html>

sebmestrallet Nov 12, 2024

Thanks a lot! This is indeed very straightforward in case of a single animation. Thank you for the explanation.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Electric wall desk with adjustable animation sliders #4791

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

Electric wall desk with adjustable animation sliders #4791

vehrmann May 28, 2024

Replies: 1 comment · 2 replies

sebmestrallet Nov 11, 2024

vehrmann Nov 11, 2024 Author

sebmestrallet Nov 12, 2024

vehrmann
May 28, 2024

Replies: 1 comment 2 replies

sebmestrallet
Nov 11, 2024

vehrmann Nov 11, 2024
Author