Babylon.js：一个开源的游戏和渲染引擎

概述

Babylon.js 是一个强大、美观、简单且开放的游戏和渲染引擎，封装在一个JavaScript 框架中。

[hidecontent type="logged" desc="隐藏内容：登录后可查看"]

Babylon.js

入门？使用我们的playground直接使用 Babylon.js API 。它还包含大量示例以学习如何使用它。

内容分发网络

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

可以在此处找到附加参考列表。

npm

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

npm install babylonjs --save

或者，您现在可以依赖我们的ES6 包。使用 ES6 版本将允许 tree shaking 以及其他捆绑好处。

这将允许您完全使用以下方式导入 BabylonJS：

import * as BABYLON from 'babylonjs';

或个别课程使用：

import { Scene, Engine } from 'babylonjs';

如果使用 TypeScript，请不要忘记将“babylonjs”添加到“类型”中tsconfig.json：

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

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

官方网站

www.babylonjs.com

用法

请参阅入门：

// 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();
});

[/hidecontent]