Babylonjs Engine

For building 3D web experiences without wrestling with low-level WebGL, this gives you the full Babylon.js toolkit with cameras, lighting systems, mesh builders, and materials. It covers everything from basic scene setup to PBR materials and shadow mapping. The skill includes both the classic global API and modern ES6 imports, which matters if you're working in TypeScript. If you need collision detection, physics, or game-like features out of the box, Babylon.js has stronger batteries-included vibes than Three.js. Good for interactive visualizations, browser games, or any project where you want engine-level features without building them yourself.

skills.sh installs: 2.7K
GitHub stars: 1.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add freshtechbro/claudedesignskills --skill babylonjs-engine --agent claude-code

Installs into .claude/skills of the current project.

Files

Babylon.js Engine Skill

Related Skills

threejs-webgl: Alternative 3D engine
react-three-fiber: React integration for 3D
gsap-scrolltrigger: Animation library
motion-framer: UI animations

Core Concepts

1. Engine and Scene Initialization

Basic Setup

// Get canvas element
const canvas = document.getElementById('renderCanvas');

// Create engine
const engine = new BABYLON.Engine(canvas, true, {
  preserveDrawingBuffer: true,
  stencil: true
});

// Create scene
const scene = new BABYLON.Scene(engine);

// Render loop
engine.runRenderLoop(() => {
  scene.render();
});

// Handle resize
window.addEventListener('resize', () => {
  engine.resize();
});

ES6/TypeScript Setup

import { Engine } from '@babylonjs/core/Engines/engine';
import { Scene } from '@babylonjs/core/scene';
import { FreeCamera } from '@babylonjs/core/Cameras/freeCamera';
import { Vector3 } from '@babylonjs/core/Maths/math.vector';
import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
import { CreateSphere } from '@babylonjs/core/Meshes/Builders/sphereBuilder';

SKILL.md on GitHub