三个JS中的动画 [英] Animation in THREE JS

问题描述

有一个带有动画的模型.引入新的动画系统后，我没有运行它.也许我设置出口错误?我正在附加文件:

There is a model with animation. After the introduction of a new system of animation, I did not get it to run. Maybe I'm wrong to set up export? I am attaching files:

https://www.sendspace.com/file/etv0sl

代码:

var mixer = new THREE.AnimationMixer( player );
mixer.addAction( new THREE.AnimationAction( player.geometry.animations[0] ) );

mixer.update( 1000 );

推荐答案

新系统可与动画剪辑配合使用(如果正确，则自r74起). 这是我的Blender导出的JSON模型的示例.

New System works with animation clips (since r74 if im right). Heres a sample of my Blender exported JSON models.

var mixer;
var actions = {};
var loader = new THREE.JSONLoader();

loader.load( "webgl/models/model.json", function ( geometry, materials ) {

    model = new THREE.SkinnedMesh( geometry, materials, false );
    for(var x=0;x<materials.length();x++) materials[x].skinning = true;
    mixer = new THREE.AnimationMixer(model );

    //idle
    actions.idle = mixer.clipAction(geometry.animations[0]);
    actions.idle.setLoop(THREE.LoopRepeat);
    actions.idle.clampWhenFinished = true;
    actions.idle.play();

    //walk
    actions.walk = mixer.clipAction(geometry.animations[1]);
    actions.walk.setLoop(THREE.LoopRepeat);
    actions.walk.clampWhenFinished = true;

    scene.add( model );

}

每个导出的动画都存储在array.animations数组中. 在我的示例中，我明确地知道哪个索引是哪个动画，但是通过名称(geometry.animations[x].name)手动对其进行映射也非常容易.

Every exported Animation gets stored in the array geometry.animations. In my example i explicitly know which index is which animation but its also very easy to map it manually by name: (geometry.animations[x].name).

然后在动画循环中，您必须定期更新混音器
if(typeof mixer != "undefined") mixer.update(delta);

In the animation loop you then have to update the mixer regularly
if(typeof mixer != "undefined") mixer.update(delta);

从 http://yomotsu.net获得了我的信息/blog/2015/10/31/three-r73-anim.html

以下是动画动作的相关源代码: https://github.com/mrdoob/three.js/blob/ab93512c7a44bd98e669592b3db441c04a2057f4/src/animation/AnimationAction.js

Also heres the regarding sourcecode for an animation action: https://github.com/mrdoob/three.js/blob/ab93512c7a44bd98e669592b3db441c04a2057f4/src/animation/AnimationAction.js

从Blender导出有很多可能的陷阱，尤其是当 使用骨骼网格动画(！=变形).

The Export from Blender has A LOT of possible snares especially when using Skeletal mesh animations (!= morphs).

• 所有骨骼/骨架/网格的比例值应精确为"1"，并且 永远不会再被感动:)
  (关键帧还应仅具有键设置LocRot)
• 导出时应用修改器"按钮总是使我失真
• 在导出时仅选择网格(而不是骨架或骨骼)

• Scale values of all bones / Armature / mesh should be exactly "1" and never ever be touched again :)
  (Keyframes also should only have keying set LocRot)
• "apply modifiers" button while export always caused me distortions
• select only the mesh while exporting (not the armature or bones)

我的导出设置:

my export settings:

希望对未来的探险家有帮助:)

Hope that helps future explorers :)

这篇关于三个JS中的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！