有没有办法在P5.js中创建模型之间的机械关系？

Question

我想使用P5.js将3D模型渲染到我的网站中，并且希望有可以调整的运动部件。我从互联网上抓取了以下图片作为示例

看看这个工具，有5个核心部分组成了整个过程。在SolidWorks中，我可以将单个零件导出为.obj文件，也可以将整个装配体导出为一个.obj文件。关于能够扩展和收缩该模型的问题，我无法在P5.js中找到任何突出显示执行此操作的内容，或者是否有方法提供某种类型的约束，以便能够合理地进行逻辑处理如何移动而不必对一堆东西进行纳米动画以使其按照您自然希望的方式移动。我不知道是否能够从装配模型中执行类似的操作，或者是否需要将每个零件导入到P5中然后进行迭代和装配，我真的不知道从哪里开始。有没有人有处理涉及到的东西的经验？

Answer 1

您需要将问题分解为更小的简单块。 例如：

1. 加载零件网格
2. 组装零件
3. 模拟零件

对于第1部分，使用p5，您应该可以使用loadModel()加载每个.obj文件

在组装零件方面，您应该可以使用push() / pop()来隔离坐标空间和对零件进行分组。

棘手的部分将是模拟，在这里您可以简单，受限或复杂。

我能想到的最简单的方法是一组关键帧：interpolate之间的零件的关键角度。

一个更复杂的选择可能是使用带有刚性弹簧（受约束的静止长度）的弹簧系统模拟系统。激光切割件看起来像是挤压的2D形状，就移动零件而言，它们锁定在2D平面上。

如果要进行完整的3D刚体仿真，则可能需要尝试使用ammo.js这样的物理引擎

这部分听起来令人困惑：

  

我想要一些可以调节的运动部件。

如果零件可以调整，那么除非您有每个可调版本的模型（这是要加载的文件的很多），否则加载.obj文件可能不是前进的方向。 您可能需要研究使这些形状参数化：

• 定义变化的参数（例如，半径，截面的长度和厚度，截面的数量等）
• 基于参数计算3D形状顶点（对于上面的示例，可以是带有z偏移量的2D形状作为拉伸）
• 使用beginShape() / endShape()
将顶点放到网格中