使用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来展示模型。

1
2
3
4
5
6
7
8
9
    <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中使用，直接使用

1
2
    <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文件下载到本地…