使用 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>

实现步骤

  1. 获取渲染容器对象 var canvas = document.getElementById('renderCanvas');
  2. 加载渲染引擎 Engine 类负责低级别的 API 接口。第一个参数为渲染容器对象,第二个参数是开启抗锯齿。 var engine = new BABYLON.Engine(canvas, true);
  3. 加载场景 一个基本场景(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 示意图 当然,上面的代码可以封装成一个方法。

  1. 注册渲染循环 这些代码非常重要,场景是需要循环渲染的。 engine.runRenderLoop(function () { scene.render(); });
  2. 实现容器自动缩放 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端桃园

深入理解虚拟 DOM,它真的不快

前两天发了一篇别再说 React 快了,要被打脸的,有些人一看到标题就开始喷了,有数据支撑吗?你的意思就是 diff 算法慢咯?等等等,对于这种人我也只能呵呵了...

1261
来自专栏Android机动车

Android的16ms和垂直同步以及三重缓存

手机屏幕是由许多的像素点组成的,每个像素点通过显示不同的颜色最终屏幕呈现各种各样的图像。手机系统的类型和手机硬件的不同导致UI的流畅性体验个不一致。

1562
来自专栏游戏杂谈

JavaScript监控当前cpu使用状况

也许在你面试的某一天,突然问你一个问题:“如何粗略的计算出当前系统cpu的使用情况?”

982
来自专栏量子位

用Google Colab,怎样让机器学习图表动起来?

毕竟它无需安装、功能强大、支持实时协作,还能免费蹭Google云上的GPU,比Jupyter Notebooks不知高到哪里去了。

974
来自专栏天天P图攻城狮

android视频系列:视频解码篇--android上视频播放的实现

前言 要开始正儿八经地写视频系列文章了。思来想去,从播放器入手,再合适不过了。视频文件,只有播放出来,才显示出了意义;只有播放出来,才暴露出各种问题。先理解播放...

40211
来自专栏非著名程序员

Android:一个高效的UI才是一个拉风的UI

开篇 Android是一个运行在移动终端上的操作系统,跟传统PC最大的不同所在就是移动终端的资源紧缺问题“比较”明显,当然对于一些屌丝机型,应该用“非常“来形容...

2679
来自专栏web前端教室

有空看看jQuery源码吧,看不懂也会有收获

jQuery是一个对新人很亲切的JS库,它的源码风格都比较接近自然语言,可以一边对照手册,一边查看jQuery源码。第一次看必然很吃力,不过没关系,这就是学习的...

1866
来自专栏腾讯Bugly的专栏

优化安卓应用内存的神秘方法以及背后的原理,一般人我不告诉他

安卓应用一般都害怕自己被杀,内存占用高是被杀的重要原因之一,所以大家都想尽各种招数应对,但效果都一般。 但有一招: WindowManagerGlobal.ge...

7136
来自专栏老司机的简书

老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制

老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制

1012
来自专栏张高兴的博客

使用 Babylon.js 在 HTML 页面加载 3D 对象

44612

扫码关注云+社区