Trouble getting .glb animation to play

🧑‍💻 Technical Support
1

Hi,
I’ve made a .glb in Blender with baked in animation and when I check it in the assets folder and on https://gltf-viewer.donmccurdy.com/ it shows the expected animation, which is called “Scene”. However when I use the target image template and trigger it with the jellyfish picture, it is static. I added animation-mixer to the entity and called the “Scene” animation but I’m not making progress and wondered if someone could let me what what the simple thing I’m missing is!?






3






4

OK new problem!! I pasted my code in but can’t see it.

5

code in a text file

6

Hiya Richard,

Make sure you are importing XRExtras in app.js

Note: add a < to the start of the line below, it’s also removing code for me as well when I paste it in ( on mobile )

script crossorigin=“anonymous” src=“//cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js”>

Then, in your entity where you have specified the glb file, make sure it has this…

animation-mixer=“clip: *;”

This will play all of the animations in the glb file.

1 Like
7

Hi Mal, Thanks for your response. I couldn’t make it work adding that line to app.js. But ended up putting
script src=“//cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js”>
into head.html and it is now working. Thanks for the tip about “clip:*;” as well.

1 Like
8

Ah, I meant head.html not app.js - that will teach me for answering on a phone, rather than being at a computer to test it first :see_no_evil: :joy: - nice catch!

1 Like
9

It was enough to get me in the right direction so much appreciated.

1 Like
10

hello guys, sorry for jumping in on this chat, but my issue picks up from where this ended. I got my .glb animation to play, but now it keeps looping. How can I make it play once and stop? Because I need to also have the user be able to click on the 3D element to go to a specific link, which also I am not sure how to do that. Any help would be greatly appreciated…

1 Like
11

Hi Ramy, I believe you just add… loop: once; so
<a-entity gltf-model="#model" animation-mixer="clip: *; loop: once;"></a-entity>

Over to you @Mal_Duffin for the second part :wink:

12

Thank you so much Richard… Will try that, “with my fingers crossed”…

13

Hi @Ramy_Khair if you want to just play it once the target is found then you need to attach this to the model via JS:

this.el.setAttribute('animation-mixer', { // this.el being the model
    clip: '*',
    loop: 'once',
    clampWhenFinished: true,
})

That will make it so that the animation only plays once and it stops animating when it hits the last frame.

Hope that helps :slight_smile:

2 Likes