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

那么这是为什么呢。

因为要在你的循环中加入

Three.js加载动画模型并控制播放相关推荐

three.js加载obj模型键盘控制模型局部动作
先贴上我前无古人后无来者的宇宙无敌搅拌机我想用键盘控制框框中各部分分别有各自的动作,我这模型虽然是简单几何体堆积的,但是这是在blender里制作了模型,导出obj格式的模型再导进页面的,主要是测试 ...
three.js加载OBJ模型
three.js加载OBJ模型推荐一个免费下载3D模型的网址https://www.cgtrader.com,包含多种格式(obj, mtl等). three.js现在是es6语法,旧版本是es5的 ...
three相机在模型上_Three.js加载外部模型的教程详细解说
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 ...
Three.js加载外部模型骨骼动画
加载外部模型骨骼动画上节课是通过Threejs程序创建一个骨骼动画然后解析播放,本节课是加载解析一个外部的骨骼动画模型文件. 查看骨骼动画数据在解析模型骨骼动画之前,先加载外部的三维模型,查看骨骼 ...
vue使用three.js加载.FBX模型文件
1.需要安装的依赖 //three依赖yarn add three//tween.js依赖yarn add @tweenjs/tween.js 2. 封装组件 draw.vue 放在component ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
three.js 加载gltf模型的简化demo
目录前言下载依赖改造插件主要代码效果前言最近需要做一个three.js加载三维模型的,才发现three.js的官网和网上的示例挺乱的.甚至有人说把three.js的全部demo下载下来, ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...
three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包安装three.js使用npm install three --save 安装加载obj和mtl文件的包npm install three-obj-mtl ...

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

Three.js加载动画模型并控制播放相关推荐

最新文章

热门文章