人物按照上一篇博客所设定的关键点位置，匀速移动
文章来源：https://www.toymoban.com/news/detail-830832.html
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为false
isAnimating = 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为true
this.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.动画执行
全局定义的参数：文章来源地址https://www.toymoban.com/news/detail-830832.html
let personMixer = null; // 巡航混合器变量
let personClock = new THREE.Clock(); // 巡航计时工具
// 获取巡航时间差
const personDelta = personClock.getDelta();
if (personMixer && isAnimating) {
personMixer.update(personDelta);
}
TWEEN.update();
到了这里，关于VUE2+THREE.JS 按照行动轨迹移动人物模型并相机视角跟随人物的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
