一、模型动画导入

        在3dmax中制作好动画，导出为.fbx格式，动画也要导出；利用以下代码导入网页中。

loader.load('models/animation01.FBX', function(object) {
        object.rotateX(Math.PI / 2);
        object.position.x += 3900;
        object.position.z -= 100;
        console.log(object);
        mixer = new THREE.AnimationMixer(object);
        action = mixer.clipAction(object.animations[0]);
        console.log(object);
        // action.play();
        object.traverse(function(child) {
            if (child.isMesh) {
                child.castShadow = true;
                // child.receiveShadow = true;
            }

        });
        scene.add(object);
    });

        同时mixer要一直刷新

function animate() {
    requestAnimationFrame(animate);
    var delta = clock.getDelta();
    if (mixer) mixer.update(delta);
    renderer.render(scene, camera);
    stats.update();
    update();
}

        示例模型的对象结构如下：

图1 对象控制台输出

二、动画的播放控制

        首先需要制作两个button，添加到页面上，然后控制action的paly或者stop即可。

function animatePlay(index) {
    switch (index) {
        case 1:
            action.play();
            break;
        case 0:
            action.stop();
            break;
        default:
            alert("不存在");
    }
}

图2 动画控制界面

三、总结

图3 动画控制.gif

        建模大佬今天不在，自己第一次做的，这动画做的很不美观也不符合逻辑，等建模大佬回来了，做几个好看的同时导入控制看看效果，今天在摸鱼，更新的也比较早。