Start with Babylon.js & React

Prerequisites

Before reading this note, you should already understand:

1. How to start a React app or a Next.js app.
2. The basic idea of React components.
3. Basic HTML, CSS, and JavaScript.
4. How to use tools such as Bun and Vite.

Project Setup Steps

Step 1: Initialize the Project

Option 1: create a Next.js app.

bunx create-next-app

Option 2: create a React app with Vite.

bun bun create vite <app-name>

Step 2: Install Dependencies

Install the Babylon.js core package.

bun install @babylonjs/core

Install the Babylon.js React hook package.

bun install babylonjs-hook

Step 3: Initialize the Scene

Create a file named src/components/CustomScene.js. This component is responsible for setting up the Babylon.js scene, camera, light, mesh, ground, and render loop.

import React from "react";
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder } from "@babylonjs/core";
import SceneComponent from 'babylonjs-hook';
const onSceneReady = (scene) => {
  // This creates and positions a free camera (non-mesh)
  const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

  // This targets the camera to scene origin
  camera.setTarget(Vector3.Zero());

  const canvas = scene.getEngine().getRenderingCanvas();

  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);

  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

  // Default intensity is 1. Let's dim the light a small amount
  light.intensity = 0.7;

  // Our built-in 'box' shape.
  box = MeshBuilder.CreateBox("box", { size: 2 }, scene);

  // Move the box upward 1/2 its height
  box.position.y = 1;

  // Our built-in 'ground' shape.
  MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
};

/**
 * Will run on every frame render.  We are spinning the box on y-axis.
 */
const onRender = (scene) => {
  if (box !== undefined) {
    const deltaTimeInMillis = scene.getEngine().getDeltaTime();

    const rpm = 10;
    box.rotation.y += (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
  }
};
export default function CustomScene(){
  return <div> 
    <SceneComponent /> 
  </div>
}

This gives you the smallest useful Babylon.js scene inside a React component. From here, you can start replacing the default box and ground with your own models, interactions, materials, and game logic.

Reference

1. Official Doc