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>
Babylon.js 入门简介和开发实例的更多相关文章
- Jboss ESB简介及开发实例
一.Jboss ESB的简介 1. 什么是ESB. ESB的全称是Enterprise Service Bus,即企业服务总线.ESB是过去消息中间件的发展,ESB采用了“总线”这样一 ...
- 网页3D引擎“Babylon.JS”入门教程翻译总结
使用三个月的业余时间把官方教程的入门部分译为中文并上传到github,在下一步编程前做一个总结. 历程: 最早接触游戏编程是在大三下学期,用汇编语言和实验室里的单片机.触摸屏.电机(提供声效)编的打地 ...
- Node.js 入门简介
Node.js简介 1.1 简介 V8引擎本身就是用于Chrome浏览器的JS解释部分,但是Ryan Dahl鬼才般的把这个V8搬到了服务器上,用于做服务器的软件. Node.js是一个专注于实现高性 ...
- Web Service简介与开发实例
简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的 ...
- JS入门系列(2)-原型-实例属性
下面的例子中,在构造器内部定义了like,然后再原型上也定义了like.通过下面的测试表明: 在构造器内部创建的实例方法会阻挡原型上定义的同名方法 初始化操作的优先级如下: 首先,通过原型给对象实例添 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- 以太坊智能合约开发，Web3.js API 中文文档 ethereum web3.js入门说明
以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...
- App开发Native.js入门指南
概述 Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展 ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
随机推荐
- Mac下最好用的SSH连接客户端 （Termius）
Termius是微软的一款SSH终端工具,它支持多平台.而且操作界面十分ha好看且简洁,今天分享给大家️ 软件下载 关注下方公众号,回复termius获取下载地址 软件功能介绍 Termius M ...
- 差分隐私（Differential Privacy）定义及其理解
1 前置知识 本部分只对相关概念做服务于差分隐私介绍的简单介绍,并非细致全面的介绍. 1.1 随机化算法 随机化算法指,对于特定输入,该算法的输出不是固定值,而是服从某一分布. 单纯形(simplex ...
- 看看CabloyJS工作流引擎是如何实现Activiti边界事件的
CabloyJS内置工作流引擎的基本介绍 1. 由来 众所周知,NodeJS作为后端开发语言和运行环境,支持高并发.开发效率高,有口皆碑,但是大多用于数据CRUD管理.中间层聚合和中间层代理等工具场景 ...
- python和numpy中sum()函数的异同
转载:https://blog.csdn.net/amuchena/article/details/89060798和https://www.runoob.com/python/python-func ...
- 分享一个基于 netty 的 java 开源项目
1.简介 中微子代理(neutrino-proxy)是一个基于 netty 的.开源的 java 内网穿透项目.遵循 MIT 许可,因此您可以对它进行复制.修改.传播并用于任何个人或商业行为. 2.项 ...
- Ribbon的ServerStats引起内存泄露问题总结
问题描述 服务运行一段时间之后,出现页面卡顿加载慢的问题,使用top命令查看了服务器的使用情况,发现CPU飙高,接着查看了该进程中每个线程的占用情况,发现导致CPU高的线程是JVM垃圾回收的线程,然后 ...
- Pytorch中的Sort的使用
>>> a = torch.randn(3,3)>>> atensor([[ 0.5805, 0.1940, 1.2591], [-0.0863, 0.5350, ...
- python基础知识-day8(模块与包、random、os)
1.模块与包 package:相同的模块代码存储在一个目录下(即包里边会包含多个模块). 包不能存储在文件夹的目录下,模块名称不能使用关键字.(不包含工程文件夹) 2.模块与包的实例 1)在工程文 ...
- 修改windows字符集
手动 临时修改cmd默认字符集(代码页) chcp xxxx 自动<打开cmd后应该自动运行dhcp 65001,临时设置为utf-8> D:\Develope\apache-tomcat ...
- 从零打造一个Web地图引擎
说到地图,大家一定很熟悉,平时应该都使用过百度地图.高德地图.腾讯地图等,如果涉及到地图相关的开发需求,也有很多选择,比如前面的几个地图都会提供一套js API,此外也有一些开源地图框架可以使用,比如 ...