当前位置: 首页 > news >正文

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.lryc.cn/news/252679.html

相关文章:

  • Hadoop YARN组件
  • Java架构师技术架构路线
  • guacamole docker一键部署脚本
  • 蓝桥杯算法心得——想吃冰淇淋和蛋糕(dp)
  • LLM之RAG实战(二):使用LlamaIndex + Metaphor实现知识工作自动化
  • 【容器】Docker打包Linux操作系统迁移
  • redis基本数据结构
  • Learning Normal Dynamics in Videos with Meta Prototype Network 论文阅读
  • Unity 关于SpriteRenderer 和正交相机缩放
  • HarmonyOS应用开发者基础认证考试(98分答案)
  • Ubuntu20.04 Kimera Semantic运行记录
  • 服务器RAID系统的常见故障,结合应用场景谈谈常规的维修处理流程
  • 计算机网络——数据链路层-封装成帧(帧定界、透明传输-字节填充,比特填充、MTU)
  • MySQL笔记-第03章_基本的SELECT语句
  • FTP服务文件上传失败,错误码553的排故过程
  • 音频录制软件哪个好?帮助你找到最合适的一款
  • 9.Unity搭建HTTP服务器
  • C# 热键注册工具类
  • nodejs微信小程序+python+PHP天天网站书城管理系统的设计与实现-计算机毕业设计推荐
  • Hive环境准备[重点学习]
  • 软件工程 室友整理
  • JVM==>图解字节码指令
  • MISRA C 2012 标准浅析
  • Redis高可用之Sentinel哨兵模式
  • AI “自主运行”的计算机概念正逐渐成为现实
  • 数据库系统概论期末经典大题讲解(用关系代数进行查询)
  • 算法通关村第十六关-黄金挑战滑动窗口与堆的结合
  • 基于jsp的搜索引擎
  • 【Altium designer 20】
  • Proteus仿真--基于1602LCD与DS18B20设计的温度报警器