使用 Three.js ObjectLoader 正确渲染动画

Posted 2023-03-28

【中文标题】使用 Three.js ObjectLoader 正确渲染动画

【英文标题】：Getting animation to render correctly with Three.js ObjectLoader

【发布时间】：2015-12-17 14:35:42

【问题描述】：

我正在尝试使用 MakeHuman 的网格在 Three.js 中渲染动画。网格正确加载，但在动画运行时会变得非常扭曲。如果我添加一个 SkeletonHelper，我可以看到骨架正确地执行动画，但是它的方向与网格不同。

加载网格时，它是面朝下的，而骨架是正面朝上的。如果我在 Three.js 中旋转网格使其正面朝上，那么骨架由于某种原因会上下颠倒。我不确定这是否会导致网格失真。

这是我正在采取的步骤：

在MakeHuman 中创建一个网格。 导出为 Collada *.dae 文件。 导入 Blender。 使用 MakeWalk Blender 插件重新定位到 BVH 动作捕捉文件。 如果此时我在 Blender 中播放动画，它看起来很完美。 由于多个站点表示这解决了他们的问题，我清除了网格和骨架上的所有位置、旋转或比例。 使用 Blender 的 Three.js 导出器导出整个场景。 使用 ObjectLoader 加载场景和嵌入动画。

任何帮助将不胜感激。谢谢。

更新 - 我能够（简要地）让模型大部分按预期进行动画处理（只有一点变形）并且骨架和网格都指向相同的方向，但现在我无法重现我的成功。我相当肯定（在 Blender 中）清除或应用旋转、位置和比例是造成差异的原因，但是当我尝试再次执行这些步骤时，我无法再让它去做了。骨架和网格不再同步。这必须是问题，对吧？

我想我需要应用旋转和位置，但清除比例。但是，当我尝试应用该位置时，比例不再显示为“已清除”。我想我不明白 Blender 是如何工作的。清除或应用 Rot、Loc、Scale 的正确方法是什么？我是在重定向到 BVH 之前还是之后申请/清除？也许两者兼而有之？我需要在每个网格和/或骨骼上这样做吗？

【问题讨论】：

在动画网格上使用搅拌机导出器有一个未知的清单：devmatrix.wordpress.com/2013/02/27/…。能解决问题吗？

@Atrahasis，不幸的是没有。我在几个月前尝试过，但它适用于更旧版本的 Three.js。如果我按照它的建议尝试“在导出之前删除骨架”，我不会导出任何骨骼信息，并且 Three.js 会引发错误。

即使有链接，我也一直在努力解决这个问题，所以让我强调一点：一定要在姿势模式下重置骨骼的位置/旋转/缩放。无需删除骨架或其他任何东西。我可以加入 github 问题，在这里我可以快速找到所有相关的帖子：github.com/mrdoob/three.js/issues/7135

@Atrahasis，你有没有让它正常工作？

是的，我现在正在大量导出，没有任何问题。

【参考方案1】：

所以我想出了如何使它起作用，尽管我永远无法弄清楚为什么我以前的方法不起作用。

将模型导入 Blender（默认选择所有网格）后，立即清除旋转、位置和比例。 然后，如果模型朝向错误，按'n'显示Transform面板，在Outliner中选择根网格节点，并根据需要旋转它。然后，单击 ctrl+A 以应用旋转。

因此，基本上，与其保持在导入过程中设置的轮换，不如清除它并应用您自己的轮换。