使用Babylon.js在网页上显示glb模型

Minecraft的结构方块可以导出格式为 .glb 的模型文件,今天突发奇想,“能不能把这些模型放到网页上展示呢?”经过一番搜索,最终使用 Babylon.js Viewer 实现了这个功能。

模型文件

关于各种模型文件格式的介绍可以查看下面两个网页:
- 三维文件格式知多少 | abc、glTF、fbx、obj、dae、stl、3ds...
- 什么是3D模型,什么是GLTF,又如何使用GLTF文件

关于glb格式的介绍

GLTF文件实际上不是单个文件。相反,它们是包含JSON文档的文件夹,然后还有一些图片,以及其他包含几何图形,纹理,凹凸贴图等的文件夹。其他文件夹都是通过一个相对URLS进行引用,因此你一般可以将文件夹转储到Web服务器上,直接引用GLTF文件,其余资源将正确加载。

但如果你使用的是CDN而非自己的Web服务器,则可能无法控制相对URL,而且它们会出现问题。相反,你可以将GLTF转换为名为GLB的二进制格式,一个包含所有资源的单个文件。然后,这个单个文件可以放在你的CDN上并直接引用。

要获取GLB文件,你可以直接从3D建模程序中导出它们,也可以使用工具将GLTF转换为GLB。你可以使用这个非常好的基于网络的转换器:MakeGLB。只需将包含GLTF文件的文件夹拖到页面,然后它就会生成并下载GLB文件。接下来将GLB文件上传到Glitch项目的Assets部分。然后选择asset的URL并在主文档中予以引用。

Babylon.js

Babylon.js是一个基于webgl的3d图形引擎,利用他我们可以在网页上渲染出3D图形,而Babylon.js可以让我们很简单的在网页上展示我们的模型,支持glb格式。参考Babylon.js viewer的文档,我们可以在网页上使用下面这种方式插入一个viewer来展示模型。

<html>
<head>
  <title>Babylon.js Viewer - Display a 3D model</title>
  <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script> 
</head>
<body>
    <babylon model="https://models.babylonjs.com/boombox.glb" templates.main.params.fill-screen="true"></babylon>
</body>
</html>

如果想在wordpress中使用,直接使用

<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script> 
<babylon model="https://models.babylonjs.com/boombox.glb" templates.main.params.fill-screen="true"></babylon>

由于babylon.js的js文件都储存在国外的服务器且文件较大,所以有时候加载相当缓慢,可以考虑使用CDN或者把js文件下载到本地...

文章目录