仿黑神话悟空跑动-脚下波纹特效（键盘wasd控制走动）

news/2024/9/24 20:31:56/

vue使用three.js实现仿黑神话悟空跑动-脚下波纹特效

玩家角色的正面始终朝向鼠标方向，且在按下 W 键时，玩家角色会朝着鼠标方向前进

空格建跳跃

<template><div ref="container" class="container" @click="onClick" @mousedown="onMouseDown"></div>
</template><script>
import * as THREE from 'three';
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';
import TWEEN from '@tweenjs/tween.js';
export default {name: 'WaterRipple',data() {return {scene: null,camera: null,renderer: null,player: null,clock: new THREE.Clock(),rippleMaterial: null,ripples: [],controls: null,moveForward: false,moveBackward: false,moveLeft: false,moveRight: false,velocity: new THREE.Vector3(),canJump: true,attackReady: true,playerHealth: 100,npcHealth: 100,npcList: [],npcMoveDirection: new THREE.Vector3(),direction: new THREE.Vector3(),};},mounted() {this.init();this.animate();document.addEventListener('keydown', this.onDocumentKeyDown, false);document.addEventListener('keyup', this.onDocumentKeyUp, false);},beforeDestroy() {document.removeEventListener('keydown', this.onDocumentKeyDown, false);document.removeEventListener('keyup', this.onDocumentKeyUp, false);window.removeEventListener('resize', this.onWindowResize, false);if (this.controls) {this.controls.dispose();}},methods: {init() {// 创建场景this.scene = new THREE.Scene();// 创建相机this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);this.camera.position.set(0, 15, -20);this.camera.lookAt(0, 0, 0);// 创建渲染器this.renderer = new THREE.WebGLRenderer();this.renderer.setSize(window.innerWidth, window.innerHeight);this.$refs.container.appendChild(this.renderer.domElement);// 创建PointerLockControlsthis.controls = new PointerLockControls(this.camera, this.renderer.domElement);this.scene.add(this.controls.getObject());// 创建平面const geometry = new THREE.PlaneGeometry(200, 200, 32, 32);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });const plane = new THREE.Mesh(geometry, material);plane.rotation.x = -Math.PI / 2;this.scene.add(plane);// 创建玩家this.createPlayer();// 创建NPCthis.createNPCs();// 窗口调整window.addEventListener('resize', this.onWindowResize, false);},createPlayer() {// 创建头部const headGeometry = new THREE.SphereGeometry(1, 32, 32);const headMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });const head = new THREE.Mesh(headGeometry, headMaterial);head.position.set(0, 2.5, 0);// 创建眼睛const eyeGeometry = new THREE.EllipseCurve(0, 0, 0.2, 0.4, 0, 2 * Math.PI, false, 0);const eyeShape = new THREE.Shape(eyeGeometry.getPoints(50));const eyeExtrudeSettings = { depth: 0.05, bevelEnabled: false };const eyeGeometry3D = new THREE.ExtrudeGeometry(eyeShape, eyeExtrudeSettings);const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });const leftEye = new THREE.Mesh(eyeGeometry3D, eyeMaterial);const rightEye = new THREE.Mesh(eyeGeometry3D, eyeMaterial);leftEye.position.set(-0.4, 2.9, 0.9);leftEye.rotation.set(Math.PI / 2, 0, 0);rightEye.position.set(0.4, 2.9, 0.9);rightEye.rotation.set(Math.PI / 2, 0, 0);// 创建鼻子const noseGeometry = new THREE.CircleGeometry(0.2, 32);const noseMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });const nose = new THREE.Mesh(noseGeometry, noseMaterial);nose.position.set(0, 2.6, 0.95);nose.rotation.set(Math.PI / 2, 0, 0);// 创建嘴巴const mouthShape = new THREE.Shape();mouthShape.moveTo(-0.5, 0);mouthShape.quadraticCurveTo(0, -0.3, 0.5, 0);const mouthExtrudeSettings = { depth: 0.05, bevelEnabled: false };const mouthGeometry = new THREE.ExtrudeGeometry(mouthShape, mouthExtrudeSettings);const mouthMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });const mouth = new THREE.Mesh(mouthGeometry, mouthMaterial);mouth.position.set(0, 2.3, 0.95);mouth.rotation.set(Math.PI / 2, 0, 0);// 创建上半身const bodyGeometry = new THREE.BoxGeometry(0.5, 3, 0.5);const bodyMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });const body = new THREE.Mesh(bodyGeometry, bodyMaterial);body.position.set(0, 1, 0);// 创建上肢const armMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });const armGeometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-1, 1.5, 0),new THREE.Vector3(-2, 0.5, 0),new THREE.Vector3(1, 1.5, 0),new THREE.Vector3(2, 0.5, 0)]);const arms = new THREE.LineSegments(armGeometry, armMaterial);// 创建下肢const legGeometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-0.25, -0.5, 0),new THREE.Vector3(-0.25, -2, 0),new THREE.Vector3(0.25, -0.5, 0),new THREE.Vector3(0.25, -2, 0)]);const legs = new THREE.LineSegments(legGeometry, armMaterial);// 创建大刀const swordBladeGeometry = new THREE.BoxGeometry(0.2, 5, 0.05);const swordBladeMaterial = new THREE.MeshBasicMaterial({ color: 0xc0c0c0, metalness: 0.9, roughness: 0.2 });const swordBlade = new THREE.Mesh(swordBladeGeometry, swordBladeMaterial);swordBlade.position.set(1, 1, 0);const swordHandleGeometry = new THREE.CylinderGeometry(0.1, 0.1, 1, 32);const swordHandleMaterial = new THREE.MeshBasicMaterial({ color: 0x8b4513 });const swordHandle = new THREE.Mesh(swordHandleGeometry, swordHandleMaterial);swordHandle.position.set(1, 3, 0);const swordGuardGeometry = new THREE.BoxGeometry(0.5, 0.1, 0.1);const swordGuardMaterial = new THREE.MeshBasicMaterial({ color: 0xd4af37 });const swordGuard = new THREE.Mesh(swordGuardGeometry, swordGuardMaterial);swordGuard.position.set(1, 2.5, 0);const sword = new THREE.Group();sword.add(swordBlade);sword.add(swordHandle);sword.add(swordGuard);// 创建玩家组this.player = new THREE.Group();this.player.add(head);this.player.add(leftEye);this.player.add(rightEye);this.player.add(nose);this.player.add(mouth);this.player.add(body);this.player.add(arms);this.player.add(legs);this.player.add(sword);this.player.position.set(0, 2, 0); // 初始高度this.scene.add(this.player);},createNPCs() {for (let i = 0; i < 3; i++) {// 创建与玩家相同的模型const npc = this.player.clone();// 放大NPCnpc.scale.set(5, 5, 5);// 设置颜色为灰色npc.traverse((child) => {if (child instanceof THREE.Mesh) {child.material = child.material.clone();child.material.color.set(0x888888);}});// 随机位置const x = Math.random() * 100 - 50;const z = Math.random() * 100 - 50;npc.position.set(x, 2, z);// 为NPC添加名称npc.name = '张老师'; this.scene.add(npc);this.npcList.push(npc);}},onWindowResize() {this.camera.aspect = window.innerWidth / window.innerHeight;this.camera.updateProjectionMatrix();this.renderer.setSize(window.innerWidth, window.innerHeight);},createRipple(x, z) {const rippleGeometry = new THREE.RingGeometry(0.1, 0.5, 32);const rippleMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 1, wireframe: true });const ripple = new THREE.Mesh(rippleGeometry, rippleMaterial);ripple.position.set(x, 0.1, z);ripple.rotation.x = -Math.PI / 2;ripple.scale.set(1, 1, 1);this.scene.add(ripple);this.ripples.push({ mesh: ripple, startTime: this.clock.getElapsedTime() });},onDocumentKeyDown(event) {switch (event.code) {case 'ArrowUp':case 'KeyW':this.moveForward = true;break;case 'ArrowLeft':case 'KeyA':this.moveLeft = true;break;case 'ArrowDown':case 'KeyS':this.moveBackward = true;break;case 'ArrowRight':case 'KeyD':this.moveRight = true;break;case 'Space':if (this.canJump) {this.velocity.y = 10; // 跳跃速度this.canJump = false;}break;}},onDocumentKeyUp(event) {switch (event.code) {case 'ArrowUp':case 'KeyW':this.moveForward = false;break;case 'ArrowLeft':case 'KeyA':this.moveLeft = false;break;case 'ArrowDown':case 'KeyS':this.moveBackward = false;break;case 'ArrowRight':case 'KeyD':this.moveRight = false;break;}},onClick() {this.controls.lock();},onMouseDown(event) {if (event.button === 0) { // 左键点击this.attack();}},attack() {if (!this.attackReady) return;this.attackReady = false;// 挥刀动作const sword = this.player.children[8]; // 大刀是玩家的子对象const initialRotation = sword.rotation.x;new TWEEN.Tween(sword.rotation).to({ x: initialRotation + Math.PI / 2 }, 200).onComplete(() => {// 恢复原始位置new TWEEN.Tween(sword.rotation).to({ x: initialRotation }, 200).start();}).start();// 检查 NPC 是否在攻击范围内this.npcList.forEach(npc => {const distance = this.player.position.distanceTo(npc.position);if (distance < 10) { // 攻击范围this.npcHealth -= 10;console.log(`${npc.name} Health:`, this.npcHealth);if (this.npcHealth <= 0) {this.scene.remove(npc);}}});// 击退效果this.velocity.y += 5;setTimeout(() => {this.attackReady = true;}, 500); // 攻击冷却时间},npcAttack(player) {if (this.playerHealth <= 0) return;const distance = player.position.distanceTo(this.player.position);if (distance < 10) { // 攻击范围this.playerHealth -= 1;console.log('Player Health:', this.playerHealth);if (this.playerHealth <= 0) {console.log('Game Over');}}},animate() {requestAnimationFrame(this.animate);const delta = this.clock.getDelta();const elapsedTime = this.clock.getElapsedTime();const step = 10 * delta;// 获取控制器方向this.controls.getDirection(this.direction);this.direction.y = 0; // 保持水平朝向this.direction.normalize();// 水平方向移动const moveDirection = new THREE.Vector3();if (this.moveForward) moveDirection.add(this.direction);if (this.moveBackward) moveDirection.addScaledVector(this.direction, -1);if (this.moveLeft) moveDirection.addScaledVector(new THREE.Vector3(-this.direction.z, 0, this.direction.x), 1);if (this.moveRight) moveDirection.addScaledVector(new THREE.Vector3(this.direction.z, 0, -this.direction.x), 1);moveDirection.normalize().multiplyScalar(step);// 更新玩家位置this.player.position.add(moveDirection);// 更新玩家朝向if (this.moveForward || this.moveBackward || this.moveLeft || this.moveRight) {const targetQuaternion = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 0, -1),this.direction);// 创建一个额外的旋转 180 度的四元数const extraRotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);// 组合旋转targetQuaternion.multiply(extraRotation);this.player.quaternion.slerp(targetQuaternion, 0.1);}// 防止穿透地面if (this.player.position.y < 2) {this.player.position.y = 2;this.canJump = true;this.velocity.y = 0;} else {this.velocity.y -= 30 * delta; // 模拟重力}// 更新垂直位置this.player.position.y += this.velocity.y * delta;this.createRipple(this.player.position.x, this.player.position.z);// 使相机跟随玩家，并设置合适的角度const cameraOffset = new THREE.Vector3(0, 15, -20);const cameraLookAt = new THREE.Vector3(0, 0, 30);// 计算相机位置和角度相对玩家的位置const playerDirection = new THREE.Vector3();this.controls.getObject().getWorldDirection(playerDirection);playerDirection.y = 0; // 保持水平朝向// 相机位置基于玩家位置和方向偏移const cameraPosition = playerDirection.clone().multiplyScalar(cameraOffset.z).add(this.player.position);cameraPosition.y += cameraOffset.y;// 更新相机位置和朝向this.camera.position.copy(cameraPosition);this.camera.lookAt(this.player.position.clone().add(playerDirection.clone().multiplyScalar(cameraLookAt.z)));// 更新 NPC 行为this.npcList.forEach(npc => {// 随机移动if (Math.random() < 0.01) {this.npcMoveDirection.set(Math.random() - 0.5, 0, Math.random() - 0.5).normalize();}npc.position.addScaledVector(this.npcMoveDirection, step);// 攻击玩家this.npcAttack(npc);});// 更新水波纹this.ripples.forEach((ripple) => {const age = elapsedTime - ripple.startTime;ripple.mesh.scale.set(1 + age * 10, 1 + age * 10, 1 + age * 10);ripple.mesh.material.opacity = Math.max(0, 1 - age / 0.5); // 水波纹消散更快ripple.mesh.material.color.setHSL(0.6, 1, 0.5 * (1 - age / 0.5)); // 颜色随着扩散变淡});this.ripples = this.ripples.filter((ripple) => ripple.mesh.material.opacity > 0);this.renderer.render(this.scene, this.camera);TWEEN.update(); // 更新 TWEEN 动画},},
};
</script><style scoped>
.container {width: 100vw;height: 100vh;overflow: hidden;
}
</style>

http://www.ppmy.cn/news/1529953.html

相关文章

2024最受欢迎的3款｜数据库管理和开发｜工具

2024最受欢迎的3款｜数据库管理和开发｜工具

1.SQLynx&#xff08;原SQL Studio&#xff09; 概述&#xff1a; SQLynx是一个原生基于Web的SQL编辑器&#xff0c;由北京麦聪软件有限公司开发。它最初被称为SQL Studio&#xff0c;后改名为SQLynx&#xff0c;支持企业的桌面和Web数据库管理。SQLynx支持所有流行的数据库&a…
阅读更多...
PHP纯离线搭建（php 8.1.7）

PHP纯离线搭建（php 8.1.7）

要离线从零安装 PHP 8.1.7&#xff0c;需要准备好 PHP 的源代码以及所有相关的依赖包。以下是步骤&#xff1a; 步骤概览 在联网系统上下载 PHP 8.1.7 源代码和所有依赖包。 将这些文件传输到离线系统。 安装所需的依赖包。 编译并安装 PHP 8.1.7。 配置 PHP 和 Web 服务器。 …
阅读更多...
如何在windows中使用mac，要详细的教程

如何在windows中使用mac，要详细的教程

在 Windows 上运行 macOS 需要使用虚拟机软件。以下是一个详细的教程&#xff0c;展示如何在 Windows 上安装和运行 macOS&#xff1a; 前提条件 硬件要求&#xff1a; 64 位处理器&#xff0c;支持虚拟化技术&#xff08;VT-x 或 AMD-V&#xff09;。至少 8GB 内存&#xff0…
阅读更多...
Java-数据结构-优先级队列(堆)-(二) (ﾟ▽ﾟ*)

Java-数据结构-优先级队列(堆)-(二) (ﾟ▽ﾟ*)

文本目录&#xff1a; ❄️一、PriorityQueue的常用接口&#xff1a; ➷ 1、PriorityQueue的特性&#xff1a; ➷ 2、使用PriorityQueue的注意&#xff1a; ➷ 3、PriorityQueue的构造&#xff1a; ☞ 1、无参数的构造方法&#xff1a; ☞ 2、有参数的构造方法&#xff1a; …
阅读更多...
docker 部署 禅道

docker 部署 禅道

拉取镜像 docker pull easysoft/zentao运行 docker run -d --name zentao -e ZT_MYSQL_HOSTxxx -e ZT_MYSQL_PORT3306 -e ZT_MYSQL_USERxxx -e ZT_MYSQL_PASSWORDxxx -e ZT_MYSQL_DBzen_tao_ss -p 80:80 easysoft/zentao注意 配置好mysql连接 参照 https://www.zentao.net…
阅读更多...
力扣题解2376

力扣题解2376

大家好&#xff0c;欢迎来到无限大的频道。 今日继续给大家带来力扣题解。 题目描述&#xff08;困难&#xff09;&#xff1a; 统计特殊整数 如果一个正整数每一个数位都是 互不相同 的&#xff0c;我们称它是 特殊整数 。 给你一个 正 整数 n &#xff0c;请你返回区间 …
阅读更多...
Python机器学习基础（NumPy、Pandas、Matplotlib）

Python机器学习基础（NumPy、Pandas、Matplotlib）

Numpy函数库应用 NumPy 是 Python 中用于科学计算的核心库&#xff0c;它提供了高性能的多维数组对象以及用于处理这些数组的工具。 一、创建数组 1.使用array函数从 Python 列表或元组创建数组。 import numpy as np a np.array([1, 2, 3]) print(a) b np.array(…
阅读更多...
快速理解TCP协议（三）——TCP协议的三次握手与四次挥手

快速理解TCP协议（三）——TCP协议的三次握手与四次挥手

在网络通信的浩瀚海洋中&#xff0c;TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;如同一座坚固的桥梁&#xff0c;连接着网络世界的每一个角落。TCP协议通过其独特的三次握手&#xff08;Three-Way Handshake&#xff09;和四次挥手&…
阅读更多...
最新文章

Copyright @ 2022~2023