Animation won't show, but it does on gltf-viewer.donmccurdy.com

Questions
1

Hey, the animation shows up when I use https://gltf-viewer.donmccurdy.com/ and the viewer automatically starts playing it, but when I try it in my own viewer nothing happens.

I console.log()'d it and tried to find where the animation is but it is nowhere to be found.
I know it is somewhere in that glb file, but I just cannot find it in the structure.
It is called “SitDown” and Don’s viewer successfully showed me that animation name, too.

Tried to look up how he does it and turns out it is obfuscated :smiley:. I also looked at the source code of the examples and what other people said when they had it, too. But they were not accurate enough with my issue. Thus I am asking here.

I am uploading my glb file, as well. Would appreciate it a lot if someone can find the animation in the file and show it to me.

Thanks in advance!

2

This would be a good example to check:

The loader returns an array of animations with names, you’ll need to pick one and play it. There’s a bit more in the GLTFLoader documentation on the three.js site.

You can also find the un-obfuscated code from my viewer on GitHub - donmccurdy/three-gltf-viewer: Drag-and-drop preview for glTF 2.0 models in WebGL using three.js., but it is a bit more complicated than the example above.

3

I read the content of the .glb file and found the “SitDown” animation in animations, but it is not shown in console.log(gltf).

console.log(gltf) says that the animation array is 0, but that is wrong, because I can clearly see it when I open the file myself with an editor.

It seems to me that when GLTFLoader loads the .glb file, it replaces its place.
Might be a bug.

4

This is what the console.log(gltf) shows.:

console log gltf
console log gltf830×185 9.22 KB

This is what I get when I want to see gltf.scene.animations:
consolelog2

This is what the glb file looks like:
glb file

Edit:
This is how I load the file:

var loader = new THREE.GLTFLoader();
loader.load( 'els2.glb', function ( gltf ) {
                    els=gltf.scene;
                    els.rotation.y = Math.PI / 2;
                    els.position.x = 20;
                    els.scale.set(6,6,6);
                    scene.add(els);
                }, undefined, function ( error ) {
                    console.error( error );
                } );
5

Your screenshot does not show the same glTF file as was linked above — one was created by Blender, the other by UniGLTF. See the asset.generator string. Perhaps something has gotten swapped?

6

I exported it from Blender again, just to be sure, and nothing in asset.generator has changed.

cl
cl863×147 8.2 KB

Edit: I remember exporting it from VRoid Studio first and then importing it in Blender to change posture and add animation and export it from Blender again. That might be why it says that in asset.generator.

7

Perhaps your browser’s cache is enabled and loading the old asset? There’s a checkbox for “Disable cache” in the dev tools network tab, in Chrome and Firefox. This just isn’t the same asset in the screenshot, it would not say “UniGLTF” there if it were exported from Blender.

8

I cannot believe this was the problem…
Thank you so so much!! :smiley:

1 Like