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

网格模型上色

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

文章目录

- 网格模型上色
- - 运用场景
  - 概要
  - 延申
  - 正文
  - - 加载器库的支持
    - 认识 OBJ 和 STL 文件
    - GUI 色板选择器
    - 网格模型异步加载
    - 加载动画
    - 网格模型上色
    - 官方即将弃用 `ImportMesh` 而推荐使用 `ImportMeshAsync` 说明
    - OBJ 或 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：表示文件的总大小。

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

加载动画

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

绘制进度条背景

// 绘制进度背景
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; // 垂直居中

绘制进度条

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

计算当前进度

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

绘制进度和进度值

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

加载完毕动作

// 隐藏进度条
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 可以让代码更易读，更容易组合和管理多个异步操作。