Babylon.js是一款WebGL开发框架，和Three.js类似。 Three.js是由社区推动的，比Babylon.js要成熟些，而Babylon.js是微软推动的，和微软的相关技术结合更好。

本文对Babylon.js的使用做个简单的介绍。请先确保你的浏览器支持WebGL(IE11+/Edge/Firefox 4+/Google Chrome 9+/ Opera 15+/Safari…)。

明确一个基本的概念：无论是要创建一整个世界，还是只是将一个模型放到网页中，都需要一个场景来包含该世界或模型，一台用于查看该世界或模型的摄像头，一盏照明它的照明灯，以及至少一个可视对象作为模型。

首先WebGL需要借助HTML5的canvas元素来作为3D渲染的容器，所以我们需要在代码中插入一个canvas元素。

接着我们在CSS面板中编写如下样式代码，让canvas元素占满窗口。

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

#show {
width: 100%;
height: 100%;
}

然后，使用该canvas元素创建babylon渲染引擎。

var canvas = document.getElementById("show");
var engine = new BABYLON.Engine(canvas, true);

接着，我们来创建3D场景，包含相机、光源和基本的网孔模型（一个球体）。

var create_scene = function () {
/* 创建一个场景 */
var scene = new BABYLON.Scene(engine);
/* 创建一个弧形旋转摄像机 */
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0, 0, 5), scene);
/* 让摄像机控制画布 */
camera.attachControl(canvas, true);
/* 创建2个光源：HemisphericLight是半球形光源，PointLight是点光源 */
var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
/* 创建一个球形的控制网格 */
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
/* 返回场景 */
return scene;
};

var scene = create_scene();

最后，在canvas中渲染这个场景（注意渲染是一个定时循环）。

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

这样一个简单而完整的WebGL应用就开发好了！

下面是完整 demo 代码：