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. Border性质习题与证明

    KMP 第一次接触 \(border\) 都是先从 KMP 开始的吧. 思想在于先对于一个串自匹配以求出 fail 指针(也就是 border) 然后就可以在匹配其他串的时候非常自然的失配转移.在此顺 ...

  2. CCPC、Petrozavodsk Camp、OpenCup 题解汇总

    省赛 \([\text{2021.11.30}]\) 2021 Jilin Collegiate Programming Contest 全部完成. \([\text{2021.12.25}]\) 2 ...

  3. dubbo的消费者是怎么获取提供者服务接口引用的？

    本文主要解读dubbo消费者是如何引用服务端接口的,是如何像本地调用一样调用远程服务的. 并试着从设计者的角度思考,为何这样设计. @Component public class DubboConsu ...

  4. springboot2.7.x 集成log4j2配置写入日志到mysql自定义表格

    在阅读之前请先查看[springboot集成log4j2] 本文暂不考虑抽象等实现方式,只限于展示如何自定义配置log4j2并写入mysql数据库(自定义结构) 先看下log4j2的配置 <?x ...

  5. 【机器学习】数据准备--python爬虫

    前言 我们在学习机器学习相关内容时,一般是不需要我们自己去爬取数据的,因为很多的算法学习很友好的帮助我们打包好了相关数据,但是这并不代表我们不需要进行学习和了解相关知识.在这里我们了解三种数据的爬取: ...

  6. 基于JavaFX图形界面演示的迷宫创建与路径寻找

    事情的起因是收到了一位网友的请求,他的java课设需要设计实现迷宫相关的程序--如标题概括. 我这边不方便透露相关信息,就只把任务要求写出来. 演示视频指路: 视频过审后就更新链接 完整代码链接: 网 ...

  7. 如何通过WinDbg获取方法参数值

    引入 我们在调试的过程中,经常会通过查看方法的输入与输出来确定这个方法是否异常.那么我们要怎么通过 WinDbg 来获取方法的参数值呢? WinDbg 中主要包含三种命令:标准命令.元命令(以 . 开 ...

  8. NC24724 [USACO 2010 Feb S]Chocolate Eating

    NC24724 [USACO 2010 Feb S]Chocolate Eating 题目 题目描述 Bessie has received \(N (1 <= N <= 50,000)\ ...

  9. SLF4J 日志门面

    目录 01.简单介绍 02.日志级别 03.入门案例 03.动态打印 04.异常打印 05.日志集成 06.集成 logback 07.集成 slf4j-nop 08.集成 log4j 09.集成 j ...

  10. 编写可维护的webpack配置

    为什么要构建配置抽离成npm包 通用性 业务开发者无需挂住配置 统一团队构建脚本 可维护性 构建配置合理的拆分 README文档, chan 构建配置管理的可选方案 通过多个配置管理不同环境的构建, ...