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

最新推荐文章于 2024-08-09 09:38:32 发布

人工智能-肥鹅

最新推荐文章于 2024-08-09 09:38:32 发布

阅读量1.1w

点赞数 3

分类专栏： three.js 文章标签：加载模型动画控制模型播放 three.js加载fbx

本文链接：https://blog.csdn.net/kfyzjd2008/article/details/87000788

版权

这篇博客介绍了如何使用Three.js库加载fbx格式的3D模型，并控制模型的动画播放。首先，展示了加载模型并将其添加到场景中的代码，接着解释了如何获取模型的动画数量，然后演示了播放第一个动画的步骤。需要注意的是，模型的动画需要在渲染循环中更新才能正常显示。

摘要由CSDN通过智能技术生成

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测试的时候发现。我擦。好像并没有出现想像中的画面。

那么这是为什么呢。

因为要在你的循环中加入