babylonjs 分部加载模型_使用 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.js 并不是所有的 3D 对象都支持,支持的类型: .glTF 、 .obj 、 .stl 、 .babylon 。
这里以 STL 对象为例,首先需要引入两个 js 文件。一个是 Babylon.js ,另一个是 STL Loader, js 文件在 GitHub 中自行搜索下载引入。
同时还需要一个 HTML5 的 canvas 标签作为 Babylon.js 的渲染容器
紧接着注册一个 DOM 事件,我们的渲染代码将在事件里完成,以确保执行渲染之前加载整个 DOM 。
window.addEventListener('DOMContentLoaded', function() {
// TODO
});
实现步骤
获取渲染容器对象
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();
});
完整代码与效果图
效果图
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();
});
});
我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1r5oq0q418e9j
babylonjs 分部加载模型_使用 Babylon.js 在 HTML 页面加载 3D 对象相关推荐
- 3ds Max、Maya安装Babylon.js插件导出gltf格式的3D模型文件方法
3ds Max.Maya安装Babylon.js插件导出gltf格式的3D模型文件方法 **1.去Github project Releases下载Babylon.js插件. 找到和自己安装的3ds ...
- babylonjs 分部加载模型_如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域. 本文说明和演示如何使用babylon.js来加载一个标准3d模型文件,如OB ...
- babylonjs 分部加载模型_基于Babylonjs自制WebGL3D模型编辑器
一.总述 当代WebGL编程所使用的3D模型大多是从3DsMax模型或Blender模型转化而来,这种工作模式比较适合3D设计师和3D程序员分工配合的场景.但对于单兵作战的WebGL爱好者来讲这种模式 ...
- babylonjs 分部加载模型_用基于WebGL的BabylonJS来共享你的3D扫描模型
用基于WebGL的BabylonJS来共享你的3D扫描模型 本文由 极客范 - 杰克祥子 翻译自 Andy Beaulieu.欢迎加入极客翻译小组,同我们一道翻译与分享.转载请参见文章末尾处的要求. ...
- babylonjs 分部加载模型_基于babylon3D模型研究3D骨骼动画(1)
3D骨骼动画是实现较为复杂3D场景的重要技术,Babylon.js引擎内置了对骨骼动画的支持,但Babylon.js使用的骨骼动画的模型多是从3DsMax.Blender等3D建模工具转换而来,骨骼动 ...
- 网页怎么预先加载模型_修补预先训练的语言模型
网页怎么预先加载模型 Can you fill in the words that I've removed from a recent announcement? 您能填写我从最近的公告中删除的词吗 ...
- pytorch 加载模型_福利,PyTorch中文版官方教程来啦(附下载)
PyTorch 中文版官方教程来了. PyTorch 是近期最为火爆的深度学习框架之一,然而其中文版官方教程久久不来.近日,一款完整的 PyTorch 中文版官方教程出炉,读者朋友从中可以更好的学习了 ...
- 网页怎么预先加载模型_使用预先训练的模型进行转移学习
网页怎么预先加载模型 深度学习 (Deep Learning) 什么是转学? (What is Transfer Learning?) Transfer learning is a research ...
- iframe js 加载失败_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因 其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
最新文章
- linux系统命令学习系列-文件和目录管理
- 大叔也说并行和串行`性能提升N倍(N由操作系统位数和cpu核数决定)
- python爬虫requests实战_Python_爬虫_requests小实战
- 新发现为类脑计算机开辟了道路
- php 语句,php的控制语句
- pythom打包文件太大_从SQL注入到整站打包与本地搭建
- Linux CentOs6 命令学习
- python爬虫案例-乌托家家具公司数据爬取
- 【java笔记】Collection集合
- 斯威夫特山地车_斯威夫特弦乐
- php实现弱类型,PHP内核探索:弱类型变量的实现
- mysql 手机归属地_盒子 - 手机归属地 MySql 数据
- OpenJDK8编译之后,缺少com.sun.tools.javac.Main怎么办
- python调用通达信函数大全_通达信dll开发实例,使用python在通达信里面选股
- 家庭局域网_如何查看局域网内所有ip?
- Myeclipse8.5 cn 序列号
- Modem相关知识__2019.12.03
- wps linux版公式编辑器,linux下的公式编辑器
- 为程序员讨回失去的午觉,我被投诉了,差点吃官司
- 独家解读 | Fisher信息度量下的对抗攻击