最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Animation in THREE JS - Stack Overflow

programmeradmin0浏览0评论

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:

Code:

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

mixer.update( 1000 );

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./file/etv0sl

Code:

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

mixer.update( 1000 );
Share Improve this question asked Oct 29, 2015 at 14:38 Sergei IvankovSergei Ivankov 531 silver badge3 bronze badges 2
  • I'm trying to find solution too, but seem that THREE JS is missing api.. :( – Esa Hannila Commented Oct 30, 2015 at 2:29
  • @Sergei Ivankov mark my answer if you think its the solution? Im young and I need the Rep :)) – Martin Eckleben Commented May 12, 2017 at 8:30
Add a ment  | 

2 Answers 2

Reset to default 7

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 );

}

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).

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

Got my infos from http://yomotsu/blog/2015/10/31/three-r73-anim.html

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

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

  • 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 :)

This:

if(typeof mixer != "undefined") mixer.update(delta);

Should be this

if(typeof mixer !== "undefined") mixer.update(delta);
发布评论

评论列表(0)

  1. 暂无评论