asp 英文企业网站 免费,WordPress发图册,电商是怎么做的,电子商务网站建设合同范本按照行动轨迹移动人物模型并相机视角跟随人物 1. 初始化加载模型2. 开始移动模型3. 人物模型启动4. 暂停模型移动5. 重置模型位置6. 切换区域动画7. 摄像机追踪模型8. 移动模型位置9.动画执行 人物按照上一篇博客所设定的关键点位置#xff0c;匀速移动 1. 初始化加载模型
//… 按照行动轨迹移动人物模型并相机视角跟随人物 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的prevTweenprevTween 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();
