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入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
随机推荐
- Fail2ban 配置详解 动作配置
### # 包含配置 ### [INCLUDES] before = iptables-common.conf ### # 定义动作 ### [Definition] actionstart = &l ...
- Crane-scheduler：基于真实负载进行调度
作者 邱天,腾讯云高级工程师,负责腾讯云 TKE 动态调度器与重调度器产品. 背景 原生 kubernetes 调度器只能基于资源的 resource request 进行调度,然而 Pod 的真实资 ...
- 论文解读（gCooL）《Graph Communal Contrastive Learning》
论文信息 论文标题:Graph Communal Contrastive Learning论文作者:Bolian Li, Baoyu Jing, Hanghang Tong论文来源:2022, WWW ...
- 动态线程池框架 DynamicTp v1.0.6版本发布。还在为Dubbo线程池耗尽烦恼吗？还在为Mq消费积压烦恼吗？
DynamicTp 简介 DynamicTp 是一个基于配置中心实现的轻量级动态线程池管理工具,主要功能可以总结为 动态调参.通知报警.运行监控.三方包线程池管理等几大类. 经过几个版本迭代,目前最新 ...
- ebook下载 | 灵雀云发布《 企业高管IT战略指南——为何选择容器与Kubernetes》
发送关键词[高管指南]至灵雀云公众号,立即下载完整版电子书 "本书将提供企业领导者/IT高管应该了解的,所有关于容器技术和Kubernetes的基础认知和关键概念,突破技术语言屏障,全面梳理 ...
- 【Redis】哨兵初始化和主观下线
在的redis启动函数main(server.c文件)中,对哨兵模式进行了检查,如果是哨兵模式,将调用initSentinelConfig和initSentinel进行初始化,initServer函数 ...
- 当JAVA注解、AOP、SpEL相遇，更多可能变为了现实
常规情况下,我们可以通过业务定制化的注解,借助AOP机制来实现某些通用的处理策略.比如定义个@Permission注解,可以用于标识在具体的方法上,然后用来指定某个方法必须要指定角色的人才能够访问调用 ...
- 【小程序自动化Minium】一、框架介绍和环境搭建
微信小程序自动化测试系列分享 一.Minium 简介 minium 是微信团队为小程序专门开发的自动化框架,我们可以用它来做小程序的UI自动化测试,但是它的能力却不仅仅在于UI自动化. 正是得益于官方 ...
- JS：三目运算符
语法:条件表达式?表达式1:表达式0 注:当条件表达式为true则选择表达式1,反之false则选择表达式0 例: var a = 0; var b = 1; re=a>b?a:b consol ...
- 论文阅读 Exploring Temporal Information for Dynamic Network Embedding
10 Exploring Temporal Information for Dynamic Network Embedding 5 link:https://scholar.google.com.sg ...