从带有 collada 的搅拌机导出时，动画材质颜色在 three.js 中不起作用

Question

我正在尝试模拟物体上闪烁的灯光，因此我正在为材质颜色设置动画。然后我通过 collada 导出器将搅拌机模型导出到 three.js。

为了演示这个问题，我创建了一个带有单个立方体的模型，我将颜色从红色变为绿色，然后再变为红色。我也稍微移动了立方体。

在第 0 帧，我将立方体设置为红色，没有位移：

在第 12 帧，我将其设为绿色并稍微移动一下：

当我在搅拌机中播放动画时，我看到颜色发生了变化，并且立方体发生了位移。但是，当我使用 collada 将其导出到 three.js 中时，立方体会移动，但它会保持一种颜色（在我导出它时处于活动状态的立方体的颜色，例如它可以是红色或绿色，但总是 一个颜色）。我有created a plunker 证明了这个问题。我的 collada 代码基于 three.js collada pump 示例。这是用于加载模型的代码：

  factory.loadColladaModel = function () {
    console.log(`now in loadColladaModel`);
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;

    var promise = new Promise( (resolve, reject) => {
      loader.load( 'color_animation.dae', (collada) => {
        console.log(`now in collada load closure`);

        let model = collada.scene;
        factory.scene.add(model);
        factory.animations = collada.animations;
        model.scale.x = model.scale.y = model.scale.z = 5.0;

        for ( var i = 0; i < factory.animations.length; ++i ) {
          var animation = factory.animations[ i ];

          var kfAnimation = new THREE.KeyFrameAnimation( animation );
          kfAnimation.timeScale = 1;
          factory.kfAnimations.push( kfAnimation );
        }

        resolve('loaded');
      })
    })

    return promise;
  }

为了让 three.js 为材质（颜色）变化和运动设置动画，我需要做什么？我确实在 collada 文件的“动画”标签下看到了颜色条目，所以我认为 collada 支持它。我看到了这个prior question，有人必须设置 morphTargets 才能让材料工作。我也需要做这样的事情吗？ morphTargets 仅用于运动，还是也用于颜色？

三个.js r84 搅拌机 2.78b

非常感谢。

Answer 1

它基本上看起来像three.js ColladaLoader根本不支持材质动画（它只支持位置和旋转动画）。我通过查看 collada 加载程序返回的原始数据结构来确定这一点。注意对应位置动画的Object 0有sids（字符串ids）和keys等。Object 1对应于材质动画，没有sids或keys。虽然材质动画数据在原始 collada 文件中，但 ColladaLoader 解析器根本不读取它，因此没有颜色动画。

显然，每个 mrdoob 的 Collada 加载程序是 "kind of deprecated"（截至 2016 年 5 月）。有一个 ColladaLoader2，它应该是 ColladaLoader 的下一个版本，但我试过了，它似乎根本不支持任何动画。我一直在阅读collada loader，确实它是一种老化的格式，就未来的增长而言，基本上看起来它是一个死胡同（？）

不幸的是，我尝试了 obj、json 和 stl 加载器，而 collada 加载器是迄今为止最好的。我目前正在研究 gltf 格式，它基本上看起来像是下一代 collada（例如，来自 Khronos 组的新的和改进的版本）。我发现this discussion 非常有用。基本上，几年前有一个 three.js 用户编写了自己的 ColladaLoader，但后来他放弃了 Collada，现在支持 glTF。

更新：我尝试了 GLTFLoader 和 GLTF2Loader 加载器，但不幸的是，它们在半复杂场景（包含 20 个对象和 310 个面的场景）上失败了。不过，它看起来像是一种很有前途的格式。我只是认为在测试导出器和测试加载器之间，目前还不太稳定。当我用一个简单的立方体进行测试时，我几乎可以让动画使用这种格式（虽然不是材质动画）。

看来我现在只能留在 Collada 上，只用 javascript 制作材质动画。