将动画转换为.js以在three.js中使用它

Question

您好我正在使用JavaScript开始我的第一步并使用three.js。

即使它加载了json加载器，此示例http://threejs.org/examples/#webgl_morphtargets_horse的动画也是.js而不是.json，它看起来像这样：https://github.com/mrdoob/three.js/blob/master/examples/models/animated/horse.js

如何从使用Blender制作的动画中获取此类文件？目前我知道我有一个对json的三个出口商，但不是js。或者也许有一种方法可以将json转换为js？

非常感谢您的帮助

Answer 1

欢迎使用Javascript / WebGL世界！

JSON vs JS

• JSON == JavaScript Object Notation（要读取的数据）
• JS == Javascript（运行代码）

两件事。 JS是代码; JSON是对象的字符串表示形式（在本例中为网格，变形等）。查看JSON official site或Google，了解更温和的信息。

在示例中，JS是：

{
  "obj": "cool",
  "count": 1
}

虽然JSON看起来像：

var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('gallop', geometry.morphTargets, 30);

您感兴趣的是horse file 是 JSON，只有.js扩展名。这就是我从three.js导出器中获得的东西。异步函数不关心扩展（可能是“horse.foo”）; three.js只是尝试在提供的URL处获取文件，并将字符串解析为JSON（匹配three.js格式）。

复制动画

直接跳至TL的codepen example; DR。

使用three.js示例作为起点很棒。我倾向于使用本地服务器，从长远来看，它们不会持续（我关闭它们，它们着火等等）。所以我已经制作了horse example on codepen的副本。它只是您引用的示例的完整克隆，但具有codepen资源。我首先要求分配并从那里开始工作。

听起来好像你在blender three.js exporter工作时取得了一些成功，所以我会用它来运行。您可以将该JSON发布为另一个代码集，并像我在此(slightly modified) fork中一样引用它。

在我的例子中，我把这个animated ... thing（一个我不是的艺术家）聚集在一起。请注意有问题的动画如何从第0-30帧开始运行，与代码所要求的行相同：

cross

希望能够解决你的问题。