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. ptorch常用代码梯度篇（梯度裁剪、梯度累积、冻结预训练层等）

    梯度裁剪(Gradient Clipping) 在训练比较深或者循环神经网络模型的过程中,我们有可能发生梯度爆炸的情况,这样会导致我们模型训练无法收敛. 我们可以采取一个简单的策略来避免梯度的爆炸,那 ...

  2. Navicat 连接 MySQL

    目录 简述 新建连接 常见错误 简述 Navicat 是一套快速.可靠和全面的数据库管理工具,专门用于简化数据库管理和降低管理成本.Navicat 图形界面直观,提供简便的管理方法,设计和操作 MyS ...

  3. AR Engine运动跟踪能力，高精度实现沉浸式AR体验

    随着电子产品的普遍应用,AR技术也开始广泛普及,在游戏.电商.家装等领域都有涉及.比如,在室内设计时,我们可以通过AR技术在实际场景中进行虚拟软装的搭配,运用华为AR Engine运动跟踪能力在实际应 ...

  4. VSCode进一步深入了解学习

    紧接上一章节趁热打铁吧,未关注博主的记得关注哦! VSCode设置 (1)关闭预览模式 我们在 VScode 上打开一个新文件的话会覆盖掉以前的文件,这是因为 VSCode 默认开启了预览模式,预览模 ...

  5. ExtJS 布局-VBox布局（VBox layout）

    更新记录: 2022年6月11日 优化文章结构. 2022年6月9日 发布. 2022年6月1日 开始. 1.说明 vbox布局类似auto布局,将子组件一个接一个垂直向下放置,既可以在水平方向也可以 ...

  6. re学习笔记

    re学习笔记 学习链接: https://regexlearn.com/zh-cn/learn \w: 数字字母下划线 \W: 非\w \d \D: !\d \s: space cha \S: !\s ...

  7. BUUCTF-数据包中的线索

    数据包中的线索 下载看是个流量包,用wireshark打开 有个fenxi.php,里面是个base64编码,尝试解码发现编码不对,那应该就是base64转图片 得到flag

  8. Map集合中的同一键值key重复赋值

    前言: 验证:对Map集合中的同一键值key重复赋值? 结果:对Map集合中的同一键值key重复赋值会覆盖之前的结果. 验证如下: Map<String, Object> map = ne ...

  9. IDEA项目启动乱码小方块

    在看完执行了网上各种文章之后,我发现没有一个适合我的. 最终,终于,在朋友的远程帮助下解决了. 如果你还有这个问题的话,可以试一下这个: 右键项目,打开终端,执行下面这个命令(手动指定一下maven ...

  10. Web开发小妙招：巧用ThreadLocal规避层层传值

    摘要:我们可以在处理每次请求的过程中,无需从Controller以及Service中的方法层层传值,只需要直接通过该局部变量取值即可. 本文分享自华为云社区<拦截器中巧用ThreadLocal规 ...