How do you play an animation ?
I imported a rigged model with animation attached.
BABYLON.SceneLoader.ImportMesh("","",“model_1.babylon”,scene, model_1_completed);
function model_1_completed(meshes)
{
meshes[0].play(); //No error thrown but nothing happen, how do I play the animation ?
}
Hello and welcome!
So animation doc: Babylon.js Documentation
Demo (if you have animation range): https://www.babylonjs-playground.com/#BCU1XR#0
Another demo here with less code to better understand :
https://www.babylonjs-playground.com/#QY1WYT#46
That’s one of the ways to do it.
So it basically just boils down to:
scene.beginAnimation(skeletons2[0], 0, 100, true, 1.0);
Curious that it doesn’t target the mesh itself like: Mesh[0].beginAni~~~ but instead target the scene ? That is so weird…
Nevermind that, how do I retrieve skeletons2[0] ? I made the animation in Blender but I have no idea if it would be a skeletons2[0] or a skeletons2[1]…not even sure if it is call a skeleton…is there a *.babylon file inspector somewhere ?
Away3D have an away3D file inspector.
Well we must have done a pretty bad job mentioning our inspector:)
the scene is the orchestrator of timelines so this is why animations are started there
From your mesh you can just do scene.beginAnimation(mesh.skeleton,…)
Here are some docs about our inspector:
You can also do as you think, but with skeleton[0] (not mesh[0]) :
skeleton[0].beginAnimation("walk", true, 1.0, function() {});
But to use this method, you need to create the animation names with createAnimationRange () to set names to your animations and then use skeleton.beginAnimation ()
skeleton[0].createAnimationRange("walk", 0, 100);`
Exemple here :
var BipWalk = null;
// Import animation walk with character lowpoly
BABYLON.SceneLoader.ImportMesh("", "http://www.babylon.actifgames.com/anim/", "walk.babylon", scene, function (newMeshesFactice, particleSystems, skeletonsWalk) {
var meshFactice = newMeshesFactice[0]; // Character lowpoly factice avec anim walk
BipWalk = skeletonsWalk[0];// skeleton for anim walk
BipWalk.createAnimationRange("walk", 0, 40);
if (BipWalk) {
meshFactice.position.x = 100;
meshFactice.dispose();// delete mesh lowpoly factice
// Import character hightpoly
BABYLON.SceneLoader.ImportMesh("", "http://www.babylon.actifgames.com/anim/", "man.babylon", scene, function (newMeshesPerso, particleSystems, skeletonsPerso) {
skeletonsPerso[0].copyAnimationRange(BipWalk, "walk", true);
skeletonsPerso[0].beginAnimation("walk", true, 1.0);
});
}
});
I think this method is better personally for creating animations and calling them by their names.
The first method with scene.beginAnimation () is the most direct.
@Deltakosh
Is there an offline version of the babylon inspector that people can download ?
A nw.js version or an electron version ?
Even though away3D is pretty much dead, it offers an offline inspector and that is the reason why it never truly dies.
@Dad72 you lost me at newMeshesFactice.
Coming from away3D, making importing/animating an away3D model is so much easier, allow me to illustrate:
Load Model:
Loader_Cube.loadGeometry("/warrior.md2", new Md2());
Loader_Cube.addEventListener(Loader3DEvent.LOAD_SUCCESS, ModelLoadSuccessful);
private function ModelLoadSuccessful(event: Loader3DEvent): void
{
var Actual_Mesh:Mesh = Loader_Cube.handle as Mesh;
run_vertex_animator = Actual_Mesh.animationLibrary.getAnimation(“runJNDOCM²j”).animator as VertexAnimator;
run_vertex_animator.play();
//You can call this function anyway you like, not just here.
}
In Babylon.js I am seeing from you concepts like
newMeshesFactice [what even is a Factice ? Can you eat it ? It is something you apply on your skin ? Is it soft ? Why so complicated ?]
I look forward to Babylone version 1000 when it will be as simple and straight forward as this:
BABYLON.SceneLoader.ImportMesh(“model_1.babylon”,scene, model_1_completed);
function model_1_completed(mesh)
{
mesh.setAnimation(“Run”, 0, 20);
mesh.setAnimation(“Walk”, 21, 50);
mesh.play(“Run”);
}
Until then, I find the way Babylon.js handles animation unacceptable and I formally refuses to learn this part of babylon.js.
Guess I will only be using Babylon.js for static models or models that can be animated that is just animated as a whole.
You can just get the inspector here: Babylon.js/babylon.inspector.bundle.js at master · BabylonJS/Babylon.js · GitHub
You can embed it in whatever you want 
hahaha 
Well this is your choice but not really constructive
But because I hate when someone is not satisfied, here is an example:
https://www.babylonjs-playground.com/#BCU1XR#243
The relevant code:
var mesh = scene.getMeshByName("mixamorig:Skin");
var runRange = mesh.skeleton.getAnimationRange("YBot_Run");
scene.beginAnimation(mesh.skeleton, runRange.from, runRange.to, true);
Is it that different?
@BritneyWatch In fact this meshFactice is a model that is loaded with all the animations. This template can then be erased, I only keep the animations with createAnimationRange ().
Then I load my other models without animations (the skeleton must be present and have the same number of bones, but without animations). and I copy the animations of the meshFactice on the new models load
The advantage is that my animations are only loaded once. All other character models are loading faster. The animations are copied on the new models.
The Factice model serves as a reference. It is then delete.
I hope it’s clearer for you.
To make it simpler:
BABYLON.SceneLoader.ImportMesh("", "anim/", "man.babylon", scene, function (newMeshesPerso, particleSystems, skeletonsPerso) {
skeletonsPerso[0].createAnimationRange(skeletonsPerso[0], "walk", 0, 40);
skeletonsPerso[0].beginAnimation("walk", true, 1.0);
});Questions regarding the offline inspector, so I downloaded “babylon.inspector.bundle.js”, how do I get it to run ?
I created a boiler HTML 5 [plain] and put in
<script src="babylon.inspector.bundle.js"></script>
Nothing happens.
What else do I have to do to make it run ?
Please don’t say connect to anything online cause then it is still dependent on something online ;p
I will just say: read the docs:)
https://doc.babylonjs.com/how_to/debug_layer
I have reduced the example code to the absolute minimum, I will try to understand it from here:
BABYLON.SceneLoader.ImportMesh("", “./scenes/”, “dummy3.babylon”, scene, Model_loaded);
function Model_loaded(newMeshes, particleSystems, skeletons)
{
var skeleton = skeletons[0];
var mesh = scene.getMeshByName(“mixamorig:Skin”);
var runRange = mesh.skeleton.getAnimationRange(“YBot_Run”);
scene.beginAnimation(skeleton, runRange.from, runRange.to, true);
}
//Looking at this…I am “starting” to understand though not completely.
1: How do I know what I want is in skeletons[0] and not skeletons[1] or 2 or 10,000 ?
2: How do I know it is “mixamorig:Skin”, I couldn’t even get the inspector to work.
So close to understanding…thanks to you guys !
Regarding the inspector, I have:
Step 1:
Implemented:
< script src=“babylon.js” >
< script src=“babylon.inspector.bundle.js” >
Step 2:
Implemented:
scene.debugLayer.show();
AFTER all the set up is done.
Nothing is visible.
It works here. You must have missed something.
Do you create a scene?
Look in the console (F12) to see if you have any errors.
@Dad72:
I have removed all the junk from my file just to show you EVERYTHING here, tested, this works, everything works…except…no inspector view anywhere [why is my html tags struggling to show properly ? So many tags are removed and the whole pasted code makes no sense !]:
< !DOCTYPE html >
< html >
<head >
<meta charset = "UTF-8" >
<title >Show Inspector< /title>
<style type="text/css">
html, body
{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background-color: #000000;
}
#my_canvas
{
width:100%;
height:100%;
touch-action:none;
}
</style>
<script src="babylon.js"></script>
<script src="babylon.inspector.bundle.js"></script>
<script>
var canvas_id; var engine; var scene; var camera; var light;
function init()
{
setup_Babylon_Scene();
}
function setup_Babylon_Scene()
{
canvas_id = document.getElementById("my_canvas");
engine = new BABYLON.Engine(canvas_id, true);
scene = new BABYLON.Scene(engine);
camera = new BABYLON.ArcRotateCamera("Camera1",0,0,5,BABYLON.Vector3.Zero(),scene);
camera.attachControl(canvas_id); //Default controls enabled.
light = new BABYLON.PointLight("Light1", new BABYLON.Vector3(-20,30,-20),scene);
BABYLON.SceneLoader.ImportMesh("","","skinned_model.babylon",scene, model_1_completed);
engine.runRenderLoop(onEnterFrame);
window.addEventListener("resize",function(){engine.resize();});
scene.debugLayer.show();
}
function model_1_completed(newMeshes, particleSystems, skeletons)
{
console.log("Model_Loaded");
}
function onEnterFrame()
{
scene.render();
}
</script>
</head>
<body onLoad="init()">
<canvas id="my_canvas"></canvas>
</body>
</html>