Babylon.js Actions — Interactive Behavior System
In this tutorial, you will learn about Babylon.js Actions. We cover key concepts, practical examples, and best practices to help you master this topic.
Babylon.js action system enables conditional interactive behaviors through triggers, conditions, and action chains without writing extensive game loop code.
What You'll Learn
By the end of this guide, you will create actions with triggers and conditions, chain multiple actions together, use interpolation actions for smooth animations, detect key presses, and build complex interactive scenes.
Basic Action
box.actionManager = new BABYLON.ActionManager(scene);
box.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
BABYLON.ActionManager.OnPickTrigger,
function() {
box.scaling.x += 0.1;
}
)
);
Conditional Action
box.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
BABYLON.ActionManager.OnPickTrigger,
function() {
box.material.diffuseColor = BABYLON.Color3.Random();
},
new BABYLON.ValueCondition(box, 'position.y', 1, BABYLON.Condition.IsGreaterThan)
)
);
Action Chaining
var moveAction = new BABYLON.InterpolateValueAction(
BABYLON.ActionManager.OnPickTrigger,
box,
'position.y',
3,
1000
);
var scaleAction = new BABYLON.InterpolateValueAction(
BABYLON.ActionManager.OnPickTrigger,
box,
'scaling.x',
2,
500
);
// Chain: move then scale
moveAction.then(scaleAction);
box.actionManager.registerAction(moveAction);
Key Press Detection
scene.actionManager = new BABYLON.ActionManager(scene);
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
{
trigger: BABYLON.ActionManager.OnKeyUpTrigger,
parameter: 'Space'
},
function() {
box.position.y += 0.5;
}
)
);
Common Mistakes
1. Forgetting ActionManager
Meshes need an ActionManager assigned before registering actions.
2. Scene-Level ActionManager Not Set
For key presses and scene events, set scene.actionManager = new BABYLON.ActionManager(scene).
3. Trigger Enum Values
Use BABYLON.ActionManager.OnPickTrigger, not the string 'onPick'. Use the enum.
4. InterpolateValueAction Units
Position values are in world units. Scaling is relative. Understand the property being animated.
5. Condition Predicate Syntax
Conditions use property names as strings: 'position.y'. The condition checks against the mesh.
Practice Questions
Q1: What is the most common trigger? A: BABYLON.ActionManager.OnPickTrigger for click/tap interaction.
Q2: How do you create conditional actions? A: Pass a BABYLON.Condition as the third parameter to registerAction.
Q3: How do you chain actions? A: Call action1.then(action2) before registering action1.
Q4: How do you detect key presses? A: Register a scene-level action with OnKeyUpTrigger and a parameter for the key.
Q5: How do you interpolate a property? A: Use BABYLON.InterpolateValueAction with trigger, target, property, target value, and duration.
Challenge: Build a door that opens when the player clicks it (if they have the key), plays a creak sound, and highlights in green when hoverable.
FAQ
Try It Yourself
Build a clickable box with chained actions.
<!DOCTYPE html>
<html>
<head>
<title>Babylon.js Actions</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Action Demo</h2>
<p>Click the box. Press Space to jump.</p>
<canvas id="renderCanvas" style="width:100%;height:400px;border-radius:8px;"></canvas>
<script>
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera('camera', -Math.PI/2, Math.PI/3, 8, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
var box = BABYLON.MeshBuilder.CreateBox('box', { size: 1.5 }, scene);
box.position.y = 0.75;
var mat = new BABYLON.StandardMaterial('mat', scene);
mat.diffuseColor = new BABYLON.Color3(0.3, 0.6, 1);
box.material = mat;
BABYLON.MeshBuilder.CreateGround('ground', { width: 10, height: 10 }, scene);
// ActionManager on box
box.actionManager = new BABYLON.ActionManager(scene);
// Compound action: scale up then change color
var scaleUp = new BABYLON.InterpolateValueAction(
BABYLON.ActionManager.OnPickTrigger,
box, 'scaling.x', 1.5, 300
);
var colorChange = new BABYLON.InterpolateValueAction(
BABYLON.ActionManager.OnPickTrigger,
mat, 'diffuseColor', new BABYLON.Color3(1, 0.3, 0.2), 300
);
var scaleDown = new BABYLON.InterpolateValueAction(
BABYLON.ActionManager.OnPickTrigger,
box, 'scaling.x', 1, 300
);
scaleUp.then(colorChange).then(scaleDown);
box.actionManager.registerAction(scaleUp);
// Key press: Space to jump
scene.actionManager = new BABYLON.ActionManager(scene);
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
{ trigger: BABYLON.ActionManager.OnKeyUpTrigger, parameter: ' ' },
function() {
box.position.y = 0.75;
var jump = new BABYLON.InterpolateValueAction(
BABYLON.ActionManager.NothingTrigger,
box, 'position.y', 3, 400
);
var fall = new BABYLON.InterpolateValueAction(
BABYLON.ActionManager.NothingTrigger,
box, 'position.y', 0.75, 400
);
jump.then(fall);
jump.execute();
}
)
);
engine.runRenderLoop(function() { scene.render(); });
window.addEventListener('resize', function() { engine.resize(); });
</script>
</body>
</html>
What's Next
Load and export scenes.
Loading Scenes — Loading .babylon and glTF files. Project — Complete 3D project.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro