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入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
随机推荐
- css页面样式初始化
为什么? 同一个样式,在各个浏览器的默认样式可能不同,所以需要统一初始化,同一个页面在不同浏览器能正常显示. @charset "utf-8"; /*css reset*/ bod ...
- C# 蓄水池抽样
蓄水池采样算法解决的是在给定但长度未知的大数据集中,随机等概率抽取一个数据.如果知道数据的长度,可以用随机数rand()%n得到一个确切的随机位置,或者分块取值来构造随机,那么该位置的对象就是所求的对 ...
- Python汉诺塔求解
1 def hanoi(n,a,b,c): 2 3 if(n>0): 4 5 hanoi(n-1,a,b,c) 6 7 print("Move disc no:%d from pile ...
- vue同时监听多个参数变化
computed: { // 同时监听多个参数 toWatch() { const { params1, params2 } = this.observeObj; return { params1, ...
- 【二分图】匈牙利 & KM
[二分图]匈牙利 & KM 二分图 概念: 一个图 \(G=(V,E)\) 是无向图,如果顶点 \(V\) 可以分成两个互不相交地子集 \(X,Y\) 且任意一条边的两个顶点一个在 \(X\) ...
- python各版本下载
python2源码压缩包 Python-2.7.9.tgz Python-2.7.10.tgz Python-2.7.11.tgz Python-2.7.12.tgz Python-2.7.13. ...
- RPA应用场景-海关报关
场景概述海关报关 所涉系统名称海关页面,业务核心系统 人工操作(时间/次) 10 分钟 所涉人工数量 3 操作频率实时 场景流程 1.每日接收报关申请邮件: 2.根据邮件信息进入业务核心系统查询相关数 ...
- sql-DCL用户及权限管理及其他常用命令-mysql
查看系统信息 SHOW PROCESSLIST -- 显示哪些线程正在运行 SHOW VARIABLES -- 显示系统变量信息 SELECT now(), user(), version(); -- ...
- POI设置列宽 自动调整列宽
for (int i = 0; i <= totalColumn; i++) { sheet.autoSizeColumn((short)i,true); //调整列宽 } 其中totalCol ...
- Java对接拼多多开放平台API（加密上云等全流程）
前言 本文为[小小赫下士 blog]原创,搬运请保留本段,或请在醒目位置设置原文地址和原作者. 作者:小小赫下士 原文地址:Java对接拼多多开放平台API(加密上云等全流程) 本文章为企业ERP(I ...