Three.js-皮肤骨架网格物体实例，动画和混合 [英] Three.js - skinned skeletal mesh instances, animations and blending

问题描述

我正在研究一款小型多人游戏，该游戏具有一个皮肤单一的玩家网格，许多玩家都在使用它. 某些背景:我尝试通过Maya和Blender Collada导出进行加载.两者似乎都引用某种形式的动画数据，但我无法使其正常工作.我已经尝试过maya JSON导出器，该导出器只用一条实线填充了很小的1k文件.最终，Blender JSON导出器起作用了.对于那些也尝试加载蒙皮网格物体的人，我发现这非常有帮助:

I'm working on a small multiplayer game which has a single skinned player mesh with many players using it. Some Background: I've tried loading via maya and blender collada export. Both seem to reference some form of animation data but I couldn't get it working. I've tried the maya JSON exporter, which spat out tiny 1k files with only a material line. Finally the blender JSON exporter worked. To those also trying to load skinned meshes, I found this very helpful: Model with bones animation (blender export) animating incorrectly in three.js

所以现在我有一个geometry对象和一个来自JSON加载器的materials数组.

So now I have a geometry object and a materials array from the JSON loader.

我可以在材质上设置skinning=true，创建THREE.SkinnedMesh，将其添加到场景中，然后通过THREE.AnimationHandler.add添加动画(我不太清楚AnimationHandler的实际作用)，创建一个THREE.Animation，分别调用play()和update(dt).最后，我的场景中有一个网格物体和一个动画.

I can set skinning=true on the materials, create a THREE.SkinnedMesh, add it to the scene, add animations via THREE.AnimationHandler.add (I'm quite unclear on what the AnimationHandler actually does), create a THREE.Animation, call play() and update(dt). Finally I have a single mesh and an animation playing in my scene.

现在我想要的是这些...

Now what I want are these...

1. 许多实例-我想在场景中运行多个玩家模型.

1. Many instances - I want more than one player model running around in my scene.

• 我不希望多次加载相同的网格和动画数据.
• 动画时间应基于实例(因此它们不会全部同步动画).

我应该为同一模型创建许多THREE.SkinnedMesh和THREE.Animation吗? THREE.AnimationHandler进入哪里?

Should I be creating many THREE.SkinnedMesh and THREE.Animation for the same model? Where does THREE.AnimationHandler come in?

许多动画-我希望能够分别播放空闲/运行周期.

Many animations - I want idle/run cycles able to be played individually.

AFAIK动画关键帧只有一个时间轴. Three.js如何为我进行分区，还是我必须手动进行?

AFAIK there's only a single timeline of animation keyframes. How does Three.js partition this up for me, or do I have to do it manually?

动画混合-当角色停止运行并与空闲动画保持静止时，我不希望彼此之间立即捕捉.我想暂停运行动画并将该状态重新混合到空闲动画中.

Animation Blending - When a character stops running and stands still with the idle animation, I don't want an instant snap from one to the other. I'd like to pause the run animation and blend that state back into the idle animation.

蒙皮网格物体(不是变形目标)当前是否可以实现?是否有关于此的示例或文档?

任何信息都将不胜感激，即使只是朝着正确的方向前进. 我没有完整的教程，我想了解有关这些功能的更高级信息.

Any information would be greatly appreciated, even just a nudge in the right direction. I'm not after a full tutorial, I would like some higher level information about these features.

我可以很高兴地实现 2 和 3 ，但是我想要一些有关threejs蒙皮和动画框架的信息/描述性文档来入门.例如，这没什么可继续的.

I could happily implement 2 and 3, but I'd like some information/descriptive docs about the threejs skinning and animation framework to get me started. For example, this isn't much to go on.

[ EDIT ]
谢谢@NishchitDhanani，此页面很好，但是没有提及多个动画或混合骨骼动画: http://chimera.labs.oreilly.com/books/1234000000802/ch05.html#animating_characters_with_skinning

[EDIT]
Thanks, @NishchitDhanani, this page is quite good but doesn't mention multiple animations or blending skeletal animations: http://chimera.labs.oreilly.com/books/1234000000802/ch05.html#animating_characters_with_skinning

此页面说，多个动画仍然是当前的问题，但没有更多(在评论中有一些讨论): http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

This page says multiple animations are still a current issue but not much more (discussed a little in the comments): http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

当前答案是...

1. 使用很多THREE.SkinnedMesh，但仍然不确定THREE.AnimationHandler.
2. 不知道.也许有一种方法可以在THREE.Animation中手动修改开始/结束关键帧.
3. 未实现AFAIK.我可能会尝试创建一个自定义着色器，该着色器可以使用两个THREE.Animation并在它们之间进行插值.

1. Use many THREE.SkinnedMesh and still not sure about THREE.AnimationHandler.
2. Don't know. Perhaps there's a way to modify the start/end keyframes manually in the THREE.Animation.
3. Not implemented AFAIK. I might try creating a custom shader that can take two THREE.Animations and interpolate between them.

推荐答案

从67版(2014年4月)开始，支持骨骼动画混合和多个动画.您仍然需要为每个模型创建一个SkinnedMesh. AnimationHandler负责每帧更新(勾号)动画，因此您应该在此上调用update而不是在每个Animation上手动调用.

As of release 67 (April 2014), both skeletal animation blending and multiple animations are supported. You will still need to create a SkinnedMesh for each model. The AnimationHandler is responsible for updating (ticking) the animations every frame so you should be calling update on that and not manually on each Animation.

请参阅新添加的示例: webgl_animation_skinning_blending.html 或在此处查看我自己的几个示例:

See the newly added example: webgl_animation_skinning_blending.html or check out a couple of my own here:

基本字符控制器(具有时间扭曲的速度融合)

时间扭曲速度混合

这篇关于Three.js-皮肤骨架网格物体实例，动画和混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！