导入 gltf 场景并使用 javascript 创建边界框

Question

我目前正在开发一个在线浏览器3d游戏。 整个碰撞检测应该在服务器和客户端上进行计算，以避免黑客攻击。

作为物理引擎，我决定使用剑杆，因为它似乎是最新的。 现在我需要加载我从搅拌机导出为 .gltf 文件的游戏场景。 为了在客户端显示它，我只使用 Threejs gltf 加载器。 但是，在服务器端我不使用 Threejs。除此之外，我必须生成场景内所有对象的边界框，以便在以某种方式加载 gltf 文件后在剑杆中使用它。

如何在没有 Threejs 的情况下加载 gltf 文件？如何生成边界框？我应该在 gltf 场景中包含边界框吗？ Rapier 似乎不支持开箱即用。我不喜欢剑杆，但我更喜欢它。

Answer 1

在没有任何预先存在的库或加载器的帮助下从 glTF 加载边界框将是一个编程挑战，但这是可以做到的。当然，您将使用浏览器的 JSON 解析器，并且某种向量/矩阵数学辅助库会非常方便。

以下是总体概述：

1. 将 glTF 的 JSON 部分解析为我们称之为

   glTF

   的对象。
2. 阅读

   glTF.scene

   获取默认场景索引，通常为

   0

   。
3. 从

   glTF.scenes[sceneIndex].nodes

   获取根节点列表。
4. 在

   glTF.nodes[n]

   的每个节点，考虑

   matrix

   或

   translation

   、

   rotation

   和

   scale

   中的变换。这些将改变节点的边界框及其子节点的边界框。
5. 向下递归节点的

   children

   （如果存在），它将是具有自己的变换的子节点索引数组。
6. 对于步骤 4 和 5 中找到的所有节点，查找

   node.mesh

   ，它将是

   glTF.meshes

   数组的索引。
7. 对于步骤 6 中的每个网格，查找对象数组

   mesh.primitives

   。
8. 对于步骤 7 中的每个基元，查找

   primitive.attributes.POSITION

   ，它将是

   glTF.accessors[]

   数组的索引。
规范要求 glTF 中的位置访问器具有两个数组
9. accessor.min[]

    和 

   accessor.max[]

   ，每个数组都有 3 个元素，分别代表 X、Y 和 Z。这是该网格中原始、未转换数据的边界框。 

现在您已经递归了整个结构，并在叶节点处找到了一些边界框。这些盒子包含原始网格数据，并且必须通过其父节点、祖父母节点、所有祖先节点的转换进行转换，以了解这些盒子在模型空间中的位置。

请注意，动画、蒙皮和变形等内容会给边界框计算增加额外的复杂性，但这超出了本答案的范围。