Three.js用动画克隆FBX

时间:2018-06-11 07:11:42

标签: animation three.js fbx

我似乎无法在保留动画关键帧的同时克隆FBX模型(从Mixamo下载的FBX)。

尝试过多种方法,包括使用cloneFbx要点(包含在下面的例子中);一切都无济于事。即使将整个FBXLoader()函数放在循环中也不会按预期工作,因为一次只有一个模型会动画。

此问题已部分解决here,但我似乎无法“复制”动画序列,如答案所示。

有谁可以指出我哪里出错?

这是我的一项测试的粗略示例:

加载fbx模型并存储动画:

var loader = new THREE.FBXLoader();
  loader.load( 'models/Walking.fbx', function ( fbx ) {
    clip = fbx.animations[ 0 ];

    // createVehicle(fbx); // Works! Creates one animated model via FBX

    // cloneFbx via: https://gist.github.com/kevincharm/bf12a2c673b43a3988f0f171a05794c1
    for (var i = 0; i < 2; i++) {
      const model = cloneFbx(fbx);
      createVehicle(model);
    }
  });

根据存储的剪辑添加混音器和动作,将模型添加到场景中:

function createVehicle(model){
  model.mixer = new THREE.AnimationMixer( model );
  mixers.push( model.mixer );

  var action = model.mixer.clipAction( clip );
  action.play();

  model.traverse( function ( child ) {
    if ( child.isMesh ) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });

  const x = Math.random() * groundSize - groundSize/2;
  const z = Math.random() * groundSize - groundSize/2;
  model.position.set(x, 0, z);

  const vehicle = new Vehicle(model, x, z);
  vehicles.push(vehicle);

  scene.add( model );
}

动画周期:

if ( mixers.length > 0 ) {
        for ( var i = 0; i < mixers.length; i ++ ) {
      mixers[ 0 ].update( clock.getDelta() );
        }
    }

1 个答案:

答案 0 :(得分:0)

无法找到一个优雅的解决方案。我能想到的最好的方法是创建一个带有加载序列的循环;这非常慢(因为每次都必须解析FBX。)

这里的关键是让动画混音器将动画对象控制为一组,而不是为每个动画对象创建一个混音器。

如果有人能找到更好的解决方案,我会非常热衷于听到它(可能正确使用cloneFbx脚本)。

创建混音器,加载FBX:

  // Create mixer to run animations
  mixer = new THREE.AnimationMixer( scene );

  // Load fbx
  var loader = new THREE.FBXLoader();
  for (var i = 0; i < 5; i++) {
    loader.load( 'models/Walking.fbx', function ( fbx ) {
      mixer.clipAction( fbx.animations[ 0 ], fbx )
          .startAt( - Math.random() )
          .play();

      createVehicle(fbx);
    });
  }

创建类实例,添加到场景:

function createVehicle(model){

  const x = Math.random() * groundSize - groundSize/2;
  const z = Math.random() * groundSize - groundSize/2;
  model.position.set(x, 0, z);

  const vehicle = new Vehicle(model, x, z);
  vehicles.push(vehicle);

  scene.add( model );
}

绘制周期:

mixer.update( clock.getDelta() );