使用 Babylon.js 在 HTML 页面加载 3D 对象-阿里云开发者社区

开发者社区> 张高兴> 正文

使用 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);
![1](https://yqfile.alicdn.com/ff360ea3b954ca25c7b7a99bccef8ee2a17da18b.jpeg)
<p style="text-align:center;margin-bottom:25px;color:gray"><small>Arc Rotate Camera 示意图</small></p>

当然,上面的代码可以封装成一个方法。
  1. 注册渲染循环

    
    这些代码非常重要,场景是需要循环渲染的。
    
    engine.runRenderLoop(function () {
        scene.render();
    });
  2. 实现容器自动缩放

    window.addEventListener('resize', function () {
        engine.resize();
    });

完整代码与效果图

2

效果图

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
json的使用 前后台统一以对象的方式编程 (转)
前台插件的介绍 jquery.json 插件{jQuery插件} 主要方法: $.toJSON(json对象): 将json对象转化为字符串 $.evalJSON(str): 将字符串转化为json对象 插件下载: jquery.
882 0
纯静态HTML网页页面的优点
纯网页HTML语言可以直接被搜索引擎所识别,但是asp语言需要经过解释,搜索引擎可能会在中途放弃收录,转到下一站点。所以HTML是建设网站的基本,每一次显示都是直接访问这个文件,这个页面是与数据库没有任何关系,同时要想修改网站,那必须修改网站模板,那么纯HTML网页的优点是什么呢?   1、如果是生成了HTML,更容易被搜索引擎收录和排名靠前,这是优点一,这也是大家使用HTML的主要目的。
748 0
MySQL 直接存储图片并在 html 页面中展示,点击下载
数据库实体类: package com.easy.kotlin.picturecrawler.entity import java.util.* import javax.
877 0
Nginx开启gzip压缩大幅提高页面加载速度
1、Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2、找到如下一段,进行修改 gzip on;gzip_min_length 1k;gzip_buffers 4 16k;#gzip_http_version 1.
1108 0
ExtJs6 loader 引入html页面不执行页面内js的解决办法
如题: extjs4的代码 到了ext6不执行了 ext4代码:                 loader: {                    url: me.
926 0
如何在Watir 中识别各种 HTML 对象
在 Watir 的 Wiki 上无意中看到的,激动的热泪盈眶啊,实在是佩服的五体投地,感谢这些热心的同行们整理了这些宝贵的资料啊。同志们,我们都要向国外的“雷锋”学习啊!另外,也建议大家从中学习一下文档整理和编写的技巧。
641 0
+关注
张高兴
Hi, I&#39;m Zhang Yuexin, who loves C# and.NET technology.
35
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载