Babylon.js Scene Graph — Organizing 3D Objects

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Babylon.js Scene Graph. We cover key concepts, practical examples, and best practices to help you master this topic.

Babylon.js scene graph organizes 3D objects in parent-child hierarchies where transformations propagate from parent to children.

What You'll Learn

By the end of this guide, you will create scene graph hierarchies with parent-child relationships, use TransformNode for non-mesh parents, work with local vs world coordinates, set pivot points, and build nested object structures.

Parent-Child Hierarchy

var parentBox = BABYLON.MeshBuilder.CreateBox('parent', { size: 2 }, scene);
var childSphere = BABYLON.MeshBuilder.CreateSphere('child', { diameter: 1 }, scene);
childSphere.parent = parentBox;

parentBox.position.x = 3;
// childSphere moves with parentBox

TransformNode

var pivot = new BABYLON.TransformNode('pivot', scene);
pivot.position.y = 2;

var box = BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);
box.parent = pivot;

pivot.rotation.y = Math.PI / 4;
// box rotates around the pivot

Local vs World

console.log('Local position:', box.position);
console.log('World position:', box.getAbsolutePosition());

var worldMatrix = box.getWorldMatrix();

Pivot Point

box.setPivotPoint(new BABYLON.Vector3(0, -0.5, 0));
box.position.y = 1;
// Rotates around bottom instead of center

Common Mistakes

1. Setting Parent After Positioning

Set parent BEFORE positioning. Setting parent after position transforms the child's position relative to the parent.

2. Circular Parent References

A mesh cannot be its own ancestor. Babylon.js issues a warning for circular references.

3. Not Using TransformNode

Use TransformNode instead of empty Mesh for pivot groups. TransformNode has no rendering overhead.

4. Assuming World Position Equals Local

A child's position is relative to its parent. Use getAbsolutePosition for world coordinates.

5. Forgetting to Dispose Children

Disposing a parent does not automatically dispose children. Iterate and dispose individually.

Practice Questions

Q1: How do you make a child of a mesh? A: Set childMesh.parent = parentMesh.

Q2: What is TransformNode used for? A: A non-rendering node for grouping and pivoting transformations.

Q3: How do you get world position? A: Call mesh.getAbsolutePosition().

Q4: How do you set a pivot point? A: Call mesh.setPivotPoint(new BABYLON.Vector3(x, y, z)).

Q5: How do you remove a parent? A: Set mesh.parent = null.

Challenge: Build a solar system with planets orbiting a sun. Each planet has its own orbit pivot. Add a moon orbiting a planet.

FAQ

Does Babylon.js support scene graphs?

Yes. Babylon.js has full scene graph support with TransformNode, AbstractMesh, and Mesh.

What is the root of the scene graph?

The scene itself is the implicit root. All meshes without a parent are direct children of the scene.

Can I reparent a mesh during animation?

Yes. Changing parent mid-animation updates the world matrix for the next frame.

How do I traverse the scene graph?

Use mesh.getChildren() or scene.rootNodes to iterate.

Does scaling a parent affect children?

Yes. Parent scale multiplies with child scale.

Try It Yourself

Build a simple solar system.

<!DOCTYPE html>
<html>
<head>
    <title>Babylon.js Scene Graph</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Scene Graph Demo</h2>
<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, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);

// Sun
var sun = BABYLON.MeshBuilder.CreateSphere('sun', { diameter: 2 }, scene);
var sunMat = new BABYLON.StandardMaterial('sunMat', scene);
sunMat.emissiveColor = new BABYLON.Color3(1, 0.6, 0);
sun.material = sunMat;

// Orbit pivot
var orbitPivot = new BABYLON.TransformNode('orbitPivot', scene);

// Planet
var planet = BABYLON.MeshBuilder.CreateSphere('planet', { diameter: 0.6 }, scene);
planet.position.x = 3;
planet.parent = orbitPivot;

var planetMat = new BABYLON.StandardMaterial('planetMat', scene);
planetMat.diffuseColor = new BABYLON.Color3(0.3, 0.6, 1);
planet.material = planetMat;

// Moon orbit around planet
var moonPivot = new BABYLON.TransformNode('moonPivot', scene);
moonPivot.parent = planet;
moonPivot.position.x = 0;

var moon = BABYLON.MeshBuilder.CreateSphere('moon', { diameter: 0.2 }, scene);
moon.position.x = 0.8;
moon.parent = moonPivot;

scene.registerBeforeRender(function() {
    orbitPivot.rotation.y += 0.01;
    moonPivot.rotation.y += 0.03;
});

engine.runRenderLoop(function() { scene.render(); });
window.addEventListener('resize', function() { engine.resize(); });
</script>
</body>
</html>

What's Next

Master Babylon.js cameras.

Cameras — Camera types and controls. Lights — Lighting systems.

← Previous Babylon.js Importing & Asset Management — glTF, GLB, and Optimization Next → Babylon.js Cameras — Viewpoint and Navigation Controls

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Babylonjs