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?
In case anyone is interested about this, I found the way to “add” the animation by inspecting the code from 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/'
});
});
...