[SOLVED] glTF add animationClips to model


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();

// 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.model.model = model;
		tmp = animationClips
	}, {
		basePath: url + 'gltf/SambaDancing/'

How can I attach those animationClips to the gltf model?


Any updates on this question?


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;


		// 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++) {
			gltf.animComponent.curClip = animationClips[0].name;

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

		var clip = gltf.animComponent.getCurrentClip();

	}, {
		basePath: 'Models/YBot/'



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

Hope this helps!