Babylon.js 入门简介和开发实例

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元素。

<canvas id="show" touch-action="none"></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 代码：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css//index.css">
  <!-- 引入Babylonjs -->
  <script src="https://cdn.babylonjs.com/babylon.js"></script>
  <!-- 允许将模型导入场景 -->
  <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> 
  <!-- 允许使用触摸屏 -->
  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
  <title>Demo</title>
</head>
<style>
  html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #show {
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <!--必须是canvas元素-->
  <canvas id="show" touch-action="none"></canvas>
</body>
<script>
  var canvas = document.getElementById("show");  // 创建画布
  var engine = new BABYLON.Engine(canvas, true);  // 创建渲染引擎

  var create_scene = function () {
    // 创建一个场景并返回
    var scene = new BABYLON.Scene(engine);     // 创建场景
    /* 创建一个弧形旋转摄像机. 参数说明如下:
     * "Camera":  摄像机名称
     * 第一个 Math.PI / 2 : alpha, 可以理解为水平角度.具体请看文档 
     * 第二个 Math.PI / 2 : beta, 可以理解为垂直角度.具体请看文档 
     * 2: radius, 这个是半径的意思.
     * new BABYLON.Vector3(0, 0, 5) : target position.目标点的三维位置,可以理解为中心.这是一个向量类的实例
     * scene: scene,场景变量.
     * 详细文档请看这里: 看着图比较好理解的.https://doc.babylonjs.com/babylon101/cameras#arc-rotate-camera
    */
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0, 0, 5), scene);
    /* 让摄像机控制画布.
     * canvas: element 是一个dom对象.
     * true: noPreventDefault 是否阻止元素的默认事件.
     * api: https://doc.babylonjs.com/api/classes/babylon.targetcamera
    */
    camera.attachControl(canvas, true);
    /* 创建2个光源. HemisphericLight是半球形光源.PointLight是点光源.
     * 第一个参数: name. 名字.
     * 第二个参数: direction, 方向,是一个向量的实例.
     * 第三个参数: scene, 场景.
     * api: https://doc.babylonjs.com/api/classes/babylon.hemisphericlight#constructor
    */
    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);
    /* 创建一个球形的控制网格. options参数,请看api
     * 第一个参数 name: 字符串, 名字
     * 第二个参数 options: object, 参数对象.
     * 第三个参数 scene: 场景
     * api: https://doc.babylonjs.com/api/classes/babylon.meshbuilder#createsphere
    */
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
    return scene;
  };

  var scene = create_scene();
  /* 不停的渲染场景.
   * runRenderLoop 是一个渲染循环.
   * api: https://doc.babylonjs.com/api/classes/babylon.engine#runrenderloop
  */
  engine.runRenderLoop(function () {
    scene.render();  // 渲染场景
  });

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

</script>

</html>

相关阅读:
王歆瑶20191128-1 总结
 王歆瑶 20191121-1 每周例行报告
 王歆瑶20191114-1 每周例行报告
 王歆瑶20191107-1 每周例行报告
 王歆瑶20191031-1 每周例行报告
 王歆瑶20191024-1 每周例行报告
 王歆瑶20191017-1 每周例行报告
 王歆瑶20191010-2 每周例行报告
 王歆瑶20190919-4 单元测试，结对
 LeetCode 11 盛水最多的容器
原文地址：https://www.cnblogs.com/yuwenxiang/p/14345373.html