three-player-controller 0.2.2 → 0.2.3

package/README.md

@@ -8,7 +8,7 @@ npm install three-player-controller
 
 # 示例
 
-[Player Controller](https://hh-hang.github.io/three-player-controller/)
+[glbScene](https://hh-hang.github.io/three-player-controller/index.html)
 
 ### 控制
 

package/dist/index.d.mts

@@ -26,6 +26,7 @@ type PlayerControllerOptions = {
     minCamDistance?: number;
     maxCamDistance?: number;
     colliderMeshUrl?: string;
+    isShowMobileControls?: boolean;
 };
 declare function playerController(): {
     init: (opts: PlayerControllerOptions, callback?: () => void) => Promise<void>;
@@ -33,6 +34,7 @@ declare function playerController(): {
     reset: (pos?: THREE.Vector3) => void;
     update: (dt?: number) => Promise<void>;
     destroy: () => void;
+    setInput: (i: any) => void;
 };
 declare function onAllEvent(): void;
 declare function offAllEvent(): void;

package/dist/index.d.ts

@@ -26,6 +26,7 @@ type PlayerControllerOptions = {
     minCamDistance?: number;
     maxCamDistance?: number;
     colliderMeshUrl?: string;
+    isShowMobileControls?: boolean;
 };
 declare function playerController(): {
     init: (opts: PlayerControllerOptions, callback?: () => void) => Promise<void>;
@@ -33,6 +34,7 @@ declare function playerController(): {
     reset: (pos?: THREE.Vector3) => void;
     update: (dt?: number) => Promise<void>;
     destroy: () => void;
+    setInput: (i: any) => void;
 };
 declare function onAllEvent(): void;
 declare function offAllEvent(): void;

package/dist/index.js

@@ -42,6 +42,17 @@ var import_RoundedBoxGeometry = require("three/examples/jsm/geometries/RoundedBo
 var import_DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader.js");
 var import_GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader.js");
 var BufferGeometryUtils = __toESM(require("three/examples/jsm/utils/BufferGeometryUtils.js"));
+
+// assets/imgs/fly.png
+var fly_default = "./fly-MARLZTYI.png";
+
+// assets/imgs/jump.png
+var jump_default = "./jump-QUC4EGFV.png";
+
+// assets/imgs/view.png
+var view_default = "./view-WKETVFPK.png";
+
+// src/playerController.ts
 THREE.Mesh.prototype.raycast = import_three_mesh_bvh.acceleratedRaycast;
 var controllerInstance = null;
 var clock = new THREE.Clock();
@@ -57,15 +68,15 @@ var PlayerController = class {
     this.displayPlayer = false;
     this.displayCollider = false;
     this.displayVisualizer = false;
-    //  场景对象
+    // 场景对象
     this.collider = null;
     this.visualizer = null;
     this.person = null;
-    //  状态开关
+    // 状态开关
     this.playerIsOnGround = false;
     this.isupdate = true;
     this.isFlying = false;
-    //  输入状态
+    // 输入状态
     this.fwdPressed = false;
     this.bkdPressed = false;
     this.lftPressed = false;
@@ -73,6 +84,19 @@ var PlayerController = class {
     this.spacePressed = false;
     this.ctPressed = false;
     this.shiftPressed = false;
+    // 移动端输入
+    this.prevJoyState = { dirX: 0, dirY: 0, shift: false };
+    // 移动控制相关
+    this.joystickManager = null;
+    this.joystickZoneEl = null;
+    this.lookAreaEl = null;
+    this.jumpBtnEl = null;
+    this.flyBtnEl = null;
+    this.viewBtnEl = null;
+    this.lookPointerId = null;
+    this.isLookDown = false;
+    this.lastTouchX = 0;
+    this.lastTouchY = 0;
     // 第三人称
     this._camCollisionLerp = 0.18;
     // 平滑系数
@@ -83,7 +107,7 @@ var PlayerController = class {
     this._maxCamDistance = 4.4;
     // 摄像机最大距离
     this.orginMaxCamDistance = 4.4;
-    //  物理/运动
+    // 物理/运动
     this.playerVelocity = new THREE.Vector3();
     // 玩家速度向量
     this.upVector = new THREE.Vector3(0, 1, 0);
@@ -93,6 +117,8 @@ var PlayerController = class {
     this.tempBox = new THREE.Box3();
     this.tempMat = new THREE.Matrix4();
     this.tempSegment = new THREE.Line3();
+    // 检测动画定时
+    this.recheckAnimTimer = null;
     //  复用向量：用于相机朝向 / 移动
     this.camDir = new THREE.Vector3();
     this.moveDir = new THREE.Vector3();
@@ -143,6 +169,8 @@ var PlayerController = class {
         case "Space":
           this.spacePressed = true;
           if (!this.playerIsOnGround || this.isFlying) return;
+          const next = this.personActions?.get("jumping");
+          if (next && this.actionState === next) return;
           this.playPersonAnimationByName("jumping");
           this.playerVelocity.y = this.jumpHeight;
           this.playerIsOnGround = false;
@@ -156,6 +184,8 @@ var PlayerController = class {
         case "KeyF":
           this.isFlying = !this.isFlying;
           this.setAnimationByPressed();
+          if (!this.isFlying && !this.playerIsOnGround)
+            this.playPersonAnimationByName("jumping");
           break;
       }
     };
@@ -235,49 +265,51 @@ var PlayerController = class {
           this.playPersonAnimationByName("walking_backward");
           return;
         }
-      } else {
-        this.playPersonAnimationByName("jumping");
       }
+      if (this.recheckAnimTimer !== null) {
+        clearTimeout(this.recheckAnimTimer);
+      }
+      this.recheckAnimTimer = setTimeout(() => {
+        this.setAnimationByPressed();
+        this.recheckAnimTimer = null;
+      }, 200);
     };
     // 鼠标移动事件
     this._mouseMove = (e) => {
       if (document.pointerLockElement !== document.body) return;
-      if (this.isFirstPerson) {
-        const yaw = -e.movementX * 1e-4 * this.mouseSensity;
-        const pitch = -e.movementY * 1e-4 * this.mouseSensity;
-        this.player.rotateY(yaw);
-        this.camera.rotation.x = THREE.MathUtils.clamp(
-          this.camera.rotation.x + pitch,
-          -1.3,
-          1.4
-        );
-      } else {
-        const sensitivity = 1e-4 * this.mouseSensity;
-        const deltaX = -e.movementX * sensitivity;
-        const deltaY = -e.movementY * sensitivity;
-        const target = this.player.position.clone();
-        const distance = this.camera.position.distanceTo(target);
-        const currentPosition = this.camera.position.clone().sub(target);
-        let theta = Math.atan2(currentPosition.x, currentPosition.z);
-        let phi = Math.acos(currentPosition.y / distance);
-        theta += deltaX;
-        phi += deltaY;
-        phi = Math.max(0.1, Math.min(Math.PI - 0.1, phi));
-        const newX = distance * Math.sin(phi) * Math.sin(theta);
-        const newY = distance * Math.cos(phi);
-        const newZ = distance * Math.sin(phi) * Math.cos(theta);
-        this.camera.position.set(
-          target.x + newX,
-          target.y + newY,
-          target.z + newZ
-        );
-        this.camera.lookAt(target);
-      }
+      this.setToward(e.movementX, e.movementY, 1e-4);
     };
     this._mouseClick = (e) => {
       if (document.pointerLockElement !== document.body)
         document.body.requestPointerLock();
     };
+    this.onPointerDown = (e) => {
+      if (e.pointerType !== "touch") return;
+      this.isLookDown = true;
+      this.lookPointerId = e.pointerId;
+      this.lastTouchX = e.clientX;
+      this.lastTouchY = e.clientY;
+      this.lookAreaEl?.setPointerCapture && this.lookAreaEl.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    };
+    this.onPointerMove = (e) => {
+      if (!this.isLookDown || e.pointerId !== this.lookPointerId) return;
+      const dx = e.clientX - this.lastTouchX;
+      const dy = e.clientY - this.lastTouchY;
+      this.lastTouchX = e.clientX;
+      this.lastTouchY = e.clientY;
+      this.setInput({
+        lookDeltaX: dx,
+        lookDeltaY: dy
+      });
+      e.preventDefault();
+    };
+    this.onPointerUp = (e) => {
+      if (e.pointerId !== this.lookPointerId) return;
+      this.isLookDown = false;
+      this.lookPointerId = null;
+      this.lookAreaEl?.releasePointerCapture && this.lookAreaEl.releasePointerCapture(e.pointerId);
+    };
     this._raycaster.firstHitOnly = true;
     this._raycasterPersonToCam.firstHitOnly = true;
   }
@@ -301,11 +333,18 @@ var PlayerController = class {
     this._minCamDistance = opts.minCamDistance ? opts.minCamDistance * s : 100 * s;
     this._maxCamDistance = opts.maxCamDistance ? opts.maxCamDistance * s : 440 * s;
     this.orginMaxCamDistance = this._maxCamDistance;
+    this.isShowMobileControls = opts.isShowMobileControls ?? true;
+    function isMobileDevice() {
+      return navigator.maxTouchPoints && navigator.maxTouchPoints > 0 || "ontouchstart" in window || /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+    }
+    if (isMobileDevice() && this.isShowMobileControls) {
+      this.initMobileControls();
+    }
     await this.createBVH(opts.colliderMeshUrl);
     this.createPlayer();
     await this.loadPersonGLB();
-    if (this.isFirstPerson && this.player) {
-      this.player.add(this.camera);
+    if (this.isFirstPerson && this.person) {
+      this.person.add(this.camera);
     }
     this.onAllEvent();
     this.setCameraPos();
@@ -404,11 +443,7 @@ var PlayerController = class {
       this.person.traverse((child) => {
         if (child.isMesh) {
           child.castShadow = true;
-          const mat = child.material;
-          if (!mat) return;
-          const mats = Array.isArray(mat) ? mat : [mat];
-          mats.forEach((m) => {
-          });
+          child.receiveShadow = true;
         }
       });
       this.player.add(this.person);
@@ -791,6 +826,7 @@ var PlayerController = class {
       this.scene.remove(this.collider);
       this.collider = null;
     }
+    this.destroyMobileControls();
     controllerInstance = null;
   }
   // 事件绑定
@@ -928,6 +964,305 @@ var PlayerController = class {
     }
     this.boundingBoxMinY = this.collider.geometry.boundingBox.min.y;
   }
+  // 设置朝向
+  setToward(dx, dy, speed) {
+    if (this.isFirstPerson) {
+      const yaw = -dx * speed * this.mouseSensity;
+      const pitch = -dy * speed * this.mouseSensity;
+      this.player.rotateY(yaw);
+      this.camera.rotation.x = THREE.MathUtils.clamp(
+        this.camera.rotation.x + pitch,
+        -1.1,
+        1.4
+      );
+    } else {
+      const sensitivity = this.mouseSensity;
+      const deltaX = -dx * speed * sensitivity;
+      const deltaY = -dy * speed * sensitivity;
+      const target = this.player.position.clone();
+      const distance = this.camera.position.distanceTo(target);
+      const currentPosition = this.camera.position.clone().sub(target);
+      let theta = Math.atan2(currentPosition.x, currentPosition.z);
+      let phi = Math.acos(currentPosition.y / distance);
+      theta += deltaX;
+      phi += deltaY;
+      phi = Math.max(0.1, Math.min(Math.PI - 0.1, phi));
+      const newX = distance * Math.sin(phi) * Math.sin(theta);
+      const newY = distance * Math.cos(phi);
+      const newZ = distance * Math.sin(phi) * Math.cos(theta);
+      this.camera.position.set(
+        target.x + newX,
+        target.y + newY,
+        target.z + newZ
+      );
+      this.camera.lookAt(target);
+    }
+  }
+  // 设置输入
+  setInput(input) {
+    if (typeof input.moveX === "number") {
+      this.lftPressed = input.moveX == -1;
+      this.rgtPressed = input.moveX == 1;
+      this.setAnimationByPressed();
+    }
+    if (typeof input.moveY === "number") {
+      this.fwdPressed = input.moveY == 1;
+      this.bkdPressed = input.moveY == -1;
+      this.setAnimationByPressed();
+    }
+    if (typeof input.lookDeltaX === "number" && typeof input.lookDeltaY === "number") {
+      this.setToward(input.lookDeltaX, input.lookDeltaY, 2e-3);
+    }
+    if (typeof input.jump === "boolean") {
+      if (input.jump) {
+        this.spacePressed = true;
+        if (!this.playerIsOnGround || this.isFlying) return;
+        this.playPersonAnimationByName("jumping");
+        this.playerVelocity.y = this.jumpHeight;
+        this.playerIsOnGround = false;
+      } else {
+        this.spacePressed = false;
+      }
+    }
+    if (typeof input.shift === "boolean") {
+      this.shiftPressed = input.shift;
+    }
+    if (input.toggleView) {
+      this.changeView();
+    }
+    if (input.toggleFly) {
+      this.isFlying = !this.isFlying;
+      this.setAnimationByPressed();
+      if (!this.isFlying && !this.playerIsOnGround)
+        this.playPersonAnimationByName("jumping");
+    }
+  }
+  // 初始化移动端摇杆控制
+  async initMobileControls() {
+    this.controls.maxPolarAngle = Math.PI * (300 / 360);
+    this.controls.touches = { ONE: null, TWO: null };
+    const mod = (await import("nipplejs")).default;
+    const nipple = mod;
+    const JOY_SIZE = 120;
+    const container = document.body;
+    this.joystickZoneEl = document.createElement("div");
+    this.joystickZoneEl.id = "joy-zone";
+    Object.assign(this.joystickZoneEl.style, {
+      position: "absolute",
+      left: "16px",
+      bottom: "16px",
+      width: `${JOY_SIZE + 40}px`,
+      height: `${JOY_SIZE + 40}px`,
+      touchAction: "none",
+      zIndex: "999",
+      pointerEvents: "auto",
+      WebkitUserSelect: "none",
+      userSelect: "none"
+    });
+    container.appendChild(this.joystickZoneEl);
+    ["touchstart", "touchmove", "touchend", "touchcancel"].forEach(
+      (evtName) => {
+        this.joystickZoneEl?.addEventListener(
+          evtName,
+          (e) => {
+            e.preventDefault();
+          },
+          { passive: false }
+        );
+      }
+    );
+    this.joystickManager = nipple.create({
+      zone: this.joystickZoneEl,
+      mode: "static",
+      position: {
+        left: `${(JOY_SIZE + 40) / 2}px`,
+        bottom: `${(JOY_SIZE + 40) / 2}px`
+      },
+      color: "#ffffff",
+      size: JOY_SIZE,
+      multitouch: true,
+      maxNumberOfNipples: 1
+    });
+    this.joystickManager.on("move", (_evt, data) => {
+      if (!data) return;
+      const rawX = data.vector?.x ?? 0;
+      const rawY = data.vector?.y ?? 0;
+      const distance = data.distance ?? 0;
+      const deadzone = 0.5;
+      const dirX = rawX > deadzone ? 1 : rawX < -deadzone ? -1 : 0;
+      const dirY = rawY > deadzone ? 1 : rawY < -deadzone ? -1 : 0;
+      const sprintThreshold = JOY_SIZE / 2;
+      const isSprinting = distance >= sprintThreshold;
+      const prev = this.prevJoyState || { dirX: 0, dirY: 0, shift: false };
+      if (dirX === prev.dirX && dirY === prev.dirY && isSprinting === prev.shift) {
+        return;
+      }
+      this.prevJoyState = { dirX, dirY, shift: isSprinting };
+      this.setInput({ moveX: dirX, moveY: dirY, shift: isSprinting });
+    });
+    this.joystickManager.on("end", () => {
+      const prev = this.prevJoyState || { dirX: 0, dirY: 0, shift: false };
+      if (prev.dirX !== 0 || prev.dirY !== 0 || prev.shift !== false) {
+        this.prevJoyState = { dirX: 0, dirY: 0, shift: false };
+        this.setInput({ moveX: 0, moveY: 0, shift: false });
+      }
+    });
+    this.lookAreaEl = document.createElement("div");
+    Object.assign(this.lookAreaEl.style, {
+      position: "absolute",
+      right: "0",
+      bottom: "0",
+      width: "50%",
+      height: "100%",
+      zIndex: "998",
+      touchAction: "none",
+      WebkitUserSelect: "none",
+      userSelect: "none"
+    });
+    container.appendChild(this.lookAreaEl);
+    ["touchstart", "touchmove", "touchend", "touchcancel"].forEach(
+      (evtName) => {
+        this.lookAreaEl?.addEventListener(
+          evtName,
+          (e) => {
+            e.preventDefault();
+          },
+          { passive: false }
+        );
+      }
+    );
+    this.lookAreaEl.addEventListener("pointerdown", this.onPointerDown, {
+      passive: false
+    });
+    this.lookAreaEl.addEventListener("pointermove", this.onPointerMove, {
+      passive: false
+    });
+    this.lookAreaEl.addEventListener("pointerup", this.onPointerUp, {
+      passive: false
+    });
+    this.lookAreaEl.addEventListener("pointercancel", this.onPointerUp, {
+      passive: false
+    });
+    const createBtn = (rightPx, bottomPx, bgUrl) => {
+      const btn = document.createElement("button");
+      const styles = {
+        position: "absolute",
+        right: `${rightPx}px`,
+        bottom: `${bottomPx}px`,
+        width: "56px",
+        height: "56px",
+        zIndex: "1000",
+        borderRadius: "50%",
+        border: "2px solid black",
+        background: "rgba(0,0,0)",
+        padding: "20px",
+        opacity: "0.95",
+        touchAction: "none",
+        fontSize: "14px",
+        userSelect: "none",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        backgroundColor: "transparent",
+        backgroundRepeat: "no-repeat, no-repeat",
+        backgroundPosition: "center center, center center",
+        backgroundSize: "100% 100%, 80% 80%"
+      };
+      if (bgUrl) {
+        const overlayColor = "rgba(0,0,0,0.5)";
+        styles.backgroundImage = `linear-gradient(${overlayColor}, ${overlayColor}), url("${bgUrl}")`;
+      }
+      Object.assign(btn.style, styles);
+      container.appendChild(btn);
+      ["touchstart", "touchend", "touchcancel"].forEach((evtName) => {
+        btn.addEventListener(
+          evtName,
+          (e) => {
+            e.preventDefault();
+          },
+          { passive: false }
+        );
+      });
+      return btn;
+    };
+    this.jumpBtnEl = createBtn(14, 14, jump_default);
+    this.jumpBtnEl.addEventListener(
+      "touchstart",
+      (e) => {
+        e.preventDefault();
+        this.setInput({ jump: true });
+      },
+      { passive: false }
+    );
+    this.jumpBtnEl.addEventListener(
+      "touchend",
+      (e) => {
+        e.preventDefault();
+        this.setInput({ jump: false });
+      },
+      { passive: false }
+    );
+    this.jumpBtnEl.addEventListener(
+      "touchcancel",
+      (e) => {
+        e.preventDefault();
+        this.setInput({ jump: false });
+      },
+      { passive: false }
+    );
+    this.flyBtnEl = createBtn(14, 14 + 80, fly_default);
+    this.flyBtnEl.addEventListener(
+      "touchstart",
+      (e) => {
+        e.preventDefault();
+        this.setInput({ toggleFly: true });
+      },
+      { passive: false }
+    );
+    this.viewBtnEl = createBtn(14, 14 + 200, view_default);
+    this.viewBtnEl.addEventListener(
+      "touchstart",
+      (e) => {
+        e.preventDefault();
+        this.setInput({ toggleView: true });
+      },
+      { passive: false }
+    );
+  }
+  // 销毁移动端摇杆控制
+  destroyMobileControls() {
+    try {
+      if (this.joystickManager && this.joystickManager.destroy) {
+        this.joystickManager.destroy();
+        this.joystickManager = null;
+      }
+      if (this.joystickZoneEl?.parentElement) {
+        this.joystickZoneEl.parentElement.removeChild(this.joystickZoneEl);
+        this.joystickZoneEl = null;
+      }
+      if (this.lookAreaEl?.parentElement) {
+        this.lookAreaEl.parentElement.removeChild(this.lookAreaEl);
+        this.lookAreaEl = null;
+      }
+      if (this.jumpBtnEl?.parentElement) {
+        this.jumpBtnEl.parentElement.removeChild(this.jumpBtnEl);
+        this.jumpBtnEl = null;
+      }
+      if (this.flyBtnEl?.parentElement) {
+        this.flyBtnEl.parentElement.removeChild(this.flyBtnEl);
+        this.flyBtnEl = null;
+      }
+      if (this.viewBtnEl?.parentElement) {
+        this.viewBtnEl.parentElement.removeChild(this.viewBtnEl);
+        this.viewBtnEl = null;
+      }
+      this.lookAreaEl?.removeEventListener("pointerdown", this.onPointerDown);
+      this.lookAreaEl?.removeEventListener("pointermove", this.onPointerMove);
+      this.lookAreaEl?.removeEventListener("pointerup", this.onPointerUp);
+      this.lookAreaEl?.removeEventListener("pointercancel", this.onPointerUp);
+    } catch (e) {
+      console.warn("\u9500\u6BC1\u79FB\u52A8\u7AEF\u6447\u6746\u63A7\u5236\u65F6\u51FA\u9519\uFF1A", e);
+    }
+  }
 };
 function playerController() {
   if (!controllerInstance) controllerInstance = new PlayerController();
@@ -937,7 +1272,8 @@ function playerController() {
     changeView: () => c.changeView(),
     reset: (pos) => c.reset(pos),
     update: (dt) => c.update(dt),
-    destroy: () => c.destroy()
+    destroy: () => c.destroy(),
+    setInput: (i) => c.setInput(i)
   };
 }
 function onAllEvent() {