three-player-controller 0.1.6 → 0.1.8

package/README.md

@@ -1,49 +1,57 @@
 # three-player-controller
 
-轻量的第三人称 / 第一人称玩家控制器，开箱即用，基于 three.js 和 three-mesh-bvh 实现人物胶囊体碰撞、BVH 碰撞检测、人物动画、第一/三人称切换与相机避障。k此仓库包含库源码、example 演示。
+A lightweight third-person / first-person player controller, ready to use out of the box, based on three.js and three-mesh-bvh. It implements capsule-based character collision, BVH collision detection, character animations, first/third-person switching, and camera obstacle avoidance. This repository contains the library source code and example demos.
 
-# 安装
+# Installation
 
 npm install three-player-controller
 
-# 示例
+# Demo
 
 [Player Controller](https://hh-hang.github.io/three-player-controller/)
 
-### 控制
-![控制演示](example/public/gif/1.gif)
+### Controls
 
-### 第三人称相机避障
-![第三人称相机避障](example/public/gif/2.gif)
+![Controls](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/1.gif)
 
-# 使用
+### fly
+
+![fly](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/3.gif)
+
+### Third-person camera obstacle avoidance
+
+![Third-person camera obstacle avoidance](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/2.gif)
+
+# Usage
 
 ```js
 import * as THREE from "three";
 import { playerController } from "three-player-controller";
 
-// 初始化玩家控制器
+const player = playerController();
+
+// Initialize the player controller
 player.init({
-    scene, // three.js 场景
-    camera, // three.js 相机
-    controls, // three.js 控制器
-    playerModel: {
-        url: "./glb/person.glb", // 模型路径
-        scale: 0.001, // 模型缩放
-        idleAnim: "Idle_2", // 默认 Idle 动画名字
-        walkAnim: "Walking_11", // 默认 Walk 动画名字
-        runAnim: "Running_9", // 默认 Run 动画名字
-        jumpAnim: "Jump_3", // 默认 Jump 动画名字
-    },
-    initPos: pos, // 初始位置
+  scene, // three.js scene
+  camera, // three.js camera
+  controls, // three.js controls
+  playerModel: {
+    url: "./glb/person.glb", // model path
+    scale: 0.001, // model scale
+    idleAnim: "Idle_2", // idle animation name
+    walkAnim: "Walking_11", // walk animation name
+    runAnim: "Running_9", // run animation name
+    jumpAnim: "Jump_3", // jump animation name
+  },
+  initPos: pos, // initial position
 });
 
-// 渲染循环调用
+// Call in the render loop
 player.update();
-
 ```
-# 感谢
+
+# Thanks
 
 [three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh)
 
-[three](https://github.com/mrdoob/three.js)
+[three](https://github.com/mrdoob/three.js)

package/dist/index.d.mts

@@ -15,10 +15,11 @@ declare function playerController(): {
             leftWalkAnim?: string;
             rightWalkAnim?: string;
             backwardAnim?: string;
+            flyAnim?: string;
+            flyIdleAnim?: string;
             scale: number;
             gravity?: number;
             jumpHeight?: number;
-            highJumpHeight?: number;
             speed?: number;
         };
         initPos?: THREE.Vector3;

package/dist/index.d.ts

@@ -15,10 +15,11 @@ declare function playerController(): {
             leftWalkAnim?: string;
             rightWalkAnim?: string;
             backwardAnim?: string;
+            flyAnim?: string;
+            flyIdleAnim?: string;
             scale: number;
             gravity?: number;
             jumpHeight?: number;
-            highJumpHeight?: number;
             speed?: number;
         };
         initPos?: THREE.Vector3;

package/dist/index.js

@@ -63,6 +63,7 @@ var PlayerController = class {
     //  状态开关
     this.playerIsOnGround = false;
     this.isupdate = true;
+    this.isFlying = false;
     //  输入状态
     this.fwdPressed = false;
     this.bkdPressed = false;
@@ -71,8 +72,6 @@ var PlayerController = class {
     this.spacePressed = false;
     this.ctPressed = false;
     this.shiftPressed = false;
-    this.sustainSpacePressed = false;
-    this.spaceLongPressTimer = null;
     // 第三人称
     this._camCollisionLerp = 0.18;
     // 平滑系数
@@ -102,6 +101,7 @@ var PlayerController = class {
     this.DIR_BKD = new THREE.Vector3(0, 0, 1);
     this.DIR_LFT = new THREE.Vector3(-1, 0, 0);
     this.DIR_RGT = new THREE.Vector3(1, 0, 0);
+    this.DIR_Y = new THREE.Vector3(0, 1, 0);
     this._personToCam = new THREE.Vector3();
     this._originTmp = new THREE.Vector3();
     this._raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, -1, 0));
@@ -133,12 +133,11 @@ var PlayerController = class {
           this.setAnimationByPressed();
           break;
         case "Space":
-          if (!this.spacePressed) this.spacePressed = true;
-          if (!this.spaceLongPressTimer) {
-            this.spaceLongPressTimer = setTimeout(() => {
-              this.sustainSpacePressed = true;
-            }, 2e3);
-          }
+          if (!this.playerIsOnGround || this.isFlying) return;
+          this.spacePressed = true;
+          this.playPersonAnimationByName("jumping");
+          this.playerVelocity.y = this.jumpHeight;
+          this.playerIsOnGround = false;
           break;
         case "ControlLeft":
           this.ctPressed = true;
@@ -146,6 +145,10 @@ var PlayerController = class {
         case "KeyV":
           this.changeView();
           break;
+        case "KeyF":
+          this.isFlying = !this.isFlying;
+          this.setAnimationByPressed();
+          break;
       }
     };
     // 键盘抬起事件
@@ -172,12 +175,6 @@ var PlayerController = class {
           this.setAnimationByPressed();
           break;
         case "Space":
-          if (this.spaceLongPressTimer) {
-            clearTimeout(this.spaceLongPressTimer);
-            this.spaceLongPressTimer = null;
-          }
-          this.spacePressed = false;
-          this.sustainSpacePressed = false;
           break;
         case "ControlLeft":
           this.ctPressed = false;
@@ -186,6 +183,16 @@ var PlayerController = class {
     };
     // 根据按键设置人物动画
     this.setAnimationByPressed = () => {
+      this._maxCamDistance = 440 * this.playerModel.scale;
+      if (this.isFlying) {
+        if (!this.fwdPressed) {
+          this.playPersonAnimationByName("flyidle");
+          return;
+        }
+        this.playPersonAnimationByName("flying");
+        this._maxCamDistance = 700 * this.playerModel.scale;
+        return;
+      }
       if (this.playerIsOnGround) {
         if (!this.fwdPressed && !this.bkdPressed && !this.lftPressed && !this.rgtPressed) {
           this.playPersonAnimationByName("idle");
@@ -219,6 +226,8 @@ var PlayerController = class {
           this.playPersonAnimationByName("walking_backward");
           return;
         }
+      } else {
+        this.playPersonAnimationByName("jumping");
       }
     };
     // 鼠标移动事件
@@ -265,8 +274,7 @@ var PlayerController = class {
     const s = this.playerModel.scale;
     this.visualizeDepth = 0 * s;
     this.gravity = opts.playerModel.gravity ? opts.playerModel.gravity * s : -2400 * s;
-    this.jumpHeight = opts.playerModel.jumpHeight ? opts.playerModel.jumpHeight * s : 300 * s;
-    this.highJumpHeight = opts.playerModel.highJumpHeight ? opts.playerModel.highJumpHeight * s : 1e3 * s;
+    this.jumpHeight = opts.playerModel.jumpHeight ? opts.playerModel.jumpHeight * s : 800 * s;
     this.playerSpeed = opts.playerModel.speed ? opts.playerModel.speed * s : 400 * s;
     this._camCollisionLerp = 0.18;
     this._camEpsilon = 35 * s;
@@ -318,7 +326,7 @@ var PlayerController = class {
   // 设置控制器
   setControls() {
     this.controls.enabled = false;
-    this.controls.maxPolarAngle = Math.PI * (230 / 360);
+    this.controls.maxPolarAngle = Math.PI * (300 / 360);
   }
   // 重置控制器
   resetControls() {
@@ -358,6 +366,7 @@ var PlayerController = class {
       this.reset();
       this.personMixer = new THREE.AnimationMixer(this.person);
       const animations = gltf.animations ?? [];
+      console.log("animations", animations);
       this.personActions = /* @__PURE__ */ new Map();
       const findClip = (name) => animations.find((a) => a.name === name);
       const regs = [
@@ -367,7 +376,9 @@ var PlayerController = class {
         [this.playerModel.rightWalkAnim || this.playerModel.walkAnim, "right_walking"],
         [this.playerModel.backwardAnim || this.playerModel.walkAnim, "walking_backward"],
         [this.playerModel.jumpAnim, "jumping"],
-        [this.playerModel.runAnim, "running"]
+        [this.playerModel.runAnim, "running"],
+        [this.playerModel.flyIdleAnim || this.playerModel.idleAnim, "flyidle"],
+        [this.playerModel.flyAnim || this.playerModel.idleAnim, "flying"]
       ];
       for (const [key, clipName] of regs) {
         const clip = findClip(key);
@@ -393,6 +404,8 @@ var PlayerController = class {
       this.backwardAction = this.personActions.get("walking_backward");
       this.jumpAction = this.personActions.get("jumping");
       this.runAction = this.personActions.get("running");
+      this.flyidleAction = this.personActions.get("flyidle");
+      this.flyAction = this.personActions.get("flying");
       this.idleAction.setEffectiveWeight(1);
       this.idleAction.play();
       this.actionState = this.idleAction;
@@ -447,6 +460,7 @@ var PlayerController = class {
     material.transparent = true;
     material.opacity = this.displayPlayer ? 0.5 : 0;
     material.wireframe = true;
+    material.depthWrite = false;
     const r = this.playerRadius * this.playerModel.scale;
     const h = this.playerHeight * this.playerModel.scale;
     this.player = new THREE.Mesh(new import_RoundedBoxGeometry.RoundedBoxGeometry(r * 2, h, r * 2, 1, 75), material);
@@ -469,10 +483,10 @@ var PlayerController = class {
   }
   // 每帧更新
   async update(delta = clock.getDelta()) {
-    if (!this.isupdate || !this.player) return;
-    delta = Math.min(delta, 1 / 30);
+    if (!this.isupdate || !this.player || !this.collider) return;
+    delta = Math.min(delta, 1 / 60);
+    if (!this.isFlying) this.player.position.addScaledVector(this.playerVelocity, delta);
     this.updateMixers(delta);
-    if (!this.collider) return;
     this.camera.getWorldDirection(this.camDir);
     let angle = Math.atan2(this.camDir.z, this.camDir.x) + Math.PI / 2;
     angle = 2 * Math.PI - angle;
@@ -481,31 +495,16 @@ var PlayerController = class {
     if (this.bkdPressed) this.moveDir.add(this.DIR_BKD);
     if (this.lftPressed) this.moveDir.add(this.DIR_LFT);
     if (this.rgtPressed) this.moveDir.add(this.DIR_RGT);
-    if (this.spacePressed && this.playerIsOnGround) {
-      this.playPersonAnimationByName("jumping");
-      setTimeout(() => {
-        this.playerVelocity.y = this.jumpHeight;
-        this.playerIsOnGround = false;
-        this.spacePressed = false;
-        this.player.position.addScaledVector(this.playerVelocity, delta);
-        this.player.updateMatrixWorld();
-      }, 200);
-    }
-    if (this.sustainSpacePressed && this.playerIsOnGround) {
-      this.playPersonAnimationByName("jumping");
-      setTimeout(() => {
-        this.playerVelocity.y = this.highJumpHeight;
-        this.playerIsOnGround = false;
-        this.spacePressed = false;
-        this.player.position.addScaledVector(this.playerVelocity, delta);
-        this.player.updateMatrixWorld();
-      }, 200);
+    if (this.isFlying && this.fwdPressed) {
+      this.moveDir.y = this.camDir.y;
     }
-    this.playerSpeed = this.shiftPressed ? 900 * this.playerModel.scale : 400 * this.playerModel.scale;
-    if (this.moveDir.lengthSq() > 1e-6) {
-      this.moveDir.normalize().applyAxisAngle(this.upVector, angle);
-      this.player.position.addScaledVector(this.moveDir, this.playerSpeed * delta);
+    if (this.isFlying && this.fwdPressed) {
+      this.playerSpeed = this.shiftPressed ? 4e3 * this.playerModel.scale : 3e3 * this.playerModel.scale;
+    } else {
+      this.playerSpeed = this.shiftPressed ? 900 * this.playerModel.scale : 400 * this.playerModel.scale;
     }
+    this.moveDir.normalize().applyAxisAngle(this.upVector, angle);
+    this.player.position.addScaledVector(this.moveDir, this.playerSpeed * delta);
     let playerDistanceFromGround = Infinity;
     this._originTmp.set(this.player.position.x, this.player.position.y, this.player.position.z);
     this._raycaster.ray.origin.copy(this._originTmp);
@@ -517,27 +516,29 @@ var PlayerController = class {
       const maxH = this.playerHeight * this.playerModel.scale * 0.9;
       const h = this.playerHeight * this.playerModel.scale * 0.75;
       const minH = this.playerHeight * this.playerModel.scale * 0.7;
-      if (playerDistanceFromGround > maxH) {
-        this.playerVelocity.y += delta * this.gravity;
-        this.player.position.addScaledVector(this.playerVelocity, delta);
-        this.playerIsOnGround = false;
-      } else if (playerDistanceFromGround > h && playerDistanceFromGround < maxH) {
-        if (angle2 >= 0 && angle2 < 5) {
-          console.log("\u5E73\u5730");
+      if (this.isFlying) {
+      } else {
+        if (playerDistanceFromGround > maxH) {
           this.playerVelocity.y += delta * this.gravity;
           this.player.position.addScaledVector(this.playerVelocity, delta);
           this.playerIsOnGround = false;
-        } else {
+        } else if (playerDistanceFromGround > h && playerDistanceFromGround < maxH) {
+          if (angle2 >= 0 && angle2 < 5) {
+            this.playerVelocity.y += delta * this.gravity;
+            this.player.position.addScaledVector(this.playerVelocity, delta);
+            this.playerIsOnGround = true;
+          } else {
+            this.playerVelocity.set(0, 0, 0);
+            this.playerIsOnGround = true;
+          }
+        } else if (playerDistanceFromGround > minH && playerDistanceFromGround < h) {
           this.playerVelocity.set(0, 0, 0);
           this.playerIsOnGround = true;
+        } else if (playerDistanceFromGround < minH) {
+          this.playerVelocity.set(0, 0, 0);
+          this.player.position.set(this.player.position.x, intersects[0].point.y + h, this.player.position.z);
+          this.playerIsOnGround = true;
         }
-      } else if (playerDistanceFromGround > minH && playerDistanceFromGround < h) {
-        this.playerVelocity.set(0, 0, 0);
-        this.playerIsOnGround = true;
-      } else if (playerDistanceFromGround < minH) {
-        this.playerVelocity.set(0, 0, 0);
-        this.player.position.set(this.player.position.x, intersects[0].point.y + h, this.player.position.z);
-        this.playerIsOnGround = true;
       }
     }
     this.player.updateMatrixWorld();
@@ -569,12 +570,9 @@ var PlayerController = class {
     });
     const newPosition = this.tempVector.copy(this.tempSegment.start).applyMatrix4(this.collider.matrixWorld);
     const deltaVector = this.tempVector2.subVectors(newPosition, this.player.position);
-    const len = deltaVector.length();
-    const offset = Math.max(0, len - 1e-5);
-    if (offset > 0 && len > 0) {
-      const n = deltaVector.multiplyScalar(1 / len);
-      this.player.position.addScaledVector(n, offset);
-    }
+    const offset = Math.max(0, deltaVector.length() - 1e-5);
+    deltaVector.normalize().multiplyScalar(offset);
+    this.player.position.add(deltaVector);
     if (!this.isFirstPerson && this.moveDir.lengthSq() > 0) {
       this.camDir.y = 0;
       this.camDir.normalize();
@@ -607,18 +605,15 @@ var PlayerController = class {
         const targetCamPos = origin.clone().add(direction.clone().multiplyScalar(safeDist));
         this.camera.position.lerp(targetCamPos, this._camCollisionLerp);
       } else {
-        const dis = this.player.position.distanceTo(this.camera.position);
         this._raycasterPersonToCam.far = this._maxCamDistance;
         const intersectsMaxDis = this._raycasterPersonToCam.intersectObject(this.collider, false);
-        if (dis < this._maxCamDistance) {
-          let safeDist = this._maxCamDistance;
-          if (intersectsMaxDis.length) {
-            const hitMax = intersectsMaxDis[0];
-            safeDist = hitMax.distance - this._camEpsilon;
-          }
-          const targetCamPos = origin.clone().add(direction.clone().multiplyScalar(safeDist));
-          this.camera.position.lerp(targetCamPos, this._camCollisionLerp);
+        let safeDist = this._maxCamDistance;
+        if (intersectsMaxDis.length) {
+          const hitMax = intersectsMaxDis[0];
+          safeDist = hitMax.distance - this._camEpsilon;
         }
+        const targetCamPos = origin.clone().add(direction.clone().multiplyScalar(safeDist));
+        this.camera.position.lerp(targetCamPos, this._camCollisionLerp);
       }
     }
     if (this.player.position.y < this.boundingBoxMinY - 1) {
@@ -684,7 +679,6 @@ var PlayerController = class {
   // 更新模型动画
   updateMixers(delta) {
     if (this.personMixer) this.personMixer.update(delta);
-    if (this.droneMixer) this.droneMixer.update(delta);
   }
   // BVH构建
   async createBVH(meshUrl = "") {
@@ -779,12 +773,6 @@ var PlayerController = class {
     merged.boundsTree = new import_three_mesh_bvh.MeshBVH(merged);
     this.collider = new THREE.Mesh(
       merged,
-      // new THREE.MeshBasicMaterial({
-      //     color: "red",
-      //     opacity: 0.2,
-      //     transparent: true,
-      //     wireframe: false,
-      // })
       new THREE.MeshBasicMaterial({
         opacity: 0.5,
         transparent: true,