Dynamic animation name

[avinashgpai]

Hi ,

I have a model with 7+ animation steps with unique names, is there a way to get list of all animation name in model-viewer. so I can set animation-name attribute dynamically?

thanks

[elalish]

https://modelviewer.dev/docs/#entrydocs-animation-properties-availableAnimations

[shamsail]

Hi, you can get the animation list with the property "availableAnimations" as described in the docs

https://modelviewer.dev/docs/#entrydocs-animation-properties-availableAnimations

But the main thing is that to get dynamic animations you have to attach a event listener with the model-viewer element after the source is loaded else you will get nothing when you will use "availableAnimations".

let viewer = new ModelViewerElement();
viewer = document.getElementById("model-viewer-id");
var animationList;

viewer.addEventListener("load", () => { 
    animationList = viewer.availableAnimations;
});

Same goes for other properties to get information.

[avinashgpai]

Hi,

I have created a web application where for particular gltf file one can play all available animations for the same one after another. I have provided a next button which on click will change animation name. The problem I am facing is when next animation starts to play , previous animation also gets played. How can I resolve this issue?

Below I have attached screen recording FYI

https://supreeth2564798.hippovideo.io/video/play/tWpWJI3OI7mQ3INpau5OyGjEoSQZbeMDvsYbjSaAd9g

[avinashgpai]

function load(){

const modelViewer = document.querySelector('#paused-change-demo');
modelViewer.src = src;
console.log(modelViewer.currentTime,modelViewer.duration);

if(localStorage.getItem("start")===true){// start of animation
	k=0;
}

if(modelViewer.availableAnimations){//getting all available animations
	if(modelViewer.availableAnimations.length!=0 && start === 0){
		animation_name = modelViewer.availableAnimations;
		start = start+1;// to set animation name list only one time after it gets loaded succesfully
	}
}

modelViewer.animationName = animation_name[k];
document.getElementById("object").src = arr_curr_obj[k]; //left side clip images
// document.getElementById("instructions").innerHTML= arr_curr_instruction[k];
document.getElementById("name").innerHTML= arr_curr_obj[k].split("~")[1].split(".")[0].split("_").join(" "); //name of object played in animation
document.getElementById('steps').innerHTML=(k+1)+"/"+animation_name.length;
if((modelViewer.duration-modelViewer.currentTime)<=0.02){// pausing animation once it reaches end of particular animation 
	modelViewer.pause();
	document.getElementById('prevCBtn').disabled=false;
	document.getElementById('nextCBtn').disabled=false;
	if(k==animation_name.length-1){
		document.getElementById('nextCBtn').disabled=true;
	}
	if(k==0){
		document.getElementById('prevCBtn').disabled=true;
	}
}
localStorage.setItem("start",false);// noting that model animation is already started	

}

[avinashgpai]

Below mentioned variables are loaded /set before running above functions

var k=0;
var arr_curr_obj = localStorage.getItem("clipImages").split(",");
var src = localStorage.getItem("modelSrc");
var start = 0;
var animation_name = [];

[shamsail]

Dude may be I'm getting wrong, but you are over killing the processing by setInterval(load,10); it will load the model and perform the function after every 0.01 second. that you don't need it.

[shamsail]

If you want to just stop the animation after the animation time then you can set interval only there not to load model again and do messy stuffs again

const interval2 = setInterval(
            async function () {
                modelViewer.pause();
                clearInterval(interval2);       
            }
            modelViewer.duration * 1000
          );

[shamsail]

just load the model only once and don't kill processing, may be that's why you are experiencing this stuff as you are also using 'currenttime' that does not ensure to stop previous animation properly

[shamsail]

If you want to just stop the animation after the animation time then you can set interval only there not to load model again and do messy stuffs again

const interval2 = setInterval(
            async function () {
                modelViewer.pause();
                clearInterval(interval2);       
            }
            modelViewer.duration * 1000
          );

[avinashgpai]

I set animation-crossfade-duration = 0 and everything is working fine now.