skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

babylonjs-engine

Build real-time 3D web experiences with Babylon.js scenes, physics, and rendering.

Updated Jun 30, 2026
Search Tags:#physics#webgl#game engine#webxr#3D rendering#babylonjs#pbr materials
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill babylonjs-engine-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: babylonjs-engine
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/babylonjs-engine
Command: npx skills add https://github.com/ayofemiade/cleva --skill babylonjs-engine-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Building browser-based 3D applications requires deep knowledge of WebGL/WebGPU rendering, scene graphs, physics engines, and asset pipelines. This Skill provides complete Babylon.js implementation patterns, API references, and code generators so you can create interactive 3D scenes, games, and visualizations without memorizing the entire framework. ## Core Features & Use Cases - Scene and Engine Setup: Initialize engines, cameras (Free, ArcRotate, Universal, Follow), lighting systems, and render loops with correct configuration. - Meshes, Materials, and Physics: Create built-in shapes, apply Standard or PBR materials, load GLTF/GLB models, and enable Havok physics with aggregates. - Code Generation Scripts: Use mesh_builder.py and scene_generator.py to scaffold mesh creation code and full scene boilerplate in JavaScript or TypeScript. - Use Case: Imagine building a product configurator where users orbit a 3D model, change materials, and view it in AR. This Skill gives you the ArcRotateCamera setup, PBR material configuration, GLTF loading, and WebXR integration patterns to implement it. ## Quick Start Ask the AI to create a Babylon.js scene with an orbit camera, a PBR sphere, ground shadows, and Havok physics enabled.

Frequently Asked Questions about babylonjs-engine

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Babylon.js scene with camera and lighting?▼

Create an Engine bound to a canvas, instantiate a Scene, then add a camera such as ArcRotateCamera and a HemisphericLight. Call camera.attachControl(canvas, true) for input handling and start rendering with engine.runRenderLoop.

How to load GLTF or GLB models in Babylon.js?▼

Use SceneLoader.ImportMeshAsync with the model URL to load GLTF or GLB files asynchronously. For batch loading of multiple assets, use AssetsManager with mesh and texture tasks that report completion via onFinish callbacks.

Babylon.js vs Three.js for web 3D development?▼

Babylon.js is a full game engine with built-in physics, GUI, WebXR helpers, and an inspector, while Three.js is a lighter rendering library. Babylon.js suits complete interactive applications; Three.js suits minimal custom rendering pipelines.

Does Babylon.js support physics simulations?▼

Yes, Babylon.js supports physics through the Havok plugin. Initialize HavokPhysics, call scene.enablePhysics with a gravity vector, then attach PhysicsAggregate objects with shapes like SPHERE or BOX and mass properties to meshes.

Why is my Babylon.js scene rendering slowly?▼

Slow rendering usually comes from too many draw calls or unoptimized assets. Use mesh instancing or thin instances for repeated geometry, merge meshes sharing materials, freeze world matrices on static objects, and apply SceneOptimizer for adaptive quality.

Can I use Babylon.js with React?▼

Yes, Babylon.js integrates with React by creating the Engine and Scene inside a useEffect hook bound to a canvas ref. Dispose the scene and engine in the cleanup function to prevent memory leaks when the component unmounts.

Related Skills

Explore More Software Engineering Skills→
norrbackanorrbacka

threejs-loaders

Load GLTF, GLB, textures, HDR, and EXR assets in Three.js.

Community
Advanced
fyunusafyunusa

spline-interactive

Integrate interactive Spline 3D scenes into React and Next.js applications.

Community
Intermediate
truongnattruongnat

motion-design-pro

Coordinate GSAP timelines, Framer Motion variants, and CSS animations for 60fps UI motion.

Community
Advanced
organvm-i-theoriaorganvm-i-theoria

react-three-fiber-patterns

Build declarative 3D scenes in React using react-three-fiber, drei helpers, and custom shaders.

Official
Intermediate