ES6 imports required to load animations

Questions
1

I’m having trouble getting animations to load for meshes being imported from glb files in my build that uses the ES6 modules. It may be related to the ES6 side effects, however I’m not sure what other modules I need to import. Based on other forum questions, it would appear to be @babylonjs/core/Animations/animatable, but that doesn’t seem to be enough.

Here’s a simple sandbox example of the expected behavior: Babylon.js Playground. This model has a single mesh with a spinning animation. It loads and plays properly. When I console.log the mesh.animations value it has an array with the animation data, as expected. It also works with ImportMeshAsync (https://playground.babylonjs.com/#IRBUI4#1)

However, when I try to load the same model in my own build, the animation data of the mesh is empty. I’ve also noticed that scene.animationGroups is not populated automatically, but the data is available in the result and I can manually assign it.

const sceneResult = await SceneLoader.ImportMeshAsync('', path, filename, scene);
console.log(scene.animationGroups); // This is empty until I assign it on the next line.
scene.animationGroups = sceneResult.animationGroups; // The data is available, just not assigned to scene on it's own, like it is in the sandbox
console.log(sceneResult.animationGroups);
sceneResult.meshes.forEach((m: AbstractMesh) => {
  console.log(m.name);
  console.log(m.animations); // There are no animations on the mesh here, but there are in the sandbox.
});

Here are my imports:

import '@babylonjs/core/Animations/animatable';
import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
import { Animation } from '@babylonjs/core/Animations/animation';
import { AnimationGroup } from '@babylonjs/core/Animations/animationGroup';
import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
import { Color3 } from '@babylonjs/core/Maths/math.color';
import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
import { Engine } from '@babylonjs/core/Engines/engine';
import { Scene } from '@babylonjs/core/scene';
import { SceneLoader } from '@babylonjs/core/Loading/sceneLoader';
import { Vector3 } from '@babylonjs/core/Maths/math.vector';
import '@babylonjs/loaders/glTF/2.0/glTFLoader';
import '@babylonjs/core/Helpers/sceneHelpers';
2

Not sure if this was meant to be a new post or an answer to a question ???

3

This is my answer to his post. Could it be that it was saved as an edit?!

Let me check

**EDIT - I have no idea how this happened, but instead of answer, I have generated a new revision. My answer is in the next post.

4

Hi! welcome to the forum

Would you be able to share a reproduction of the project? maybe a github project or a zipped version of the issue?
Without digging too deep, it seems like you are importing the right files. I assume there is no exception thrown when you try loading it, is there?

5

I’m not seeing any exceptions or errors either in VS Code when building or in the console while running.

Since my first post, I’ve also experimented with the traditional (non-ES6) loading of the BABYLON global and that does load the animations on the mesh, however the output size is 4.2mb, compared to the 1.98mb version with ES6 treeshaking.

import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

I can put together a simplified version of the project on github later tonight.

Thanks for the quick response!

1 Like
6

Great. leet me know when you share it, i’ll go over the code and see what’s up

7

The code is available here: GitHub - MikeFesta/babylon-animation-issue: Sample app to test Babylon ES6 animation loading.

Thanks for the help!

8

The issue here is not the core lib but the loaders.

use this import - import '@babylonjs/loaders/glTF'; instead of the import you are using, and the animations will be populated correctly.

1 Like
9

Excellent, that did it! Thank you :smiley:

1 Like