VUE2+THREE.JS 按照行动轨迹移动人物模型并相机视角跟随人物

按照行动轨迹移动人物模型并相机视角跟随人物

  • 1. 初始化加载模型
  • 2. 开始移动模型
  • 3. 人物模型启动
  • 4. 暂停模型移动
  • 5. 重置模型位置
  • 6. 切换区域动画
  • 7. 摄像机追踪模型
  • 8. 移动模型位置
  • 9.动画执行

人物按照上一篇博客所设定的关键点位置,匀速移动

1. 初始化加载模型

// 加载巡航人物模型 callback 动作完成的回调函数
initWalkPerson(callback) {fbxloader("walk").then((obj) => {obj.scale.set(2.5, 2.5, 2.5);obj.name = "person";person = obj;scene.add(obj);//有回调函数 就执行回调函数callback && callback();});
},

2. 开始移动模型

// 开始移动模型
startAnimation() {if (isAnimating) return this.elMessage("当前巡航已开始,请勿多次操作", "error");isAnimating = true;//说明模型已加载完成,无需重复加载,直接执行动画效果if (person) {this.personPositionStart();} else {//人物模型加载完毕后在执行this.initWalkPerson(() => {this.personPositionStart();});}
},

3. 人物模型启动

//人物动画启动
personPositionStart() {personMixer = new THREE.AnimationMixer(person);let AnimationAction = personMixer.clipAction(person.animations[0]);AnimationAction.play();person.position.set(pointArr[0]);scene.getObjectByName("path").material.visible = false; //隐藏行动轨迹动画scene.getObjectByName("person").visible = true;tweenHandlers = [];// 定义速度(单位:单位长度/秒)const speed = 300; // 你可以根据需要调整这个速度值let prevTween = null;let startPos = new THREE.Vector3(...pointArr[0]);for (let i = 1; i < pointArr.length; i++) {// 每次循环设置下一个目标点const endPos = new THREE.Vector3(...pointArr[i]);const newTween = this.createTween(startPos.clone(), endPos, speed);tweenHandlers.push(newTween);if (prevTween) {prevTween.chain(newTween);} else {// 如果是序列中的第一个tween,立即开始动画newTween.start();}// 将此tween存储为下一个tween的'prevTween'prevTween = newTween;// 更新起始点为当前结束点,为下一个循环准备startPos.copy(endPos);}// 开始第一个tween动画if (tweenHandlers.length > 0) {currentTween = tweenHandlers[0];currentTween.start();isAnimating = true;}// 在最后一个Tween结束后执行的动作prevTween.onComplete(() => {// 在动画被标记为完成时才重置位置this.resetPosition();});
},

4. 暂停模型移动

// 暂停模型移动
pauseAnimation() {if (!isAnimating) {this.elMessage("当前巡航未开始", "warning");return;}if (this.isPaused) {// 恢复摄像机状态camera.position.copy(savedCameraPosition);controls.target.copy(savedCameraTarget);controls.update();// 恢复动画tweenHandlers.forEach((tween) => tween.resume());personMixer.timeScale = 1;this.isPaused = false; //设置this.isPaused为falseisAnimating = true;this.elMessage("动画已恢复", "success");this.updateCameraPosition(person, camera, new THREE.Vector3(0, 250, 200));} else {// 保存当前摄像机状态savedCameraPosition = camera.position.clone();savedCameraTarget = controls.target.clone();// 暂停动画tweenHandlers.forEach((tween) => tween.pause());personMixer.timeScale = 0;this.isPaused = true; //设置this.isPaused为truethis.elMessage("动画已暂停", "success");}
},

5. 重置模型位置

// 重置模型位置
resetPosition() {isAnimating = false;this.pauseAnimation();// 将模型从场景中移除scene.getObjectByName("person").visible = false;// 清理动画混合器if (personMixer) {personMixer.uncacheClip(personMixer._actions[0]._clip);personMixer = null;}tweenHandlers.forEach((item) => item.stop());tweenHandlers = [];// 重置动画状态this.isPaused = false;this.tweenArea({ x: -5000, y: 7000, z: 16000 }, { x: 0, y: 0, z: 1 });//显示行动轨迹scene.getObjectByName("path").material.visible = true;
},

6. 切换区域动画

// 切换区域动画
tweenArea(Position, controlsTarget) {// 传递任意目标位置,从当前位置运动到目标位置const p1 = {// 定义相机位置是目标位置到中心点距离的2.2倍x: camera.position.x,y: camera.position.y,z: camera.position.z,};const p2 = {x: Position.x,y: Position.y,z: Position.z,};changeAreaTween = new TWEEN.Tween(p1).to(p2, 1200); // 第一段动画const update = function (object) {camera.rotation.y = (90 * Math.PI) / 180;camera.position.set(object.x, object.y, object.z);controls.target = new THREE.Vector3(controlsTarget.x, controlsTarget.y, controlsTarget.z);// camera.lookAt(lookAt); // 保证动画执行时,相机焦距在中心点controls.enabled = false;controls.update();};changeAreaTween.onUpdate(update);//  动画完成后的执行函数changeAreaTween.onComplete(() => {controls.enabled = true; // 执行完成后开启控制});changeAreaTween.easing(TWEEN.Easing.Quadratic.InOut);changeAreaTween.start();
},

7. 摄像机追踪模型

// 摄像机追踪模型
updateCameraPosition(model, camera, offset) {if (!this.isPaused && isAnimating) {// 添加条件判断const desiredPosition = new THREE.Vector3().copy(model.position).add(offset);camera.position.lerp(desiredPosition, 0.05);camera.lookAt(model.position);}
},

8. 移动模型位置

// 移动模型位置
createTween(startPosition, endPosition, speed) {// 计算起点到终点的距离const distance = startPosition.distanceTo(endPosition);// 使用距离除以速度来计算持续时间const duration = (distance / speed) * 1000; // 持续时间(以毫秒为单位)// 创建并返回一个新的Tween动画return new TWEEN.Tween(startPosition).to({ x: endPosition.x, y: endPosition.y, z: endPosition.z }, duration).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(() => {//相机的相对偏移量,z=-400 在人物模型的后面const relativeCameraOffset = new THREE.Vector3(0, 100, -400);const targetCameraPosition = relativeCameraOffset.applyMatrix4(person.matrixWorld);camera.position.set(targetCameraPosition.x, targetCameraPosition.y, targetCameraPosition.z);//更新控制器的目标为Person的位置const walkerPosition = person.position.clone();controls.target = new THREE.Vector3(walkerPosition.x, 100, walkerPosition.z);// 确保控制器的变更生效controls.update();// 更新模型位置person.position.copy(startPosition);person.lookAt(endPosition);}).onComplete(() => {// 动画完成时,确保模型位置与结束位置相匹配person.position.copy(endPosition);});
},

9.动画执行

全局定义的参数:

let personMixer = null; // 巡航混合器变量
let personClock = new THREE.Clock(); // 巡航计时工具
// 获取巡航时间差
const personDelta = personClock.getDelta();if (personMixer && isAnimating) {personMixer.update(personDelta);
}
TWEEN.update();

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

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

相关文章

我的计算机专业之旅:激情、挑战与无尽可能性

标题&#xff1a;我的计算机专业之旅&#xff1a;激情、挑战与无尽可能性 引言&#xff1a; 回顾过去的三年&#xff0c;我深深感受到计算机专业给我带来的激情、挑战以及无尽的可能性。作为一名大三的计算机专业学生&#xff0c;我想分享一下当初选择这条专业之路的初衷和心…

短信验证码轰炸解决方案二(防止海外ip、限制ip、限制手机号次数解决)

1. 检查IP是否在黑名单中&#xff0c;如果是则终止访问。 2. 检查手机号是否在黑名单中&#xff0c;如果是则终止访问。 3. 对于同一个IP&#xff0c;限制访问次数&#xff0c;如果超过限制则终止访问。 4. 对于同一个手机号&#xff0c;限制访问次数&#xff0c;如果超过限制则…

〖大前端 - 基础入门三大核心之JS篇㊸〗- DOM事件对象的方法

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

高铁乘务员简历12篇

想要在高铁乘务员职位的求职中脱颖而出&#xff0c;顺利进入心仪的高铁乘务员岗位&#xff0c;以下是12篇专业的高铁乘务员个人简历案例&#xff0c;无论您是初入行业的新手还是有一定工作经验的乘务员参考这些简历&#xff0c;让您的求职之路更加顺畅。 高铁乘务员简历模板下…

3D Gaussian Splatting的使用

3D Gaussian Splatting的使用 1 下载与安装2 准备场景样本2.1 准备场景照片2.1.1 采集图片2.1.2 生成相机位姿 3 训练4 展示 1 下载与安装 今年SIGGRAPH最佳论文&#xff0c;学习了一下&#xff0c;果然厉害&#xff0c;具体论文原理就不说了&#xff0c;一搜都有&#xff0c;…

2023年12月5日历史上的今天大事件早读

1377年12月05日明朝第二位皇帝明惠帝朱允炆出生 1408年12月05日金帐汗国军队在亦敌忽率领下进抵莫斯科城下 1492年12月05日欧洲航海家哥伦布第一次踏上伊斯帕尼奥拉岛 1791年12月05日音乐神童莫扎特逝世 1847年12月05日广州黄竹岐人民抗英 1870年12月05日法国著名作家大仲…

第N个泰波那锲数

1.题目解析 动态规划算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 为了填写当前状态的时候&#xff0c;所需要的状态已经计算过了&#xff01;&#xff01;&#xff01; 5.返回值 题目要求 状态表示 ------------------------------------------------------…

vant4 van-tabs和van-popup一起使用样式错误

问题现象&#xff1a;van-cell的宽度被撑出屏幕宽度 今天做一个tab切换页面&#xff0c;偶然发现这个问题&#xff0c;记录一下。 问题背景&#xff1a; 前提是已经定了框架vue3vant4 那么做tab页面首先是用到了van-tabs&#xff0c;然后很自然的给它加了animated属性&#xff…

Cannot read properties of null (reading ‘setAttribute‘)

做项目时候&#xff0c;总是报这个错&#xff0c;参考如下链接解决问题&#xff0c;在此记录下&#xff0c;防止忘记。 报错 Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘)_三水木雨的博客-CSDN博客

【C/PTA —— 14.结构体1(课外实践)】

C/PTA —— 14.结构体1&#xff08;课外实践&#xff09; 一.函数题6-1 选队长6-2 按等级统计学生成绩6-3 学生成绩比高低6-4 综合成绩6-5 利用“选择排序算法“对结构体数组进行排序6-6 结构体的最值6-7 复数相乘运算 二.编程题7-5 一帮一7-6 考试座位号 一.函数题 6-1 选队长…

Git篇如何搭建自己的git仓库

搭建自己的Git仓库需要以下步骤&#xff1a; 安装Git&#xff1a;首先需要在你的计算机上安装Git。你可以从Git官方网站下载并安装适合你操作系统的版本。创建新的Git仓库&#xff1a;在命令行中输入以下命令来创建一个新的Git仓库&#xff1a; mkdir my_project cd my_proje…

51综合程序04-ADC0808与DAC0808的应用

文章目录 一、ADC0808调温报警器1. 简单介绍2. 电路连接图3. 源代码4. 实验效果 二、DAC0808直流电机调速器1. 简单介绍2. 电路连接图3. 源代码4. 实验效果 一、ADC0808调温报警器 1. 简单介绍 ADC0808 是一款 8 位模数转换器&#xff08;Analog-to-Digital Converter&#x…

【教3妹学编程-算法题】到达首都的最少油耗

3妹&#xff1a;“太阳当空照&#xff0c;花儿对我笑&#xff0c;小鸟说早早早&#xff0c;你为什么背上炸药包” 2哥 :3妹&#xff0c;什么事呀这么开发。 3妹&#xff1a;2哥你看今天的天气多好啊&#xff0c;阳光明媚、万里无云、秋高气爽&#xff0c;适合秋游。 2哥&#x…

MybatisPlus中的使用Wrapper自定义SQL

一、条件构造器 条件构造器提供了一种更加简洁和直观的方式来构建复杂的查询条件。它提供了一组静态方法&#xff0c;用于构建各种类型的查询条件&#xff0c;包括等于、不等于、大于、小于、包含等。使用条件构造器可以避免手动拼接SQL语句的麻烦&#xff0c;提高代码的可读性…

解决 Xshell 无法使用 root 账户远程登录 Linux 的问题

文章目录 问题描述问题原因解决办法 笔者出问题时的运行环境&#xff1a; Red Hat Enterprise Linux 9.2 x86_64 Xshell 7 问题描述 笔者在新安装的 Red Hat Enterprise Linux 中发现一个问题。在 RHEL 安装完之后&#xff0c;无法在 Xshell 中使用 root 账户远程登录此 Lin…

Spark---Spark on Hive

1、Spark On Hive的配置 1&#xff09;、在Spark客户端配置Hive On Spark 在Spark客户端安装包下spark-2.3.1/conf中创建文件hive-site.xml&#xff1a; 配置hive的metastore路径 <configuration><property><name>hive.metastore.uris</name><v…

分享70个节日PPT,总有一款适合您

分享70个节日PPT&#xff0c;总有一款适合您 70个节日PPT下载链接&#xff1a;https://pan.baidu.com/s/1IRIKuFoGjQJ14OVkeW_mDQ?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易…

Django回顾【四】之模型层

目录 一、基本使用 1、ORM框架 2、创建表 二、常用和非常用字段 三、常用和非常用字段参数 四、settings配置 五、基本操作 5.1 增加表记录 5.2 删除表纪录 5.3 更新表纪录 5.4 查询表纪录 六、 多表操作-创建关系 七、基于对象的跨表查询 八、基于链表的跨表…

【LeeCode】438.找到字符串中所有字母异位词

给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&#xff09;。 示例 1: 输入: s "cbaebabacd", p "…

服务器数据恢复—ocfs2文件系统被格式化为其他文件系统如何恢复数据?

服务器故障&#xff1a; 由于工作人员的误操作&#xff0c;将Ext4文件系统误装入到存储中Ocfs2文件系统数据卷上&#xff0c;导致原Ocfs2文件系统被格式化为Ext4文件系统。 由于Ext4文件系统每隔几百兆就会写入文件系统的原始信息&#xff0c;原Ocfs2文件系统数据会遭受一定程度…