Noticing and Fixing Missing ES6 Modules in Babylonjs
I'm having my students use ES6 modules with Babylonjs this semester (see here for a quick overview of how I had them configure their development environments).
A couple of students asked why their code might suddenly start showing a white screen in the browser, and how they might fix it. Their first assignment was meant to be a simple "add some Babylon content to this working sample" as a way of making sure they had a working environment, and at least walked through the Babylon 101 tutorial.
I posted a detailed reply to one of these questions on Teams, and thought I'd repeat it here (since this is a pretty common issue).
Any ideas on why I would get a blank white screen when trying to use Animation.CreateAndStartAnimation()?
My Answer (copied more or less directly from Teams)
If there is a white screen, look in the console to see if there is an error. Here I see this:
beginDirectAnimation is undefined on scene. Using the debugger, I confirm this by inspecting the scene object. Why?
Next, I search in VS code (clicking the gear at the end of the "files to exclude" line to have it search everything) and get this:
Notice that the first hit in animatable.js is assigning a function to
Scene.prototype.beginDirectAnimation ... this is a common way of adding NEW METHODS to JS objects. Looking at this file, I see that it defines the Animatable class, and then below it, adds a bunch of methods to Scene. Oh, wait ...
(the solution begins to dawn on me...)
I remember, oh ya (I even mentioned this when we were looking at the Babylon docs): go to https://doc.babylonjs.com/features/es6_support and look down in the "Side Effects" and FAQ sections. If you are importing individual modules (as I asked you too), instead of the top level
@babylonjs/core (which will include all of core), you need to remember to look at the list of modules with side effects in "The intellisense does not propose the method I normally use in the bundled version and an undefined error is raised at runtime?"
And there, the very first line is:
- scene."animationRelatedMethods like beginAnimation and so on... " are available in the
So, after all this, I realize, we need to add import
to the import statements to pull in the module that adds those commands to the
Scene.prototype.beginDirectAnimation) that animatable had side effects. But the earlier bits about debugging, stepping through the code, etc., are things you should start practicing.
For debugging, I simply put a break point on that line that crashed so the debugger stopped there, refreshed the tab to reload and restart, and then when it stopped I started poking around at the objects.