[SOLVED] glTF add animationClips to model

Help & Support
1

Hey all,

I found some old example from the playercanvas-gltf loader and it seems to load the animations automatically. But the latest version simply returns a list of [AnimationClip]:

gltfRoot = new pc.Entity();
app.root.addChild(gltfRoot);

// testing this model: https://github.com/pissang/claygl/tree/master/example/assets/models/SambaDancing
app.assets.loadFromUrl(url + 'gltf/SambaDancing/SambaDancing.gltf', 'json', function (err, asset) {
	var json = asset.resource;
	var gltf = JSON.parse(json);
	loadGltf(gltf, app.graphicsDevice, function (model, textures, animationClips) {
		gltfRoot.addComponent('model');
		gltfRoot.model.model = model;
		tmp = animationClips
	}, {
		basePath: url + 'gltf/SambaDancing/'
	});
});

How can I attach those animationClips to the gltf model?

2

Any updates on this question?

3

In case anyone is interested about this, I found the way to “add” the animation by inspecting the code from https://playcanvas.github.io/playcanvas-gltf/viewer/

...
app.assets.loadFromUrl('Models/YBot/YBot.gltf', 'json', function (err, asset) {
	console.log('loadFromUrl() err', err);
	var json = asset.resource;
	var gltf = JSON.parse(json);

	loadGltf(gltf, app.graphicsDevice, function (err, res) {
		console.log('loadGltf() err', err);
		// Wrap the model as an asset and add to the asset registry
		var asset = new pc.Asset('gltf', 'model', {
			url: ''
		});
		asset.resource = res.model;
		asset.loaded = true;

		app.assets.add(asset);

		// Add the loaded scene to the hierarchy
		var gltf = new pc.Entity('gltf');
		gltf.addComponent('model', {
			asset: asset
		});

		var animationClips = res.animations;

		// Load any animations
		if (animationClips && animationClips.length > 0) {
			this.animationClips = animationClips;

			// If we don't already have an animation component, create one.
			// Note that this isn't really a 'true' component like those
			// found in the engine...
			if (!gltf.animComponent) {
				gltf.animComponent = new AnimationComponent();
			}

			// Add all animations to the model's animation component
			for (i = 0; i < animationClips.length; i++) {
				animationClips[i].transferToRoot(gltf);
				gltf.animComponent.addClip(animationClips[i]);
			}
			gltf.animComponent.curClip = animationClips[0].name;

			console.log(animationClips.length + " animation clips loaded")
		}

		var clip = gltf.animComponent.getCurrentClip();
		clip.play();

		app.root.addChild(gltf);
	}, {
		basePath: 'Models/YBot/'
	});
});
...

Links:



https://playcanvas.github.io/playcanvas-gltf/viewer/

Was just playing around with just using the engine without the editor.

Hope this helps!

Cheers!

5 Likes