具有 Three.js 动画的多个不同 Collada 场景将不起作用答案

【问题标题】：Multiple different Collada scenes with Three.js animation won't work具有 Three.js 动画的多个不同 Collada 场景将不起作用
【发布时间】：2013-04-18 15:07:58
【问题描述】：

我有多个 Collada 格式的模型（knight.dae 和 archer.dae）。我的问题是我无法让它们全部制作动画（假设空闲为 2-3 帧）。当我加载场景时，我要么只得到一个动画模型和一个 stil 模型（没有动画，什么都没有，就像他在 3ds max 中建模一样）。我知道我的问题在于皮肤和变形，但我搜索了很多并没有找到答案，由于我缺乏经验，我的尝试到目前为止都失败了。请帮忙！

//animation length of the model is 150(and it hosts 4 different animations)
var startFrame = 0, endFrame = 150, totalFrames = endFrame - startFrame, lastFrame;
var urls = [];
var characters = [];
urls.push('3D/archer/archer.dae');
urls.push('3D/archer/archer.dae');
//here's the loader
loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        for (var i=0;i<urls.length;i++) {                           
        loader.load(urls[i],function colladaReady( collada ){
            player = collada.scene;
            player.scale.x = player.scale.y = player.scale.z =10;
            player.position.y=115;
            player.position.z=i*200;
            player.updateMatrix()
            skin = collada.skins [ 0 ];
            //skinArray.push(skin);;
        var mesh=new THREE.Mesh(new THREE.CubeGeometry(10,20,10,1,1,1));
        player.add(mesh);
        characters.push(mesh);
        scene.add( player );
            });
        }
//i added the cube because i use raycaster and it doesnt detect collada obj


// Here is where i try my animation.
        function animate() {
        requestAnimationFrame( animate );
        render();

    }
        function render() {
        update();
        renderer.render(scene,camera);

    }
    function update() {
        var delta = clock.getDelta();
        delta = delta / 2;      
        if ( t > 1 ) t = 0;
        if ( skin )
            {
        skin.morphTargetInfluences[lastFrame] = 0;
        var currentFrame = startFrame + Math.floor(t*totalFrames);
        skin.morphTargetInfluences[currentFrame] = 1;
        t += delta;
        lastFrame = currentFrame;
        }
    }

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

在开头尝试这样的事情....：

var skins = [];

在您的 collada 回调中，您似乎已经想到了一些事情：

skins.push(collada.skins[0]);

在您的渲染器中，而不是当前的 if (skin) 子句：

t += delta;
lastFrame = currentFrame;
var currentFrame = startFrame + Math.floor(t*totalFrames);

for (var i = 0; i < skins.length; i++) {
  var skin = skins[i];
  if (skin) {
    skin.morphTargetInfluences[lastFrame] = 0;
    skin.morphTargetInfluences[currentFrame] = 1;
  }
}

重点是，您需要在 update() 函数中循环所有皮肤。我没有非常仔细地检查帧处理代码，因为这不是问题。如果你的皮肤有不同数量的帧，你需要在你的代码中考虑这些（也许将 lastFrame、currentFrame 等变量设置为匹配的数组皮肤数组）。

【讨论】：

谢谢你的回答，但不幸的是它没有用，如果我使用你的代码我的模型变形怪异（缩放大而不是正确的动画）。

【解决方案2】：

        if ( skinArray[0] && skinArray[1] )
        {
        skinArray[0].morphTargetInfluences[lastFrame] = 0;
        skinArray[1].morphTargetInfluences[lastFrame] = 0;
        var currentFrame = startFrame + Math.floor(t*totalFrames);
        skinArray[0].morphTargetInfluences[currentFrame] = 1;
        skinArray[1].morphTargetInfluences[currentFrame] = 1;
        t += delta;
        lastFrame = currentFrame;
        }

我想出了这段代码，它可以完成工作，但我只是不喜欢它，主要是因为它感觉它是硬编码的。所以如果你们中的任何一个人能想出一个更优雅的解决方案，我会更多开心。

【讨论】：