Babylon.js

想要入门吗？直接在我们的playground中体验Babylon.js API。里面还有很多示例供您学习如何使用它。

构建大小论坛用户

**有任何问题吗？**这是我们的官方论坛。

CDN

⚠️ 警告：CDN不应该在生产环境中使用。我们CDN的目的是为学习如何使用平台或运行小实验的用户提供Babylon包。一旦您构建了应用程序并准备与广大用户分享，您应该从自己的CDN提供所有包。

对于预览版本，请使用以下URL：

可以在这里找到其他参考资料的列表。

npm

BabylonJS及其模块已在npm上发布，并提供完整的类型支持。要安装，请使用：

npm install babylonjs --save

或者，您现在可以依赖我们的ES6包。使用ES6版本可以实现树摇（tree shaking）等打包优势。

这将允许您完全导入BabylonJS：

import * as BABYLON from 'babylonjs';

或导入单个类：

import { Scene, Engine } from 'babylonjs';

如果使用TypeScript，别忘了在tsconfig.json中将'babylonjs'添加到'types'中：

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

要添加模块，请安装相应的包。可以在npm上的babylonjs用户页面找到额外包的列表及其安装说明。

使用

参见入门指南：

// 获取canvas DOM元素
var canvas = document.getElementById('renderCanvas');
// 加载3D引擎
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// 创建并返回场景的createScene函数
var createScene = function(){
    // 创建基本的BJS场景对象
    var scene = new BABYLON.Scene(engine);
    // 创建一个自由相机，并将其位置设置为{x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    // 将相机对准场景原点
    camera.setTarget(BABYLON.Vector3.Zero());
    // 将相机附加到画布
    camera.attachControl(canvas, false);
    // 创建一个基本的光源，朝向0, 1, 0 - 即朝向天空
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // 使用SphereBuilder创建一个内置的"球体"形状
    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', {segments: 16, diameter: 2, sideOrientation: BABYLON.Mesh.FRONTSIDE}, scene);
    // 将球体向上移动其高度的1/2
    sphere.position.y = 1;
    // 创建一个内置的"地面"形状
    var ground = BABYLON.MeshBuilder.CreateGround("ground1", { width: 6, height: 6, subdivisions: 2, updatable: false }, scene);
    // 返回创建的场景
    return scene;
}
// 调用createScene函数
var scene = createScene();
// 运行渲染循环
engine.runRenderLoop(function(){
    scene.render();
});
// canvas/窗口调整大小事件处理程序
window.addEventListener('resize', function(){
    engine.resize();
});