功能强大,美观,简单,开放,基于Web的3D最佳

易于尝试和设置

了解如何使用引擎的最快方法是前往第一步. 。对于您自己的HTML项目,您的计算机上不需要安装任何内容,客户端无需安装任何程序即可运行您的程序。看下面的 入门教程 是多么简单。查看 索引功能部分 以查看可用的内容。建立你的第一个场景并按照 巴伦比 101课程 开发它 然后继续找出 如何做更多。 一个概述的文件是在页面的底部。

WebGL

Web图形库或WebGL是一种JavaScript API,旨在在任何兼容的Web浏览器中呈现交互式3D计算机图形和2D图形,而无需使用任何插件。

使用Javascript

JavaScript也称为ECMAScript,是一种动态的,基于原型的脚本语言,具有一流的功能。 广泛用于客户端(有时甚至是服务器端,就像在这个网站上一样!),Javascript是BabylonJS所基于的语言。

文档概述

入门

首先,通过访问 WebGL.org or 检查以确保您的浏览器与WebGL兼容, 或者 。Internet Explorer 11 +,Firefox 4 +,Google Chrome 9+和Opera 15+等浏览器支持WebGL。

下面的示例项目通过 使用最新版本的BabylonJS CDN,因此您无需在本地下载BabylonJS即可使用它。

但是,您需要从 https://preview.babylonjs.com.cn/babylon.d.ts 下载BabylonJS TypeScript定义文件 才能编译项目。将此 babylon.d.ts文件保存 到项目文件夹中并创建一个空的,index.html 如下所示:

现在创建一个包含空 index.html文件的项目文件夹, 如下所示:

yourAwesomeProject
    |- index.htmlyourAwesomeProject
    |- index.html
    |- babylon.d.ts
    

我们只会在 index.html 文件中编码,以使其尽可能简洁明了。HTML文档的开头如下:

HTML文档开头如 下(如果您更喜欢使用npm / webpack,请参阅https://doc.babylonjs.com/features/npm_support): <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- Link to the last version of BabylonJS --> <script src="https://preview.babylonjs.com/babylon.js"></script> <!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf --> <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> <!-- Link to pep.js to ensure pointer events work consistently in all browsers --> <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> </body> </html>

如您所见,我们插入了 <body> 一个<canvas> 元素。这个 <canvas> 元素将是我们显示3D渲染结果的地方。在以下位置插入一些样式 <head>:

<style>
    html, body {
        overflow: hidden;
        width   : 100%;
        height  : 100%;
        margin  : 0;
        padding : 0;
    }

    #renderCanvas {
        width   : 100%;
        height  : 100%;
        touch-action: none;
    }
</style>

现在有一些javascript代码来运行我们的项目。首先,插入 <body>的末尾:

<script>
    window.addEventListener('DOMContentLoaded', function() {
        // All the following code is entered here.
    });
</script>

如您所见,我们将javascript代码包装在 DOMContentLoaded 事件处理程序以确保在执行任何其他操作之前已加载整个DOM 。我们在这一点之后编写的代码将放在这个包装器中。

该项目实现了每个 BabylonJS 程序的基础知识, 一个场景和两个形状, 一个球体和一个地平面。 我们将逐步完成它。

第一步是从HTML文档中获取canvas元素的引用:

var canvas = document.getElementById('renderCanvas');

然后,加载 Babylon 3D 引擎:

var engine = new BABYLON.Engine(canvas, true);

现在我们的场景, 需要相机和灯光以及形状。要生成场景,请使用 createScene() function.

 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('camera', 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. 
    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {segments:16, diameter:2}, 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', {height:6, width:6, subdivisions: 2}, scene);

    // Return the created scene.
    return scene;
}

既然我们的 createScene() 功能准备就绪,我们需要调用它:

 
 var scene = createScene();
 
 

接下来的三个javascript行非常重因为它们注册了一个渲染循环来重复渲染画布上的场景:

 engine.runRenderLoop(function() {
    scene.render();
});

最后,您应该实现一个canvas/window resize 事件处理程序,如下所示:

window.addEventListener('resize', function() {
    engine.resize();
});

我们现在将添加必要的TypeScript代码来运行我们的演示。 首先,创建一个新的文件 game.ts t引用BabylonJS打字稿定义文件在项目文件夹,然后创建一个新的 Game 类与 constructor 和两个方法, createScenedoRender 。然后添加一个 Event Listener for DOMContentLoaded 为其实例化 Game, 创建场景并启动渲染循环:

///<reference path="babylon.d.ts" />

class Game {
  constructor(canvasElement : string) {
  }

  createScene() : void {
  }

  doRender() : void {
  }
}

window.addEventListener('DOMContentLoaded', () => {
  // Create the game using the 'renderCanvas'.
  let game = new Game('renderCanvas');

  // Create the scene.
  game.createScene();

  // Start render loop.
  game.doRender();
});

接下来,添加我们游戏所需的实例变量。这些都是私有的,因此,遵循 BabylonJS 编码指南 ,它们每个都以下划线为前缀:

class Game {
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.FreeCamera;
    private _light: BABYLON.Light;

    ...
}

现在实现了 constructor . 它传递了canvas元素的名称,构造函数没有返回值。代码使用 canvasElement 参数创建画布,然后创建引擎:

constructor(canvasElement : string) {
    // Create canvas and engine.
    this._canvas = document.getElementById(canvasElement) as HTMLCanvasElement;
    this._engine = new BABYLON.Engine(this._canvas, true);
}

然后实现createScene ,它不带任何参数并且不返回任何内容,因此它的类型是 void 代码注释详细说明了它的动作。

createScene() : void {
    // Create a basic BJS Scene object.
    this._scene = new BABYLON.Scene(this._engine);

    // Create a FreeCamera, and set its position to (x:0, y:5, z:-10).
    this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene);

    // Target the camera to scene origin.
    this._camera.setTarget(BABYLON.Vector3.Zero());

    // Attach the camera to the canvas.
    this._camera.attachControl(this._canvas, false);

    // Create a basic light, aiming 0,1,0 - meaning, to the sky.
    this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);

    // Create a built-in "sphere" shape; with 16 segments and diameter of 2.
    let sphere = BABYLON.MeshBuilder.CreateSphere('sphere',
                                {segments: 16, diameter: 2}, this._scene);

    // Move the sphere upward 1/2 of its height.
    sphere.position.y = 1;

    // Create a built-in "ground" shape.
    let ground = BABYLON.MeshBuilder.CreateGround('ground',
                                {width: 6, height: 6, subdivisions: 2}, this._scene);
}

现在实现 doRender ,它也没有参数,也没有返回任何内容。此例程启动渲染循环并添加resize事件侦听器:

doRender() : void {
    // Run the render loop.
    this._engine.runRenderLoop(() => {
        this._scene.render();
    });

    // The canvas/window resize event handler.
    window.addEventListener('resize', () => {
        this._engine.resize();
    });
}

最后,保存 game.ts 文件并将对 game.js, 生成的引用添加 game.ts 到index.html:

<!DOCTYPE html>
<html>
<head>
    <script src="game.js"></script>
</head>
</html>

您的Awesome Project目录现在应该包含:

yourAwesomeProject
    |- index.html
    |- game.ts
    |- babylon.d.ts

现在编译 game.ts 将输出game.js:

    tsc game.ts babylon.d.ts
    

您现在应该 game.js 在Your Awesome Project目录中看到:

yourAwesomeProject
    |- index.html
    |- game.js
    |- game.ts
    |- babylon.d.ts
    

就是这样!保存文件并index.html 使用您喜欢的Web浏览器打开。你应该看到以下内容:

您可以点击上面的图片观看BabylonJS游乐场的现场演示。

如果您对此演示有任何问题,请随意将以下代码复制粘贴到您的 index.html文件中: file:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!--- Link to the last version of BabylonJS --->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        window.addEventListener('DOMContentLoaded', function(){
            // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, 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; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;

                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, 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();
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!--- link to the last version of babylon --->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="game.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

然后,随意将以下代码复制粘贴到您的 game.ts文件中:

///<reference path="babylon.d.ts" />

class Game {
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.FreeCamera;
    private _light: BABYLON.Light;

    constructor(canvasElement : string) {
        // Create canvas and engine.
        this._canvas = document.getElementById(canvasElement) as HTMLCanvasElement;
        this._engine = new BABYLON.Engine(this._canvas, true);
    }

    createScene() : void {
        // Create a basic BJS Scene object.
        this._scene = new BABYLON.Scene(this._engine);

        // Create a FreeCamera, and set its position to (x:0, y:5, z:-10).
        this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene);

        // Target the camera to scene origin.
        this._camera.setTarget(BABYLON.Vector3.Zero());

        // Attach the camera to the canvas.
        this._camera.attachControl(this._canvas, false);

        // Create a basic light, aiming 0,1,0 - meaning, to the sky.
        this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);

        // Create a built-in "sphere" shape; with 16 segments and diameter of 2.
        let sphere = BABYLON.MeshBuilder.CreateSphere('sphere1',
                                {segments: 16, diameter: 2}, this._scene);

        // Move the sphere upward 1/2 of its height.
        sphere.position.y = 1;

        // Create a built-in "ground" shape.
        let ground = BABYLON.MeshBuilder.CreateGround('ground1',
                                {width: 6, height: 6, subdivisions: 2}, this._scene);
    }

    doRender() : void {
        // Run the render loop.
        this._engine.runRenderLoop(() => {
            this._scene.render();
        });

        // The canvas/window resize event handler.
        window.addEventListener('resize', () => {
            this._engine.resize();
        });
    }
}

window.addEventListener('DOMContentLoaded', () => {
    // Create the game using the 'renderCanvas'.
    let game = new Game('renderCanvas');

    // Create the scene.
    game.createScene();

    // Start render loop.
    game.doRender();
});