Babylon.js – 起步


相关网站

Babylon.js 官方网站
Babylon.js 中文网
Babylon.js Github地址

CDN

  • https://cdn.babylonjs.com/babylon.js
  • https://cdn.babylonjs.com/babylon.max.js

可以在https://cdn.babylonjs.com/xxx上找到其他参考，其中xxx是可以在/dist文件夹中找到的文件夹结构，如下所示：

  • https://cdn.babylonjs.com/gui/babylon.gui.min.js

对于预览版本，可以使用以下URL链接：

  • https://preview.babylonjs.com/babylon.js
  • https://preview.babylonjs.com/babylon.max.js

其他参考资料可在https://preview.babylonjs.com/xxx上找到，其中xxx是可以在/dist/预览版文件夹（如https://preview.babylonjs.com/gui/babylon.gui.min.js）中找到的文件夹结构

1
2
3
<!--- 使用cdn提供的url链接 --->
<!--- Link to the last version of BabylonJS --->
<script src="//i2.wp.com/cdn.babylonjs.com/babylon.js"></script>

npm

使用npm来为项目安装BabylonJS：

1
npm install babylonjs --save

使用以下命令导入BabylonJS：

1
import * as BABYLON from 'babylonjs';

或加载特定的类：

1
import { Scene, Engine } from 'babylonjs';

在这里插入图片描述

Start

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

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

然后，加载 Babylon 3D 引擎：

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

创建名为 createScene 的 function，并返回 scene ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var createScene = function(){
    // Create a basic BJS Scene object.
    var scene = new BABYLON.Scene(engine);
   
    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);
   
    ...
   
    // Return the created scene.
    return scene;
}

注意: 其中的 camera 是必须的。

接下来渲染场景：

1
2
3
4
5
6
7
// 调用createScene
var scene = createScene();

// 注册一个渲染循环来重复渲染画布上的场景：
engine.runRenderLoop(function () {
    scene.render();
});

以上便创建了一个最基本的BabylonJS场景，不过场景中还未添加任何物体，之后的文章中再来介绍如何添加物体。

在这里插入图片描述

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon - Getting Started</title>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
       
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
       
    <!--- Link to the last version of BabylonJS --->
    <script src="//i2.wp.com/cdn.babylonjs.com/babylon.js"></script>

</head>

<body>

    <canvas id="renderCanvas"></canvas>

    <script>

        window.addEventListener('DOMContentLoaded', function () {

            var canvas = document.getElementById('renderCanvas');
       
            var engine = new BABYLON.Engine(canvas, true);
           
            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);
       
                // Return the created scene.
                return scene;
       
            }
       
            // 调用createScene
            var scene = createScene();
       
            // 注册一个渲染循环来重复渲染画布上的场景：
            engine.runRenderLoop(function () {
                scene.render();
            });
       
            // 最后，您应该实现一个canvas/window resize 事件处理程序，如下所示：
            window.addEventListener('resize', function () {
                engine.resize();
            });
       
        });

    </script>
</body>

</html>