Babylon.js README

The project's README from github.com/BabylonJS/Babylon.js. As one markdown file: README.md.

Babylon.js

Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it.

npm version Build Status Average time to resolve an issue Percentage of issues still open Build size Twitter Discourse users

Any questions? Here is our official forum.

CDN

⚠️ WARNING: The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN.

For the preview release, use the following URLs:

A list of additional references can be found here.

npm

BabylonJS and its modules are published on npm with full typing support. To install, use:

npm install babylonjs --save

alternatively, you can now rely on our ES6 packages. Using the ES6 version will allow tree shaking among other bundling benefits.

This will allow you to import BabylonJS entirely using:

import * as BABYLON from 'babylonjs';

or individual classes using:

import { Scene, Engine } from 'babylonjs';

If using TypeScript, don't forget to add 'babylonjs' to 'types' in tsconfig.json:

    ...
    "types": [
        "babylonjs",
        "anotherAwesomeDependency"
    ],
    ...

To add a module, install the respective package. A list of extra packages and their installation instructions can be found on the babylonjs user on npm.

Usage

See Getting Started:

// Get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// CreateScene function that creates and return the scene
var createScene = function(){
    // Create a basic BJS Scene object
    var scene = new BABYLON.Scene(engine);
    // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    // Target the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // Attach the camera to the canvas
    camera.attachControl(canvas, false);
    // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // Create a built-in "sphere" shape using the SphereBuilder
    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', {segments: 16, diameter: 2, sideOrientation: BABYLON.Mesh.FRONTSIDE}, scene);
    // Move the sphere upward 1/2 of its height
    sphere.position.y = 1;
    // Create a built-in "ground" shape;
    var ground = BABYLON.MeshBuilder.CreateGround("ground1", { width: 6, height: 6, subdivisions: 2, updatable: false }, scene);
    // Return the created scene
    return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
    scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
    engine.resize();
});

Contributing

If you want to contribute, please read our contribution guidelines first.

Documentation

Features

To get a complete list of supported features, please visit our website.

Babylon.js (BabylonJS/Babylon.js)

Searching Database…

26.2K ·GitHub
Babylon.js
这是什么？Babylon.js 是一个开源的 3D 游戏和渲染引擎，封装成一个易用的 JavaScript 框架：你用 TypeScript 或 JavaScript 搭建场景，然后在浏览器里渲染出来。
它是引入到我代码里的框架，还是一个独立的软件？它是一个代码库和框架：你从 npm 安装包，再把引擎导入到你的 JavaScript 或 TypeScript 项目里。它提供支持 tree shaking 的 ES6 包，你既可以全部导入，也可以只导入需要的类。
我怎么把它加进项目里？安装 npm 上 babylonjs 用户发布的那些包，然后在代码里导入。如果用 TypeScript，需要在 tsconfig.json 的 'types' 里加上 'babylonjs'；只是想随便玩玩的话，可以直接用在线 playground。
我的电脑上需要装什么才能运行它？只需要一个现代浏览器——所有渲染都在浏览器端完成，不需要服务器或后端。只有构建引擎自身的源码才需要固定的工具链：Node 20.19+/22.13+/24 和 npm 11.18+。
在生产环境里通过 CDN 加载它安全吗？不安全——README 明确警告 CDN 只用于学习和小型实验。做正式应用时，你应该用自己的 CDN 来提供这些包，或者自己打包 ES6 包。
它在哪里运行——只能在浏览器里，还是也有原生应用？它基于浏览器：渲染通过 WebGL、WebGL2 或 WebGPU 完成，头戴设备用 WebXR/WebVR，声音用 WebAudio。只要能运行现代浏览器的地方它就能跑；官方不提供原生版本。
不安装任何东西能不能先试试？可以。在线 playground 有大量示例帮你学习 API；在线 sandbox 支持简单拖放来测试你的 .babylon 和 glTF 场景；还有一个在线工具可以帮你创建 GLSL 着色器。
我能导入 Blender、3ds Max 或 Maya 做的模型吗？可以——有专门的导出插件可以从 3DS Max、Maya 和 Blender 生成 .babylon 文件。也有一个 Unity 5 导出器，但已经废弃不再维护；glTF 工作流则由 KhronosGroup 的 glTF 工具覆盖。
What are similar projects?engine, three.js, tidewater, aframe, flutter_scene, LinearAbilityExtThreeJS, phaser, bgfx
Which topics is it in?webaudio, webgl2, webgpu, shaders, game-engine, webgl, rendering, game-development, game, 3d, real-time, browser
Creator
BabylonJS
Size
1.4 GB
Stars
26.2K
Updated
CommitOct 16Release9.30.0Oct 08
Age
13y
Commits · 90 Days