Babylon.js 的Hello World

最近准备使用业余时间做一款游戏玩玩，为了专注前端三十年称号，所以，准备研究一下浏览器端免费开源的WebGL游戏引擎Babylon.js。首先，查看一下官网的案例：
在这里插入图片描述
案例可以看到案例当中有一个球和一个平面。这个案例也是相对很简单的。
接下来看一下源码实现：
在页面当中，首先设置一下css样式和canvas标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>
<script src="js/babylon.custom.js"></script>
<script src="js/index.js"></script>
</html>

引入的babylon.js文件可以去官网下载，选择相应的组件：
在这里插入图片描述
如果不知道怎么设置什么组件的话，那先把组件全部选中即可。然后将下载出来的代码引入到页面，然后将创建一个js文件内写入：

window.addEventListener('DOMContentLoaded', function () {
    // 获取到canvas的dom对象
    var canvas = document.getElementById('renderCanvas');

    // 实例化3d引擎
    var engine = new BABYLON.Engine(canvas, true);

    // 创建场景并返回场景对象
    var createScene = function () {
        // 创建场景对象
        var scene = new BABYLON.Scene(engine);

        // 创建FreeCamera, 并把相机位置设置到(x:0, y:5, z:-10)
        var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);

        // 将相机朝向设置到原点
        camera.setTarget(BABYLON.Vector3.Zero());

        // 相机事件绑定到canvas对象上面
        camera.attachControl(canvas, false);

        // 创建一个平衡光，将灯光位置设置到0 1 0
        var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);

        // 创建一个球题 支持六个配置项 名称, 分割段数, 直径, 放置的场景, updatable, sideOrientation
        var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

        // 将球上调到原点以上
        sphere.position.y = 1;

        // 创建地面
        var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

        // 返回场景
        return scene;
    };

    // 获取到创建的场景
    var scene = createScene();

    // 循环渲染，性能最大没秒六十帧
    engine.runRenderLoop(function () {
        scene.render();
    });

    // 浏览器大小变动时，触发引擎的重载状态
    window.addEventListener('resize', function () {
        engine.resize();
    });
});

具体代码都带有注释。这样就实现了当前hello world的效果。

Babylon.js 的Hello World

猜你喜欢