Three.js加载动画模型并控制播放

Three.js支持多种3D模型格式的文件加载。本例中我们以fbx文件为例。

首先当然是加载模型了。

    loader.load("fbx/Naruto.fbx", function (mesh) {
        scene.add(mesh);
    }

以上代码为加载模型并添加到场景中。

这是一个多动画的模型。那么首先我们先获取它到底有多少个动作动画。

        //  AnimationMixer 动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。
        mixer = new THREE.AnimationMixer( mesh );
        console.log(mesh.animations.length);

这里输出的是28.那么就是说这个模型有28个动画动作。

现在我们来播放第一个动作动画

        //  clipAction 返回所传入的剪辑参数的AnimationAction, 根对象参数可选，默认值为混合器的默认根对象。
        //  第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。
        mixer.clipAction( mesh.animations[ 0] ).play();

当你兴高采烈的localhost测试的时候发现。我擦。好像并没有出现想像中的画面。

那么这是为什么呢。

因为要在你的循环中 加入