three-player-controller 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
-declare function usePlayer(): {
+declare function playerController(): {
     init: (opts: {
         scene: THREE.Scene;
         camera: THREE.PerspectiveCamera;
@@ -15,19 +15,22 @@ declare function usePlayer(): {
             leftWalkAnim?: string;
             rightWalkAnim?: string;
             backwardAnim?: string;
-            scale?: number;
+            scale: number;
         };
         initPos?: THREE.Vector3;
-        scale?: number;
+        mouseSensity?: number;
     }, callback?: () => void) => Promise<void>;
     changeView: () => void;
     createBVH: (url?: string) => Promise<void>;
     createPlayer: () => void;
     reset: (pos?: THREE.Vector3) => void;
-    updatePlayer: (dt: number) => Promise<void>;
+    update: (dt?: number) => Promise<void>;
     destroy: () => void;
+    displayCollider: boolean;
+    displayPlayer: boolean;
+    displayVisualizer: boolean;
 };
 declare function onAllEvent(): void;
 declare function offAllEvent(): void;
 
-export { offAllEvent, onAllEvent, usePlayer };
+export { offAllEvent, onAllEvent, playerController };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
-declare function usePlayer(): {
+declare function playerController(): {
     init: (opts: {
         scene: THREE.Scene;
         camera: THREE.PerspectiveCamera;
@@ -15,19 +15,22 @@ declare function usePlayer(): {
             leftWalkAnim?: string;
             rightWalkAnim?: string;
             backwardAnim?: string;
-            scale?: number;
+            scale: number;
         };
         initPos?: THREE.Vector3;
-        scale?: number;
+        mouseSensity?: number;
     }, callback?: () => void) => Promise<void>;
     changeView: () => void;
     createBVH: (url?: string) => Promise<void>;
     createPlayer: () => void;
     reset: (pos?: THREE.Vector3) => void;
-    updatePlayer: (dt: number) => Promise<void>;
+    update: (dt?: number) => Promise<void>;
     destroy: () => void;
+    displayCollider: boolean;
+    displayPlayer: boolean;
+    displayVisualizer: boolean;
 };
 declare function onAllEvent(): void;
 declare function offAllEvent(): void;
 
-export { offAllEvent, onAllEvent, usePlayer };
+export { offAllEvent, onAllEvent, playerController };

package/dist/index.js

@@ -31,7 +31,7 @@ var index_exports = {};
 __export(index_exports, {
   offAllEvent: () => offAllEvent,
   onAllEvent: () => onAllEvent,
-  usePlayer: () => usePlayer
+  playerController: () => playerController
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -43,12 +43,14 @@ 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"));
 var controllerInstance = null;
+var clock = new THREE.Clock();
 var PlayerController = class {
   // 射线检测时只返回第一个碰撞
   constructor() {
     this.loader = new import_GLTFLoader.GLTFLoader();
+    this.playerRadius = 45;
+    this.playerHeight = 180;
     this.isFirstPerson = false;
-    this.mouseSensity = 5;
     this.boundingBoxMinY = 0;
     // 测试参数
     this.displayPlayer = false;
@@ -60,24 +62,16 @@ var PlayerController = class {
     this.person = null;
     //  状态开关
     this.playerIsOnGround = false;
-    this.isUpdatePlayer = true;
+    this.isupdate = true;
     //  输入状态
     this.fwdPressed = false;
-    // w
     this.bkdPressed = false;
-    // s
     this.lftPressed = false;
-    // a
     this.rgtPressed = false;
-    // d
     this.spacePressed = false;
-    // 空格
     this.ctPressed = false;
-    // ctrl
     this.shiftPressed = false;
-    // shift
     this.sustainSpacePressed = false;
-    // 空格键是否持续按下
     this.spaceLongPressTimer = null;
     // 第三人称
     this._camCollisionLerp = 0.18;
@@ -110,14 +104,8 @@ var PlayerController = class {
     this.DIR_RGT = new THREE.Vector3(1, 0, 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)
-    );
-    this._raycasterPersonToCam = new THREE.Raycaster(
-      new THREE.Vector3(),
-      new THREE.Vector3()
-    );
+    this._raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, -1, 0));
+    this._raycasterPersonToCam = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3());
     // 键盘按下事件
     this._boundOnKeydown = async (e) => {
       if (e.ctrlKey && (e.code === "KeyW" || e.code === "KeyA" || e.code === "KeyS" || e.code === "KeyD")) {
@@ -240,11 +228,7 @@ var PlayerController = class {
         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
-        );
+        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;
@@ -260,17 +244,12 @@ var PlayerController = class {
         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.position.set(target.x + newX, target.y + newY, target.z + newZ);
         this.camera.lookAt(target);
       }
     };
     this._mouseClick = (e) => {
-      if (document.pointerLockElement !== document.body)
-        document.body.requestPointerLock();
+      if (document.pointerLockElement !== document.body) document.body.requestPointerLock();
     };
     this._raycaster.firstHitOnly = true;
     this._raycasterPersonToCam.firstHitOnly = true;
@@ -281,13 +260,18 @@ var PlayerController = class {
     this.camera = opts.camera;
     this.controls = opts.controls;
     this.playerModel = opts.playerModel;
-    this.playerModel.scale = opts.playerModel.scale ? opts.playerModel.scale : 1;
     this.initPos = opts.initPos ? opts.initPos : new THREE.Vector3(0, 0, 0);
-    this.visualizeDepth = 0 * this.playerModel.scale;
-    this.gravity = -2400 * this.playerModel.scale;
-    this.jumpHeight = 300 * this.playerModel.scale;
-    this.highJumpHeight = 1e3 * this.playerModel.scale;
-    this.playerSpeed = 400 * this.playerModel.scale;
+    this.mouseSensity = opts.mouseSensity ? opts.mouseSensity : 5;
+    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.playerSpeed = opts.playerModel.speed ? opts.playerModel.speed * s : 400 * s;
+    this._camCollisionLerp = 0.18;
+    this._camEpsilon = 35 * s;
+    this._minCamDistance = 100 * s;
+    this._maxCamDistance = 440 * s;
     await this.createBVH();
     this.createPlayer();
     await this.loadPersonGLB();
@@ -304,25 +288,15 @@ var PlayerController = class {
     this.isFirstPerson = !this.isFirstPerson;
     if (this.isFirstPerson) {
       this.player.attach(this.camera);
-      this.camera.position.set(
-        0,
-        40 * this.playerModel.scale,
-        30 * this.playerModel.scale
-      );
+      this.camera.position.set(0, 40 * this.playerModel.scale, 30 * this.playerModel.scale);
       this.camera.rotation.set(0, Math.PI, 0);
       document.body.requestPointerLock();
     } else {
       this.scene.attach(this.camera);
       const worldPos = this.player.position.clone();
-      const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(
-        this.player.quaternion
-      );
+      const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(this.player.quaternion);
       const angle = Math.atan2(dir.z, dir.x);
-      const offset = new THREE.Vector3(
-        Math.cos(angle) * 400 * this.playerModel.scale,
-        200 * this.playerModel.scale,
-        Math.sin(angle) * 400 * this.playerModel.scale
-      );
+      const offset = new THREE.Vector3(Math.cos(angle) * 400 * this.playerModel.scale, 200 * this.playerModel.scale, Math.sin(angle) * 400 * this.playerModel.scale);
       this.camera.position.copy(worldPos).add(offset);
       this.controls.target.copy(worldPos);
       document.body.requestPointerLock();
@@ -334,15 +308,9 @@ var PlayerController = class {
       this.camera.position.set(0, 40 * this.playerModel.scale, 30 * this.playerModel.scale);
     } else {
       const worldPos = this.player.position.clone();
-      const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(
-        this.player.quaternion
-      );
+      const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(this.player.quaternion);
       const angle = Math.atan2(dir.z, dir.x);
-      const offset = new THREE.Vector3(
-        Math.cos(angle) * 400 * this.playerModel.scale,
-        200 * this.playerModel.scale,
-        Math.sin(angle) * 400 * this.playerModel.scale
-      );
+      const offset = new THREE.Vector3(Math.cos(angle) * 400 * this.playerModel.scale, 200 * this.playerModel.scale, Math.sin(angle) * 400 * this.playerModel.scale);
       this.camera.position.copy(worldPos).add(offset);
     }
     this.camera.updateProjectionMatrix();
@@ -368,28 +336,19 @@ var PlayerController = class {
   // 初始化加载器
   async initLoader() {
     const dracoLoader = new import_DRACOLoader.DRACOLoader();
-    dracoLoader.setDecoderPath(
-      "https://unpkg.com/three@0.180.0/examples/jsm/libs/draco/gltf/"
-    );
+    dracoLoader.setDecoderPath("https://unpkg.com/three@0.180.0/examples/jsm/libs/draco/gltf/");
     dracoLoader.setDecoderConfig({ type: "js" });
     this.loader.setDRACOLoader(dracoLoader);
   }
   // 人物与动画加载
   async loadPersonGLB() {
     try {
-      const gltf = await this.loader.loadAsync(
-        this.playerModel.url,
-        (xhr) => {
-        }
-      );
+      const gltf = await this.loader.loadAsync(this.playerModel.url);
       this.person = gltf.scene;
-      this.person.name = "\u89D2\u8272";
-      this.person.scale.set(
-        0.9 * this.playerModel.scale,
-        0.9 * this.playerModel.scale,
-        0.9 * this.playerModel.scale
-      );
-      this.person.position.set(0, -125 * this.playerModel.scale, 0);
+      const sc = this.playerModel.scale;
+      const h = this.playerHeight * sc;
+      this.person.scale.set(sc, sc, sc);
+      this.person.position.set(0, -h * 0.75, 0);
       this.player.add(this.person);
       this.reset();
       this.personMixer = new THREE.AnimationMixer(this.person);
@@ -483,32 +442,21 @@ var PlayerController = class {
     material.transparent = true;
     material.opacity = this.displayPlayer ? 0.5 : 0;
     material.wireframe = true;
-    this.player = new THREE.Mesh(
-      new import_RoundedBoxGeometry.RoundedBoxGeometry(
-        75 * this.playerModel.scale,
-        180 * this.playerModel.scale,
-        75 * this.playerModel.scale,
-        100 * this.playerModel.scale,
-        75 * this.playerModel.scale
-      ),
-      material
-    );
-    this.player.geometry.translate(0, -30 * this.playerModel.scale, 0);
+    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);
+    this.player.geometry.translate(0, -h * 0.25, 0);
     this.player.capsuleInfo = {
-      radius: 25 * this.playerModel.scale,
-      segment: new THREE.Line3(
-        new THREE.Vector3(),
-        new THREE.Vector3(0, -1, 0)
-      )
+      radius: r,
+      segment: new THREE.Line3(new THREE.Vector3(), new THREE.Vector3(0, -h * 0.5, 0))
     };
-    this.player.name = "\u89D2\u8272\u80F6\u56CA\u4F53";
-    this.player.rotateY(Math.PI / 2);
+    this.player.name = "capsule";
     this.scene.add(this.player);
     this.reset();
   }
   // 每帧更新
-  async updatePlayer(delta) {
-    if (!this.isUpdatePlayer || !this.player) return;
+  async update(delta = clock.getDelta()) {
+    if (!this.isupdate || !this.player) return;
     delta = Math.min(delta, 1 / 30);
     this.updateMixers(delta);
     if (!this.collider) return;
@@ -543,29 +491,23 @@ var PlayerController = class {
     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
-      );
+      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._originTmp.set(this.player.position.x, this.player.position.y, this.player.position.z);
     this._raycaster.ray.origin.copy(this._originTmp);
-    const intersects = this._raycaster.intersectObject(
-      this.collider,
-      false
-    );
+    const intersects = this._raycaster.intersectObject(this.collider, false);
     if (intersects.length > 0) {
       playerDistanceFromGround = this.player.position.y - intersects[0].point.y;
     }
-    if (playerDistanceFromGround > 130 * this.playerModel.scale) {
+    const h = this.playerHeight * this.playerModel.scale * 0.75;
+    if (playerDistanceFromGround > h) {
       this.playerVelocity.y += delta * this.gravity;
       this.player.position.addScaledVector(this.playerVelocity, delta);
+      console.log("delta * this.gravity", delta * this.gravity);
     } else {
+      console.log("\u5728\u5730\u9762");
+      this.playerVelocity.set(0, 0, 0);
       this.playerIsOnGround = true;
     }
     this.player.updateMatrixWorld();
@@ -586,11 +528,7 @@ var PlayerController = class {
       intersectsTriangle: (tri) => {
         const triPoint = this.tempVector;
         const capsulePoint = this.tempVector2;
-        const distance = tri.closestPointToSegment(
-          this.tempSegment,
-          triPoint,
-          capsulePoint
-        );
+        const distance = tri.closestPointToSegment(this.tempSegment, triPoint, capsulePoint);
         if (distance < capsuleInfo.radius) {
           const depth = capsuleInfo.radius - distance;
           const direction = capsulePoint.sub(triPoint).normalize();
@@ -600,16 +538,12 @@ 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 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);
-      this.playerVelocity.set(0, 0, 0);
     }
     if (!this.isFirstPerson && this.moveDir.lengthSq() > 0) {
       this.camDir.y = 0;
@@ -636,25 +570,16 @@ var PlayerController = class {
       const desiredDist = this._personToCam.length();
       this._raycasterPersonToCam.set(origin, direction);
       this._raycasterPersonToCam.far = desiredDist;
-      const intersects2 = this._raycasterPersonToCam.intersectObject(
-        this.collider,
-        false
-      );
+      const intersects2 = this._raycasterPersonToCam.intersectObject(this.collider, false);
       if (intersects2.length > 0) {
         const hit = intersects2[0];
-        const safeDist = Math.max(
-          hit.distance - this._camEpsilon,
-          this._minCamDistance
-        );
+        const safeDist = Math.max(hit.distance - this._camEpsilon, this._minCamDistance);
         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
-        );
+        const intersectsMaxDis = this._raycasterPersonToCam.intersectObject(this.collider, false);
         if (dis < this._maxCamDistance) {
           let safeDist = this._maxCamDistance;
           if (intersectsMaxDis.length) {
@@ -667,34 +592,15 @@ var PlayerController = class {
       }
     }
     if (this.player.position.y < this.boundingBoxMinY - 1) {
-      this._originTmp.set(
-        this.player.position.x,
-        1e4,
-        this.player.position.z
-      );
+      this._originTmp.set(this.player.position.x, 1e4, this.player.position.z);
       this._raycaster.ray.origin.copy(this._originTmp);
-      const intersects2 = this._raycaster.intersectObject(
-        this.collider,
-        false
-      );
+      const intersects2 = this._raycaster.intersectObject(this.collider, false);
       if (intersects2.length > 0) {
         console.log("\u73A9\u5BB6\u4E3Abug\u610F\u5916\u6389\u843D");
-        this.reset(
-          new THREE.Vector3(
-            this.player.position.x,
-            intersects2[0].point.y + 5,
-            this.player.position.z
-          )
-        );
+        this.reset(new THREE.Vector3(this.player.position.x, intersects2[0].point.y + 5, this.player.position.z));
       } else {
         console.log("\u73A9\u5BB6\u6B63\u5E38\u6389\u843D");
-        this.reset(
-          new THREE.Vector3(
-            this.player.position.x,
-            this.player.position.y + 15,
-            this.player.position.z
-          )
-        );
+        this.reset(new THREE.Vector3(this.player.position.x, this.player.position.y + 15, this.player.position.z));
       }
     }
   }
@@ -729,7 +635,7 @@ var PlayerController = class {
   }
   // 事件绑定
   onAllEvent() {
-    this.isUpdatePlayer = true;
+    this.isupdate = true;
     document.body.requestPointerLock();
     window.addEventListener("keydown", this._boundOnKeydown);
     window.addEventListener("keyup", this._boundOnKeyup);
@@ -738,7 +644,7 @@ var PlayerController = class {
   }
   // 事件解绑
   offAllEvent() {
-    this.isUpdatePlayer = false;
+    this.isupdate = false;
     document.exitPointerLock();
     window.removeEventListener("keydown", this._boundOnKeydown);
     window.removeEventListener("keyup", this._boundOnKeyup);
@@ -773,7 +679,7 @@ var PlayerController = class {
       }
       this.scene.traverse((c) => {
         const mesh = c;
-        if (mesh?.isMesh && mesh.geometry && c.name !== "\u89D2\u8272\u80F6\u56CA\u4F53") {
+        if (mesh?.isMesh && mesh.geometry && c.name !== "capsule") {
           try {
             let geom = mesh.geometry.clone();
             geom.applyMatrix4(mesh.matrixWorld);
@@ -799,8 +705,7 @@ var PlayerController = class {
             attrMap.set(name, { itemSize, arrayCtor: ctor, examples: 1 });
           } else {
             const m = attrMap.get(name);
-            if (m.itemSize !== itemSize || m.arrayCtor !== ctor)
-              attrConflict.add(name);
+            if (m.itemSize !== itemSize || m.arrayCtor !== ctor) attrConflict.add(name);
             else m.examples++;
           }
         }
@@ -821,10 +726,7 @@ var PlayerController = class {
             const meta = attrMap.get(name);
             const len = count * meta.itemSize;
             const array = new meta.arrayCtor(len);
-            g.setAttribute(
-              name,
-              new THREE.BufferAttribute(array, meta.itemSize)
-            );
+            g.setAttribute(name, new THREE.BufferAttribute(array, meta.itemSize));
           }
         }
       }
@@ -847,11 +749,16 @@ 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({
-        color: "red",
-        opacity: 0.2,
+        opacity: 0.5,
         transparent: true,
-        wireframe: false
+        wireframe: true
       })
     );
     if (this.displayCollider) this.scene.add(this.collider);
@@ -864,7 +771,7 @@ var PlayerController = class {
     console.log("bvh\u52A0\u8F7D\u6A21\u578B\u6210\u529F", this.collider);
   }
 };
-function usePlayer() {
+function playerController() {
   if (!controllerInstance) controllerInstance = new PlayerController();
   const c = controllerInstance;
   return {
@@ -873,8 +780,11 @@ function usePlayer() {
     createBVH: (url = "") => c.createBVH(url),
     createPlayer: () => c.createPlayer(),
     reset: (pos) => c.reset(pos),
-    updatePlayer: (dt) => c.updatePlayer(dt),
-    destroy: () => c.destroy()
+    update: (dt) => c.update(dt),
+    destroy: () => c.destroy(),
+    displayCollider: c.displayCollider,
+    displayPlayer: c.displayPlayer,
+    displayVisualizer: c.displayVisualizer
   };
 }
 function onAllEvent() {
@@ -889,6 +799,6 @@ function offAllEvent() {
 0 && (module.exports = {
   offAllEvent,
   onAllEvent,
-  usePlayer
+  playerController
 });
 //# sourceMappingURL=index.js.map