babylon.js-3：了解STL网格模型

网格模型上色

本篇文章主要介绍如何在 BabylonJS 中实现STL网格模型上色。

• .STL文件：从官方上的叫法应该叫“标准三角面片文件”。但是为了易懂，我们下面称它为“网格模型”。当然，在场景渲染后它就是一个Mesh（网格）。

• 图片
  

运用场景

• 产品私有化选型定制

概要

• 加载器库
• 初识 OBJ 和 STL 文件
• GUI色板选择器
• 网格模型异步加载
• 加载动画
• 网格模型上色
• 官方即将弃用 ImportMesh 而推荐使用 ImportMeshAsync 说明
• OBJ 或 STL 文件 第三方资源

延申

• 网格模型局部部件上色

正文

加载器库的支持

• CDN 引用

  <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
  

• npm 安装

  # @see: https://www.npmjs.com/search?q=babylonjs-loaders
  npm install babylonjs-loaders
  

  更多Vue支持请看： 如何在 Vue 中使用 BabylonJS

认识 OBJ 和 STL 文件

• OBJ 文件：
  • 定义：OBJ（Object）文件是一种三维对象文件格式，它是一种文本文件，包含了几何信息，如顶点位置、纹理坐标、法线向量和三角形面片信息等。
  • 用途：常用于在不同的三维软件和渲染引擎之间交换三维模型数据，广泛应用于 3D 建模、动画制作、游戏开发等领域，因为它可以存储丰富的几何信息，支持多面体几何图形，并且可以包含材质和纹理信息。
  • 结构：文件中通常以 v 开头的行表示顶点坐标，vt 表示纹理坐标，vn 表示法线，f 表示面信息，这些信息可以组合成一个完整的 3D 模型的几何形状。
  • 示例：

    # Blender v2.79 (sub 0) OBJ File: ''
    # www.blender.org
    o Cube
    v 1.000000 -1.000000 -1.000000
    v 1.000000 -1.000000 1.000000
    ...vt 0.625000 0.500000vt 0.875000 0.500000
    ...vn 0.0000 0.0000 1.0000vn 0.0000 0.0000 -1.0000
    ...f 1/1/1 2/2/1 3/3/1f 3/3/1 4/4/1 1/1/1
    

• STL 文件：
  • 定义：STL（Stereolithography）文件有两种格式，一种是二进制格式，另一种是文本格式，主要用于描述三维表面几何形状，仅包含三角形面片信息，不包含颜色、纹理和其他属性。
  • 用途：主要用于快速成型系统，如 3D 打印，因为它的简单性和对表面几何形状的准确描述，使它成为 3D 打印机的标准输入文件之一。
  • 结构（文本格式）：以 solid 开头，包含多个 facet normal 描述三角形面片的法线，然后是 outer loop 包含三角形的三个顶点，以 endloop 和 endfacet 结束一个面片，最后以 endsolid 结束整个文件。
  • 示例（文本格式）：

    solid Cube
    facet normal 0.0 0.0 1.0outer loopvertex 1.0 1.0 1.0vertex -1.0 1.0 1.0vertex -1.0 -1.0 1.0endloop
    endfacet
    ...
    endsolid Cube
    

二、VSCode 相关插件：

• 3D Viewer for VSCode：在 VSCode 中，可以使用 3D Viewer for VSCode 插件，它可以让你在编辑器中预览 STL 文件。安装该插件后，打开 STL 文件，在编辑器的侧边栏会出现一个 3D 视图，可以旋转、缩放和平移查看 STL 模型。
• 市场：3dviewer

GUI 色板选择器

这里的颜色选择面板我们选用BABYLONJS内置原滋原味的GUI面板控件：ColorPicker

具体实现：

// 创建一个全屏的动态纹理
const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
// 创建一个颜色选择器
const colorPicker = new BABYLON.GUI.ColorPicker();
// 设置颜色选择器的添加位置
advancedTexture.addControl(colorPicker);

注意：请务必添加GUI库，否则浏览器会报错，找不到 AdvancedDynamicTexture 属性

<!-- 引入 BabylonJS GUI 库 -->
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>

网格模型异步加载

由于网格模型过大，正如素材里面的“vaze2.STL”文件165MB。所以在场景中加载的时候需要采用异步加载。

实现代码：

const result = await BABYLON.SceneLoader.ImportMeshAsync('meshName', './3066-vase-3d-model/', 'vaze2.STL', scene, (event) => {})
const newMeshes = result.meshes; // meshes是一个数组集
if (newMeshes.length > 0) {importedMesh = newMeshes[0];
}

参数剖析：

• lengthComputable：用于检查是否可以计算进度的准确百分比。

  • 注意：为什么需要进入if (event.lengthComputable)这个判断作为前提？
  • 当 event.lengthComputable 为 true 时，意味着文件的总大小是已知的，并且可以计算出加载进度的准确百分比。这是因为有些文件的大小可能无法提前得知，例如在某些跨域请求或服务器没有正确设置 Content-Length 头信息时，文件的总大小是不确定的。

• loaded：表示已经加载的数据量。

• total：表示文件的总大小。

那么，通过获取以上参数，可以准确的计算当前网格模型加载的进度和展现进度百分比情况。同时可以控制加载完成后，网格模型与加载动画的显示与隐藏。

加载动画

加载动画的思路是一贯的，所以下面给出简单的逻辑和具体实现代码：

1. 绘制进度条背景

   // 绘制进度背景
   const progressBar = new BABYLON.GUI.Rectangle();
   progressBar.width = "200px"; // 宽度200px
   progressBar.background = "gray";// 底色为灰色
   progressBar.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER; // 水平居中
   progressBar.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER; // 垂直居中
   

2. 绘制进度条

   // 绘制进度条
   const progressBarFill = new BABYLON.GUI.Rectangle();
   progressBarFill.width = "0px"; // 默认宽度为0
   progressBarFill.background = "blue"; // 底色为蓝色
   progressBarFill.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; // 水平左对齐(不然会从中间向两天展开)
   

3. 计算当前进度

   // 计算当前进度
   if (event.lengthComputable) {const progress = event.loaded / event.total;
   }
   

4. 绘制进度和进度值

   // 宽度为当前进度乘以200
   progressBarFill.width = progress * 200 + "px"; 
   // 显示当前进度
   progressText.text = Math.floor(progress * 100) + "%"; 
   

5. 加载完毕动作

   // 隐藏进度条
   progressBar.isVisible = false;
   

网格模型上色

给颜色选择器绑定一个选择监视器事件，当选择颜色的时候，就给网格模型上色。

具体实现：

colorPicker.onValueChangedObservable.add((value) => {importedMesh.material.diffuseColor = new BABYLON.Color3(value.r, value.g, value.b);
});

官方即将弃用 ImportMesh 而推荐使用 ImportMeshAsync 说明

各自的参数说明就不在赘述了，感兴趣的可以去官方查看，这里主要说明两者的运用场景，就目前环境下谁更好。

• 使用方法比较

  • ImportMesh

    BABYLON.SceneLoader.ImportMesh("", "path/to/your/models/", "yourModel.obj", scene, function (newMeshes, particleSystems, skeletons) {if (newMeshes.length > 0) {const mesh = newMeshes[0];// 对导入的网格进行操作，例如设置位置和旋转mesh.position = new BABYLON.Vector3(0, 0, 0);mesh.rotation = new BABYLON.Vector3(0, Math.PI, 0);}
    }, function (event) {if (event.lengthComputable) {console.log(`Loaded ${event.loaded} of ${event.total} bytes`);}
    }, function (error) {console.error("Error loading mesh:", error);
    });
    

  • ImportMeshAsync

    const importMeshAsync = async function() {try {const result = await BABYLON.SceneLoader.ImportMeshAsync("", "path/to/your/models/", "yourModel.obj", scene, function (event) {if (event.lengthComputable) {console.log(`Loaded ${event.loaded} of ${event.total} bytes`);}});const newMeshes = result.meshes;if (newMeshes.length > 0) {const mesh = newMeshes[0];// 对导入的网格进行操作，例如设置位置和旋转mesh.position = new BABYLON.Vector3(0, 0, 0);mesh.rotation = new BABYLON.Vector3(0, Math.PI, 0);}} catch (error) {console.error("Error loading mesh:", error);}
    };
    importMeshAsync();
    

• 区别和优点

  • ImportMesh 是一个传统的回调函数风格的方法，而 ImportMeshAsync 是一个返回 Promise 的异步方法，使用 async/await 或 .then() 处理结果，更符合现代 JavaScript 的异步编程风格。

  • ImportMeshAsync 在使用时可以利用 try...catch 语句来捕获错误，代码结构更清晰，避免了回调函数的嵌套，使代码更易读和维护。

• 使用场景

  • ImportMesh：
    • 适用于传统的回调函数风格的编程，如果你更熟悉这种风格，或者项目中已经大量使用回调函数，可以使用 ImportMesh。
    • 在不支持 async/await 的旧环境中使用。
  • ImportMeshAsync：
    • 适用于现代 JavaScript 开发，使用 async/await 可以使代码更加简洁，避免回调地狱。
    • 在需要处理多个异步操作时，使用 async/await 可以让代码更易读，更容易组合和管理多个异步操作。

OBJ 或 STL 文件 第三方资源

• 下载模型的站点：
  • creazilla

总结

• 案例特点
  在加载大型网格模型，进度条让用户了解加载的进度，提高用户体验。 用户可以通过颜色选择器为模型上色，实现个性化定制。

• 价值
  可以用于展示各种3D模型，如产品设计、建筑模型、艺术作品等，让用户可以从不同角度查看模型的细节，这在产品设计、游戏开发等领域非常有用。

• 实现效果展示