Skip to content
Learni
View all tutorials
Développement 3D

Comment développer une scène 3D interactive avec Babylon.js en 2026

18 minINTERMEDIATE
TypeScriptBabylon.js3D Web

Introduction

Babylon.js est un moteur 3D open source puissant pour le web. Il permet de créer des expériences immersives directement dans le navigateur sans installation lourde. Ce tutoriel intermédiaire vous guide pas à pas dans la construction d’une scène 3D complète incluant maillages, éclairage dynamique, animations et interactions clavier/souris. Vous apprendrez à structurer proprement votre code TypeScript et à exploiter les fonctionnalités avancées du moteur pour des rendus fluides à 60 FPS.

Prérequis

  • Connaissances de base en TypeScript et HTML5
  • Node.js 20+ et npm
  • Un éditeur moderne (VS Code recommandé)
  • Navigateur récent supportant WebGL 2

Initialisation du projet

terminal
npm create vite@latest babylon-scene -- --template react-ts
cd babylon-scene
npm install babylonjs babylonjs-gui

Vite + React + TypeScript offre un environnement de développement rapide. Babylon.js et son module GUI sont installés pour gérer à la fois le rendu 3D et les interfaces utilisateur.

Création du moteur et de la scène

src/BabylonScene.tsx
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight } from 'babylonjs';
import { useEffect, useRef } from 'react';

export const BabylonScene = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current!;
    const engine = new Engine(canvas, true);
    const scene = new Scene(engine);

    const camera = new ArcRotateCamera('camera', Math.PI / 2, Math.PI / 3, 10, Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);

    engine.runRenderLoop(() => scene.render());
    window.addEventListener('resize', () => engine.resize());

    return () => engine.dispose();
  }, []);

  return <canvas ref={canvasRef} style={{ width: '100%', height: '100vh' }} />;
};

Ce code initialise le moteur Babylon.js, crée une scène et une caméra orbitale. Le runRenderLoop garantit un rendu à 60 FPS et le resize gère les changements de taille de fenêtre.

Ajout de maillages de base

src/BabylonScene.tsx
import { MeshBuilder, StandardMaterial, Color3 } from 'babylonjs';

// À l'intérieur du useEffect, après la création de la lumière
const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);
sphere.position.y = 1;

const ground = MeshBuilder.CreateGround('ground', { width: 10, height: 10 }, scene);

const material = new StandardMaterial('mat', scene);
material.diffuseColor = new Color3(0.2, 0.6, 0.9);
sphere.material = material;

MeshBuilder permet de créer rapidement des primitives. Un matériau StandardMaterial est appliqué à la sphère pour lui donner une couleur et un aspect réaliste.

Ajout d’éclairage et d’ombres

src/BabylonScene.tsx
import { DirectionalLight, ShadowGenerator } from 'babylonjs';

const dirLight = new DirectionalLight('dirLight', new Vector3(-1, -2, -1), scene);
dirLight.position = new Vector3(5, 10, 5);

const shadowGenerator = new ShadowGenerator(1024, dirLight);
shadowGenerator.addShadowCaster(sphere);
ground.receiveShadows = true;

Une lumière directionnelle avec générateur d’ombres apporte du réalisme. La sphère projette une ombre sur le sol, technique essentielle pour les scènes intermédiaires.

Animation avec AnimationGroup

src/BabylonScene.tsx
import { Animation, AnimationGroup } from 'babylonjs';

const animGroup = new AnimationGroup('bounce');
const anim = new Animation('bounceAnim', 'position.y', 30, Animation.ANIMATIONTYPE_FLOAT);
const keys = [
  { frame: 0, value: 1 },
  { frame: 30, value: 3 },
  { frame: 60, value: 1 }
];
anim.setKeys(keys);
animGroup.addTargetedAnimation(anim, sphere);
animGroup.play(true);

AnimationGroup permet de contrôler plusieurs animations ensemble. Ici la sphère rebondit en boucle, démontrant le système d’animation frame-based de Babylon.js.

Ajout d’interactions clavier

src/BabylonScene.tsx
window.addEventListener('keydown', (evt) => {
  if (evt.key === 'r') {
    sphere.rotation.y += Math.PI / 2;
  }
  if (evt.key === ' ') {
    animGroup.play(true);
  }
});

L’écoute des événements clavier permet d’interagir avec la scène. La touche R fait pivoter la sphère et la barre d’espace relance l’animation.

Bonnes pratiques

  • Toujours disposer les ressources (engine.dispose) pour éviter les fuites mémoire
  • Utiliser des AnimationGroup plutôt que des animations individuelles pour une meilleure gestion
  • Précharger les textures et modèles avec AssetsManager
  • Séparer la logique de rendu de la logique métier dans des classes dédiées
  • Activer le support WebGL 2 et les extensions matérielles pour de meilleures performances

Erreurs courantes à éviter

  • Oublier d’appeler engine.resize() lors des changements de fenêtre
  • Créer des matériaux à l’intérieur de la boucle de rendu
  • Ne pas vérifier la disponibilité de WebGL avant l’initialisation
  • Utiliser des valeurs de frame trop élevées sans adapter la fréquence d’animation

Pour aller plus loin

Approfondissez vos compétences avec les formations Babylon.js de Learni. Vous y découvrirez le chargement de modèles glTF, les shaders personnalisés et l’intégration avec React Three Fiber.