Babylon.js入門簡介和開發實例

Babylon.js是一款WebGL開發框架。和Three.js類似。主要的技術區別是Three.js還試圖回退兼容CSS 3D。

Three.js是完全社區推動的，比Babylon.js要成熟些，而Babylon.js是微軟推動的，和微軟的相關技術結合更好。

本文對Babylon.js的使用做個簡單的介紹。首先的首先，請確保你的瀏覽器支持WebGL(IE11+/Edge/Firefox 4+/Google Chrome 9+/ Opera 15+/Safari...)。

如何你使用sublime等桌面工具開發，那麼首先你得下載最新版本的BabylonJS，創建一個項目，文件如下:

yourProject
    |- index.html
    |- babylon.2.3.js

在本文中，我們簡化下，直接使用在線開發工具：http://wow.techbrood.com/fiddle/new

只要有瀏覽器即可，無需下載或安裝任何軟件。

在其中的HTML面板()中編寫如下代碼：

<script src="http://cdn.babylonjs.com/2-3/babylon.js"></script>
<canvas id="renderCanvas"></canvas>

WebGL需要藉助HTML5的canvas元素來作爲3D渲染的容器。所以上面的代碼我們在文檔中插入了一個id爲renderCanvas的canvas元素。接着我們在CSS面板()中編寫如下樣式代碼，讓canvas元素佔滿預覽渲染窗口（右下角的窗口）：

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

#renderCanvas {
        width   : 100%;
        height  : 100%;
        touch-action: none;
}

接着我們在JavaScript面板（）中編寫JS腳本：

window.addEventListener('DOMContentLoaded', function() {
        // 我們的渲染代碼
});

上面的代碼使得我們的繪製腳本確保會在文檔加載完成後被執行。

我們接下來完成一個基本場景、基本3D網孔模型的創建。首先我們獲得canvas元素：

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

然後，使用該canvas元素創建babylon渲染引擎:

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

接着，我們來創建3D場景，包含相機、光源和兩個基本的網孔模型（一個球體和一個平面）：

var createScene = function() {
    // 創建一個基本的Scene對象，用來容納所有其他對象
    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());

    // 使得我們可以控制相機拍攝角度，和three.js中的OrbitsControl效果類似，但簡單得多
    camera.attachControl(canvas, false);

    // 創建一個半球形光源,朝向爲天空
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

    // 創建一個內置的“球”體；其構造函數的參數：名稱、寬度、深度、精度，場景，其中精度表示表面細分數。
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

    // 設置球體位置，使其位於平面之上
    sphere.position.y = 1;

    // 創建一個內置的“地面”形狀；其構造函數的5個參數和球體一樣
    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

    return scene;
}
var scene = createScene();

接下來，我們需要在canvas中渲染這個場景（注意渲染是一個定時循環）：

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

這樣一個簡單而完整的WebGL應用就開發好了！點擊[運行]菜單或者按住CTRL+R快捷鍵，預覽窗口將呈現如下的結果:

我們還可以給3D模型添加材料，比如給地面添加材料，代碼類似如下：

var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.3, 0.1);

var ground = BABYLON.Mesh.CreateGround("ground", 10, 10, 2, scene);
ground.material = groundMaterial;
ground.receiveShadows = true;

最終的作品如下圖所示，點擊圖片可以鏈接到在線演示：

by iefreer