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>

Babylon.js 入门简介和开发实例的更多相关文章

  1. Jboss ESB简介及开发实例

    一.Jboss ESB的简介 1. 什么是ESB.         ESB的全称是Enterprise Service Bus,即企业服务总线.ESB是过去消息中间件的发展,ESB采用了“总线”这样一 ...

  2. 网页3D引擎“Babylon.JS”入门教程翻译总结

    使用三个月的业余时间把官方教程的入门部分译为中文并上传到github,在下一步编程前做一个总结. 历程: 最早接触游戏编程是在大三下学期,用汇编语言和实验室里的单片机.触摸屏.电机(提供声效)编的打地 ...

  3. Node.js 入门简介

    Node.js简介 1.1 简介 V8引擎本身就是用于Chrome浏览器的JS解释部分,但是Ryan Dahl鬼才般的把这个V8搬到了服务器上,用于做服务器的软件. Node.js是一个专注于实现高性 ...

  4. Web Service简介与开发实例

    简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的 ...

  5. JS入门系列(2)-原型-实例属性

    下面的例子中,在构造器内部定义了like,然后再原型上也定义了like.通过下面的测试表明: 在构造器内部创建的实例方法会阻挡原型上定义的同名方法 初始化操作的优先级如下: 首先,通过原型给对象实例添 ...

  6. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  7. 以太坊智能合约开发，Web3.js API 中文文档 ethereum web3.js入门说明

    以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...

  8. App开发Native.js入门指南

    概述 Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展 ...

  9. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

随机推荐

  1. SpringSecurity的 loginProcessingUrl为什么不能用

    前情提要: 我在做一个springsecurity动态鉴权的项目时, 据网上说配置了 loginProcessingUrl("/login1"); 以后 就可以自定义login的请 ...

  2. python基础学习6

    Python的基础学习6 内容概要 while + else 死循环.while的嵌套 for循环基本使用 range关键字 for循环补充.爬虫 基本数据类型及内置方法 内容详情 while + e ...

  3. BUUCTF-文件中的秘密

    文件中的秘密 下载图片属性查看即可发现flag.这算是图片必须查看的几个地方.

  4. 【故障公告】取代 memcached 的 redis 出现问题造成网站故障

    6月19日开始,我们将博客站点的缓存服务器从 memcached 换成了 redis,稳定运行了3天,今天上午访问高峰突然出现问题,在 11:00-12:30 期间影响了网站的正常访问,由此给您带来麻 ...

  5. 几种常见的DoS攻击

    DoS为Denial of Service的简称,意思是拒绝服务.DoS攻击是一种使被攻击者无法正常提供服务的攻击.常见的攻击方式有以下几种类型:   LAND Local Area Network ...

  6. sap 获取设置的打印机参数

    *&---------------------------------------------------------------------* *& Form FRM_SET_PRI ...

  7. RPA应用场景-日终清算操作

    场景概述 日终清算操作 所涉系统名称 登记过户管理系统(TA),投资交易系统(032) 人工操作(时间/次) 60-80分钟 所涉人工数量 2 操作频率 每日 场景流程 这两个流程一般在晚上8-9点开 ...

  8. sql-DQL-多表联查

    多表查询 笛卡尔积 左表的每条数据和右表的每条数据组合,这种效果称为笛卡尔乘积 select * from emp, dept; 笛卡尔积引入了很多无用的数据,要完成多表查询,需要设置过滤条件来消除无 ...

  9. 给你准备好了——50道Python面试题集锦（附答案）

    Python是目前编程领域最受欢迎的语言.在本文中,我将总结Python面试中最常见的50个问题.每道题都提供参考答案,希望能够帮助你在2019年求职面试中脱颖而出,找到一份高薪工作.这些面试题涉及P ...

  10. 从区划边界geojson中查询经纬度坐标对应的省市区县乡镇名称，开源Java工具，内存占用低、高性能

    目录 坐标边界查询工具:AreaCity-Query-Geometry 性能测试数据 测试一:Init_StoreInWkbsFile 内存占用很低(性能受IO限制) 测试二:Init_StoreIn ...