{"id":15576,"library":"create-babylonjs","title":"Babylon.js Project Scaffolding CLI","description":"create-babylonjs is a command-line interface (CLI) tool designed to quickly scaffold new Babylon.js projects. It simplifies project setup by offering choices for module format (ES6 for tree-shaking or UMD for global `BABYLON` namespace), language (TypeScript or JavaScript), and bundler (Vite, Webpack, Rollup, or no bundler for CDN-only). The tool ensures a ready-to-run project that includes a starter scene, glTF model loading, environment lighting, and proper side-effect imports for optimized ES6 builds. Currently at version 9.3.3, it tracks the rapid development cycle of the Babylon.js core library, which typically sees new minor versions released weekly and major versions annually. This CLI is crucial for developers seeking a streamlined entry into Babylon.js development without the overhead of manual project configuration.","status":"active","version":"9.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/BabylonJS/Babylon.js","tags":["javascript","babylonjs","babylon.js","webgl","webgpu","3d","scaffold","create","template"],"install":[{"cmd":"npm install create-babylonjs","lang":"bash","label":"npm"},{"cmd":"yarn add create-babylonjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add create-babylonjs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"For ES6 modules and effective tree-shaking, always use deep imports from `@babylonjs/core` to pull in only necessary components. Importing from the root package will include the entire library, negating tree-shaking benefits.","wrong":"import { Engine, Scene } from '@babylonjs/core';","symbol":"Engine, Scene","correct":"import { Engine, Scene } from '@babylonjs/core/Engines/engine';\nimport { Scene } from '@babylonjs/core/scene';"},{"note":"Loaders like glTF are registered via side-effect imports. This line must be present to enable glTF model loading functionality at runtime in ES6 projects.","wrong":"SceneLoader.AppendAsync(file, scene); // Errors without loader import","symbol":"GLTF Loader","correct":"import '@babylonjs/loaders/glTF';"},{"note":"For UMD (CommonJS) projects or when targeting older environments, the entire Babylon.js library is imported into a global `BABYLON` namespace. This is less common in new, bundled ES6 projects.","wrong":"const BABYLON = require('babylonjs'); // Incompatible with modern bundlers in ESM projects","symbol":"BABYLON (UMD)","correct":"import * as BABYLON from 'babylonjs';"}],"quickstart":{"code":"npm create babylonjs\ncd my-babylonjs-app\nnpm install\nnpm run dev","lang":"typescript","description":"Initializes a new Babylon.js project using the CLI, installs project dependencies, and starts the local development server."},"warnings":[{"fix":"Ensure your project's `tsconfig.json` targets TypeScript 6.0 or higher when using Babylon.js 9.1.0 and later.","message":"Babylon.js core library, used by generated projects, upgraded to TypeScript 6.0 in version 9.1.0. Older projects upgrading Babylon.js manually might encounter type conflicts if their TypeScript version is not updated accordingly.","severity":"breaking","affected_versions":">=9.1.0"},{"fix":"Update imports to point directly to the module file for each component, e.g., `import { Scene } from '@babylonjs/core/scene';`.","message":"To leverage tree-shaking and optimize bundle size in ES6 projects, always use deep imports (e.g., `import { Engine } from '@babylonjs/core/Engines/engine';`) instead of root imports (e.g., `import { Engine } from '@babylonjs/core';`).","severity":"gotcha","affected_versions":">=5.0"},{"fix":"Add the specific side-effect import for each loader or material package required by your scene.","message":"Forgetting to include side-effect imports for essential features like glTF loaders (`import '@babylonjs/loaders/glTF';`) or certain materials (`import '@babylonjs/core/Materials/standardMaterial';`) will lead to runtime errors when attempting to use those features.","severity":"gotcha","affected_versions":">=5.0"},{"fix":"For serious development, choose Vite, Webpack, or Rollup during project creation. For the CDN-only template, open `index.html` directly in a browser to run the application.","message":"The 'None' bundler option generates a CDN-only project without `npm` dependencies or a development server. It is suitable for simple experiments or learning but lacks modern development features like hot-reloading or optimized production builds.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Review Babylon.js 9.0 documentation for `MaterialPlugin` updates and changes to shader generation, particularly if using WebGPU or custom material extensions.","message":"Babylon.js 9.0 introduced significant updates to rendering, including major changes to how main materials generate WGSL shader code with WebGPU. Custom shaders or advanced material plugins might require adjustments.","severity":"breaking","affected_versions":">=9.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure imports specify the full path to the module, e.g., `import { Engine } from '@babylonjs/core/Engines/engine';`.","cause":"Incorrect or incomplete import path in an ES6 module project, often caused by trying to import from the root package instead of a deep path.","error":"Module not found: Error: Can't resolve '@babylonjs/core'"},{"fix":"If using UMD, ensure `import * as BABYLON from 'babylonjs';` is present. If using CDN, verify the `babylon.js` script tag is correctly placed in `index.html`.","cause":"Attempting to access the `BABYLON` global object in a project configured for ES6 modules without a UMD import, or in a CDN-based project where the `babylon.js` script tag is missing or loaded incorrectly.","error":"BABYLON is not defined"},{"fix":"Add `import '@babylonjs/core/Helpers/sceneHelpers';` to the top of your main scene file to register these helper functions.","cause":"Missing the necessary side-effect import for Babylon.js helper functions or specific features like `createDefaultCamera` or `createDefaultEnvironment`.","error":"Uncaught TypeError: scene.createDefaultCamera is not a function"}],"ecosystem":"npm"}