使用 Babylon.js 在 HTML 页面加载 3D 对象
五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了。因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究。本人之前也并没有接触过 WebGL ,这方面算是知识盲区,需求完成之后感觉非常炫酷,顺手写篇博客记录下来。不得不说 3D 打印和 VR 慢慢的开始走进平时的生活了,技术的成熟与硬件成本的变低,结合内容跨平台共享与各种简单的 js 框架, WebGL 和 WebVR 很可能就是未来 Web 方向的主流技术。期待美好而炫酷的未来ing
Babylon.js 是什么
Babylon.js 是一个 JavaScript 开源框架,可以在浏览器或 Web 应用程序中简单便捷的构建 3D 游戏和 WebGL、WebVR 等 3D 体验。Babylon.js 非常强大,强大到可以去构建商业游戏。毕竟我才花了两天时间去了解它,只用来加载 3D 对象确实是大材小用了,文档和 GitHub 地址在下面。
Babylon GitHub : https://github.com/BabylonJS/Babylon.js
Babylon Document : https://doc.babylonjs.com/
基本代码
Babylon.js 并不是所有的 3D 对象都支持,支持的类型: .glTF 、 .obj 、 .stl 、 .babylon 。
这里以 STL 对象为例,首先需要引入两个 js 文件。一个是 Babylon.js ,另一个是 STL Loader, js 文件在 GitHub 中自行搜索下载引入。
<script src="~/js/babylon.js"></script>
<script src="~/js/babylon.stlFileLoader.min.js"></script>
同时还需要一个 HTML5 的 canvas 标签作为 Babylon.js 的渲染容器
<canvas id="renderCanvas" style="width:100%;height:100%;touch-action:none;"></canvas>
紧接着注册一个 DOM 事件,我们的渲染代码将在事件里完成,以确保执行渲染之前加载整个 DOM 。
<script>
window.addEventListener('DOMContentLoaded', function() {
// TODO
});
</script>
实现步骤
获取渲染容器对象
var canvas = document.getElementById('renderCanvas');
加载渲染引擎
Engine 类负责低级别的 API 接口。第一个参数为渲染容器对象,第二个参数是开启抗锯齿。
var engine = new BABYLON.Engine(canvas, true);
加载场景
一个基本场景(Scene)里需要包括相机(Cameras)、光源(Lights)、3D 对象。这里相机使用 ArcRotateCamera ,鼠标可以控制旋转和缩放。光源使用 HemisphericLight 半球光,用来模拟现实中的环境光。当然你也可以使用其他相机和光源,文档链接已给出。
// 基本的场景对象
var scene = new BABYLON.Scene(engine); // 半球光对象,朝向天空
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene); // 弧度旋转相机,参数含义为:α角度、β角度、半径、目标方向、场景对象。
// 下图非常详细的说明了各个参数的真实场景的含义
var camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 10, new BABYLON.Vector3(40, 40, 40), scene);
// 相机设置在原点位置
camera.setTarget(BABYLON.Vector3.Zero());
// 把相机附在渲染对象上
camera.attachControl(canvas, false); // 把 STL 对象附加在现有的场景对象上
// 可以从文件夹中选取对象,也可以给出一个 URL
BABYLON.SceneLoader.Append("../", "Chariot_Red_f.stl", scene);
Arc Rotate Camera 示意图
当然,上面的代码可以封装成一个方法。
注册渲染循环
这些代码非常重要,场景是需要循环渲染的。
engine.runRenderLoop(function () {
scene.render();
});
实现容器自动缩放
window.addEventListener('resize', function () {
engine.resize();
});
完整代码与效果图
效果图
<canvas id="renderCanvas" style="width:100%;height:100%;touch-action:none;"></canvas>
<script src="~/js/babylon.js"></script>
<script src="~/js/babylon.stlFileLoader.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 10, new BABYLON.Vector3(40, 40, 40), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
BABYLON.SceneLoader.Append("", "@Model.PreviewModel", scene);
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener('resize', function () {
engine.resize();
});
});
</script>
我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1r5oq0q418e9j
使用 Babylon.js 在 HTML 页面加载 3D 对象的更多相关文章
- js 过多 导致页面加载过慢
自己的代码检查了很久,才检查 出来 通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊, 一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含 ...
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
- js 百分比显示页面加载进度
做东西遇到显示页面百分比的加载进度,不过里面的图片较多,看了别人的代码,才想到可以通过图片的加载显示加载的百分比,做一下笔记: html: <span id="percent" ...
- JS学习之页面加载
1.window.opener.location.reload(); 意思是让打开的父窗口刷新.window.opener指的是本窗口的父窗口,window.opener.location.h ...
- 根据打开页面加载不同Js
根据打开页面加载不同Js //根据打开页面加载不同JS $(document).ready(function(){ var href = document.URL; /*获取当前页面的URL*/ if ...
- JS里面的懒加载(lazyload)
懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载 涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占 ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- JS 页面加载触发事件 document.ready和window.onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
随机推荐
- Android官方命令深入分析之etc1tool
etc1tool是一个命令行工具,可以将PNG图像压缩为etc1标准,并且可以进行解压缩. 用法: etc1tool infile [--help | --encode | --encodeNoHea ...
- pig的内置函数小总结(不全)
piggybank里面有很多函数,可以用register和define调用.也可以用java仿照piggybank自行开发. 比如读sequence二进制文件,可以用piggybank里面函数Sequ ...
- input驱动12种事件类型Event types的含义
linux2.6 input subsystem中部分相关结构体的分析 最近在做linux2.6的键盘驱动程序的工作,接触到了input subsystem这一概念,现把我对其中相关结构体的理解写出 ...
- 高德地图SDK使用经验
下文说的是高德地图 Android SDK版本,详细版本如下: 2D地图:v2.3.1 定位:v1.3.0 导航:v1.1.1 发现的问题如下,其中一些疑是地图BUG,一些是需要你自己小心的地方: 1 ...
- 关于React Native 报Export declarations are not supported by current JavaScript version错误的解决问题
设置.js文件默认以jsx的语法打开 在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示: 当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个 ...
- (十九)TableView的点击监听和数据刷新(Alert的多种样式) -tag传值的技巧
要实现监听,要使用代理,控制器要成为TableView的代理. 注意下面的方式是代理方法: - (void)tableView:(UITableView *)tableView didSelectRo ...
- FFMPEG列出DirectShow支持的设备
FFMPEG列出dshow支持的设备: ffmpeg -list_devices true -f dshow -idummy 举例: 采集摄像头和麦克风 ffmpeg -f dshow -i vide ...
- Linux用户管理命令(第二版)
添加用户 1.useradd -设置选项 用户名 [-D 查看缺省参数 ] 选项: u: UID [必须是系统中没有的] g:缺省所属用户组GID[最好有] G: 指定用户所属多个组[可以指定这个用户 ...
- linux设置系统时间
设置系统时间 - date命令:显示系统的时间,可以在直接输入"date"命令来查看系统的时间 - date+%y/%m/%d - ...
- iOS在GitHub Top 前100 简介
主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. 项目名称 项目信息 1. AFNetworking 作 ...