threejs学习笔记：实现导入的动画gltf模型播放动画

这种方式需要gltf模型本身就带有动画，就是在建模的时候添加了动画，否则是不会生效的

只有一个动作

// 用于收集动画
const clock: THREE.Clock = new THREE.Clock();
const mixers: Array<THREE.AnimationMixer> = [];async function loadWalkRobot() {const { scene: object, animations } = await loadGLTF("/model/robot/scene.gltf");//模型旋转object.rotateY(180 * Math.PI) / 180);object.position.set(0, 0, 0);//【核心在这里】const mixer = new THREE.AnimationMixer(object);const actions = [];for (var i = 0; i < animations.length; i++) {actions[i] = mixer.clipAction(animations[i]);}// 播放actions.forEach((action) => {action.play();});mixers.push(mixer);scene.value?.add(object);}// 渲染const _render = () => {renderer.value!.render(scene.value!, camera.value!);const mixerUpdateDelta = clock.getDelta();mixers.forEach((mixer) => mixer.update(mixerUpdateDelta));// FPS帧率显示渲染typeof stats.value === "function" && stats.value.update();requestAnimationFrame(_render);};

如果有多个动作

提取到一个单独的方法，传入动画名称控制不同的动画

  // 动画的方法const loadAnimate = (mesh: THREE.Mesh | THREE.AnimationObjectGroup | THREE.Group,animations: Array<THREE.AnimationClip>,animationName: string) => {const mixer = new THREE.AnimationMixer(mesh);const clip = THREE.AnimationClip.findByName(animations, animationName);if (!clip) return void 0;const action = mixer.clipAction(clip);// 播放action.play();mixers.push(mixer);};async function loadWalkGirl() {const { scene: object, animations } = await loadGLTF("/model/robot/scene.gltf");object.rotateY(getAngle(180));object.position.set(0, 0, 0);loadAnimate(object, animations, "Take 001");scene.value?.add(object);}
//渲染还是一样的

threejs学习笔记：实现导入的动画gltf模型播放动画相关推荐

ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画
ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画计划时间:第二天下午教程:Pdf/405 数据:ch9/ex3 方法: 1. 创建DEM SA工具箱/插值分析/地形转栅格 2. 生成 ...
android 同根动画_Android（java）学习笔记141：Android下的逐帧动画（Drawable Animation）...
1. 帧动画: 帧动画顾名思义,一帧一帧播放的动画就是帧动画. 帧动画和我们小时候看的动画片的原理是一样的,在相同区域快速切换图片给人们呈现一种视觉的假象感觉像是在播放动画,其实不过是N张图片在一帧一 ...
OPENMP学习笔记（1）——简介，模型，运行
OPENMP学习笔记(1)--简介,模型,运行简介: OpenMP的英文全称是Open Multiprocessing,一种应用程序接口(API,即Application Program Inter ...
学习笔记【Java 虚拟机④】内存模型
若文章内容或图片失效,请留言反馈.部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 总目录学习笔记[Java 虚拟机①]内存结构学习笔记[Java 虚拟机②]垃圾回收学习笔记[Java ...
Unity animator不剪辑动画实现分段播放动画
public Animator anim;private AnimatorStateInfo animInfo; /// <summary>/// 控制动画暂停和播放/// </su ...
Threejs学习笔记
Three.js Three.js 学习笔记,来自: https://gitchat.csdn.net/columnTopic/5b320731bebc3c4bd7e725cb?utm_source= ...
Three-js 学习笔记（2）——几何体
1,安装three npm install --s three 2,渲染几何图形 (1)添加vue元素 <template><div class="geometry_01& ...
Cesium学习笔记（五）：3D 模型（http://blog.csdn.net/umgsoil/article/details/74572877）
Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加还记得我们在实体添加的时候添 ...
深度学习笔记第五门课序列模型第三周序列模型和注意力机制
本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...

threejs学习笔记：实现导入的动画gltf模型播放动画

只有一个动作

如果有多个动作

threejs学习笔记：实现导入的动画gltf模型播放动画相关推荐

最新文章

热门文章