Three.js克隆带动画的FBX

Question

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

尝试了许多方法，包括使用cloneFbx代码片段（在下面的示例中包含）；但都没有成功。即使将整个FBXLoader()函数放在循环内部也不能按预期工作，因为只有一个模型会一次性进行动画。

这个问题已经在这里得到了部分解决，但是我似乎无法像答案建议的那样“复制”动画序列。

有人能指出我哪里做错了吗？

这是我测试的一个粗略示例：

加载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() );
        }
    }

- Ryan Achten

---

执行似乎在 var action = model.mixer.clipAction( clip ); 处停止。我不知道为什么会这样，因为动画剪辑似乎包含了适当的信息： {name: "mixamo.com", tracks: Array(53), duration: 2.4666666984558105, uuid: "5380AF34-4DB3-4BA1-AB0C-7BF2CE95EB7B"}。 - Ryan Achten

Answer 1

我无法想出一个优雅的解决方案。我能想到的最好的方法是创建一个循环，并在其中放置加载序列；这非常慢（因为每次都必须解析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() );

- Ryan Achten

Answer 2

我发现SkeletonUtils.clone（）对我很有效。 https://threejs.org/docs/index.html#examples/en/utils/SkeletonUtils.clone

- Damjan Pavlica