Three.js加载FBX模型并解析骨骼动画

news2024/11/23 9:09:42

通过Threejs先加载一个.FBX格式的三维模型文件,然后解析该文件中的骨骼动画信息。 

FBX

加载器FBXLoader.js

<!-- 引入fbx模型加载库FBXLoader -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/FBXLoader.js"></script>
<!-- 辅助文件 -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/libs/inflate.min.js"></script>

加载fbx模型文件

加载模型文件,加载完成后,如果模型显示位置不符合要求,可以通过Threejs程序进行平移、缩放等操作。

var loader = new THREE.FBXLoader();//创建一个FBX加载器
loader.load("SambaDancing.fbx", function(obj) {
  console.log(obj);//查看加载后返回的模型对象
  scene.add(obj)
  // 适当平移fbx模型位置
  obj.translateY(-80);
})

查看FBX模型帧动画数据

stl、obj都是静态模型,不可以包含动画,fbx除了包含几何、材质信息,可以存储骨骼动画等数据。

解析之前可以先在浏览器控制台查看动画相关的数据是如何存储的。可以看到obj.animations属性的数组包含两个剪辑对象AnimationClip,obj.animations[0]对应剪辑对象AnimationClip包含多组关键帧KeyframeTrack数据,obj.animations[1]对应的剪辑对象AnimationClip没有关键帧数据,也就是说没有关键帧动画。具体的开发中,可能提供的模型有很多包含关键帧动画的剪辑对象AnimationClip,可以根据自己的需要解析某个剪辑对象AnimationClip对应的动画。

执行第一个

解析fbx模型骨骼动画 

var mixer=null;//声明一个混合器变量
var loader = new THREE.FBXLoader();//创建一个FBX加载器
loader.load("SambaDancing.fbx", function(obj) {
  // console.log(obj)
  scene.add(obj)
  obj.translateY(-80);
  // obj作为参数创建一个混合器,解析播放obj及其子对象包含的动画数据
  mixer = new THREE.AnimationMixer(obj);
  // 查看动画数据
  console.log(obj.animations)
  // obj.animations[0]:获得剪辑对象clip
  var AnimationAction=mixer.clipAction(obj.animations[0]);
  // AnimationAction.timeScale = 1; //默认1,可以调节播放速度
  // AnimationAction.loop = THREE.LoopOnce; //不循环播放
  // AnimationAction.clampWhenFinished=true;//暂停在最后一帧播放的状态
  AnimationAction.play();//播放动画
})

 需要注意,在渲染函数中需要更新混合器mixer相关的时间,不然动画不会生效

var clock = new THREE.Clock();
// 渲染函数
function render() {
  renderer.render(scene, camera); 
  requestAnimationFrame(render);

  if (mixer !== null) {
    //clock.getDelta()方法获得两帧的时间间隔
    // 更新混合器相关的时间
    mixer.update(clock.getDelta());
  }
}
render();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/579864.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux源码包的安装与升级

文章目录 Linux源码包的安装与升级什么是源代码、编译器与可执行文件什么是函数库什么是make与configure什么是Tarball的软件如何安装与升级软件 Linux源码包的安装与升级 如果你想在自己的Linux服务器上运行网站&#xff0c;就需要安装一个Web服务器软件&#xff0c;否则无法…

测试工程师 | 测试基础知识点速查

文章目录 1. 测试介绍2. 测试的分类2.1 按照测试阶段划分&#xff08;4种&#xff09;2.2 按照代码可见度划分&#xff08;3种&#xff09;2.3 是否运行代码&#xff08;2种&#xff09;2.4 是否按照自动化&#xff08;2种&#xff09;2.5 其它测试&#xff08;4种&#xff09;…

深入篇【C++】CC++内存管理:new/delete底层原理剖析+思维导图总结

深入篇【C】C&C内存管理&#xff1a;new/delete底层原理剖析思维导图总结 Ⅰ.C/C内存分布Ⅱ.C的内存管理Ⅲ.C的内存管理①.new/delete操作内置类型总结&#xff1a; ②.new/delete操作自定义类型总结: ③.operator new与operator delete总结&#xff1a; ④.new/delete底层…

【C++String类使用】万字详解保姆级教学,手把手教你使用string类。

string类的使用 什么是string类&#xff1f;string构造string();string (const char* s);string (const string& str);string (const string& str, size_t pos, size_t len npos);string (const char* s, size_t n);string (size_t n, char c);template < class In…

《The Element of Style》阅读笔记 —— 章节 III A Few Matters of Form

前言&#xff1a;本篇为书籍《The Element of Style》第三章的阅读笔记。 本书电子版链接&#xff1a;http://www.jlakes.org/ch/web/The-elements-of-style.pdf 章节 I Elementary Rules of Usage 阅读笔记&#xff1a;链接章节 II Elementary Principles of Composition 阅读…

JavaScript进阶之路(一)初学者的开始

一&#xff1a;写在前面的问题和话 一个javascript初学者的进阶之路&#xff01; 背景&#xff1a;3年后端&#xff08;ASP.NET&#xff09;工作经验&#xff0c;javascript水平一般般&#xff0c;前端水平一般般。学习资料&#xff1a;犀牛书。 如有误导&#xff0c;或者错…

Git日常使用技巧 - 笔记

Git日常使用技巧 - 笔记 Git是目前世界上最先进的分布式版本控制系统 学习资料 廖雪峰 学习视频 https://www.bilibili.com/video/BV1pX4y1S7Dq/?spm_id_from333.337.search-card.all.click&vd_source2ac127043ccd79c92d5b966fd4a54cd7 Git 命令在线练习工具 https://l…

多线程 -- Thread类的基本用法

本篇重点 什么是变量捕获?? 有关线程的操作 线程创建线程中断线程等待线程休眠获取线程实例目录 1. 线程创建2. 线程中断变量捕获 线程的六种状态NEW 状态TERMNATED 状态RUNNABLE 就绪状态TIMED_WAITING 状态 1. 线程创建 关于线程的创建看上篇博客, 里面为线程的创建提供…

数据库事务到底是什么?

目录 场景&#xff08;两个用户之间进行转账操作&#xff09;&#xff1a; 需要的操作步骤&#xff1a; 事务 事务的四大特性&#xff1a; 一、原子性 &#xff08;1&#xff09;什么是回滚操作 &#xff08;2&#xff09;数据库恢复操作&#xff0c;如何知道数据恢复如初…

C++ Stack&queue&deque

C Stack&#xff06;queue&#xff06;deque &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;C &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容主要讲解了栈和…

如何在华为OD机试中获得满分?Java实现【字符串通配符】一文详解!

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: Java华为OD机试真题&#xff08;2022&2023) 文章目录 1、题目描述2、输入描述3、输出描述…

Rust 笔记:Rust 语言中应用正则表达式

Rust 笔记 Rust 语言中应用正则表达式 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263?spm1001.2101.3001.5343 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/…

【Linux】线程详解之线程互斥与同步

文章目录 Linux线程互斥一、进程线程间的互斥相关概念1.临界资源和临界区2.互斥和原子性 二、互斥量mutex1.抢票程序是否引入互斥量现象观察2.抢票程序原理分析3.互斥量的接口4. 加锁后的程序5.互斥量原理探究 可重入VS线程安全一、概念1.线程安全2.重入 二、常见的线程不安全的…

【P37】JMeter 仅一次控制器(Once Only Controller)

文章目录 一、仅一次控制器&#xff08;Once Only Controller&#xff09;参数说明二、测试计划设计2.1、测试计划一2.1、测试计划二 一、仅一次控制器&#xff08;Once Only Controller&#xff09;参数说明 可以让控制器内部的逻辑只执行一次&#xff1b;单次的范围是针对某…

Spring Authorization Server 系列(一)环境搭建

Spring Authorization Server 中的scope参数解析 前提依赖版本问题确定Spring Boot 版本确定 Spring Authorization Server 版本最终的依赖 第一个 Spring Authorization Server Demo 前提 由于 Spring 最新的 OAuth2 解决方案 已经由 Spring Security 下的 OAuth2 模块独立出…

从零开始学习JavaScript:轻松掌握编程语言的核心技能①

从零开始学习JavaScript&#xff1a;轻松掌握编程语言的核心技能 一&#xff0c;JavaScript 简介为什么学习 JavaScript?JavaScript 用法 二&#xff0c;JavaScript 输出JavaScript 显示数据JavaScript&#xff1a;直接写入 HTML 输出流 三&#xff0c;JavaScript 语法JavaScr…

VS2022发布独立部署的.net程序

.net core支持依赖框架部署和独立部署两种方式&#xff0c;之前学习时是在VSCode中使用dotnet命令发布的。但是在VS2022中却不知道该如何设置。以获取PDF文件使用字体的项目为例&#xff0c;VS2022中默认编译的是依赖框架部署方式&#xff08;编译的结果如下图所示&#xff09;…

Android进阶 View事件体系(三):典型的滑动冲突情况和解决策略

Android进阶 View事件体系&#xff08;三&#xff09;&#xff1a;典型的滑动冲突情况和解决策略 内容概要 本篇文章为总结View事件体系的第三篇文章&#xff0c;前两篇文章的在这里&#xff1a; Android进阶 View事件体系&#xff08;一&#xff09;&#xff1a;概要介绍和实…

Oracle——数据操纵DML(一)

STU1 1、不指定字段的整行插入 在STU1中新增一名同学的基本信息&#xff0c;SQL如下&#xff1a; INSERT INTO test.stu1 VALUES(0001,牛牛,男,24,to_date(1988-05-25,YYYY-MM-DD),12外语)格式如下&#xff1a; INSERT INTO 表名 VALUES(值1,值2,...,值n)对于CHAR或VARCHAR等…

sql-labs SQL注入平台——第二关Less-2 GET - Error based - Intiger based (基于错误的GET整型注入)

Less-2 GET - Error based - Intiger based (基于错误的GET整型注入) 一、先确认漏洞是否存在 &#xff08;1&#xff09;查询 id1返回查询结果正常 &#xff08;2&#xff09;查询 id1’返回查询结果报错&#xff0c;可能存在SQL注入 &#xff08;3&#xff09;查询 id1 …