three-player-controller 0.2.5 → 0.2.51

package/README.md

@@ -15,17 +15,17 @@ npm install three-player-controller
 [glb 场景](https://hh-hang.github.io/three-player-controller/index.html)
 [3dtiles 场景](https://hh-hang.github.io/three-player-controller/3dtilesScene.html)
 
-### 控制
+### 普通控制
 
-![控制演示](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/1.gif)
+![普通控制演示](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/1.gif)
 
-### 飞行
+### 飞行控制
 
-![飞行](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/3.gif)
+![飞行控制演示](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/4.gif)
 
-### 3DTiles 漫游
+### 移动端控制演示
 
-![3DTiles 漫游](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/4.gif)
+![移动端控制演示](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/5.gif)
 
 # 使用
 

package/dist/index.d.mts

@@ -20,6 +20,7 @@ type PlayerControllerOptions = {
         gravity?: number;
         jumpHeight?: number;
         speed?: number;
+        rotateY?: number;
     };
     initPos?: THREE.Vector3;
     intDirection?: THREE.Vector3;
@@ -37,6 +38,7 @@ declare function playerController(): {
     update: (dt?: number) => Promise<void>;
     destroy: () => void;
     setInput: (i: any) => void;
+    getposition: () => THREE.Vector3;
 };
 declare function onAllEvent(): void;
 declare function offAllEvent(): void;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ type PlayerControllerOptions = {
         gravity?: number;
         jumpHeight?: number;
         speed?: number;
+        rotateY?: number;
     };
     initPos?: THREE.Vector3;
     intDirection?: THREE.Vector3;
@@ -37,6 +38,7 @@ declare function playerController(): {
     update: (dt?: number) => Promise<void>;
     destroy: () => void;
     setInput: (i: any) => void;
+    getposition: () => THREE.Vector3;
 };
 declare function onAllEvent(): void;
 declare function offAllEvent(): void;

package/dist/index.js

@@ -134,14 +134,8 @@ var PlayerController = class {
     this.DIR_UP = 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)
-    );
-    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")) {
@@ -191,8 +185,7 @@ var PlayerController = class {
         case "KeyF":
           this.isFlying = !this.isFlying;
           this.setAnimationByPressed();
-          if (!this.isFlying && !this.playerIsOnGround)
-            this.playPersonAnimationByName("jumping");
+          if (!this.isFlying && !this.playerIsOnGround) this.playPersonAnimationByName("jumping");
           break;
       }
     };
@@ -340,6 +333,7 @@ var PlayerController = class {
     this.jumpHeight = opts.playerModel.jumpHeight ? opts.playerModel.jumpHeight * s : 800 * s;
     this.originPlayerSpeed = opts.playerModel.speed ? opts.playerModel.speed * s : 400 * s;
     this.playerSpeed = this.originPlayerSpeed;
+    this.playerModel.rotateY = opts.playerModel.rotateY ? opts.playerModel.rotateY : 0;
     this._camCollisionLerp = 0.18;
     this._camEpsilon = 35 * s;
     this._minCamDistance = opts.minCamDistance ? opts.minCamDistance * s : 100 * s;
@@ -369,53 +363,32 @@ 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);
       this.setPointerLock();
     } 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);
       this.setPointerLock();
     }
   }
   setPointerLock() {
-    if ((this.thirdMouseMode == 0 || this.thirdMouseMode == 1) && !this.isFirstPerson || this.isFirstPerson)
-      document.body.requestPointerLock();
+    if ((this.thirdMouseMode == 0 || this.thirdMouseMode == 1) && !this.isFirstPerson || this.isFirstPerson) document.body.requestPointerLock();
   }
   // 摄像机/控制器设置
   setCameraPos() {
     if (this.isFirstPerson) {
-      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);
     } 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,
-        -100 * this.playerModel.scale,
-        Math.sin(angle) * 400 * this.playerModel.scale
-      );
+      const offset = new THREE.Vector3(Math.cos(angle) * 400 * this.playerModel.scale, -100 * this.playerModel.scale, Math.sin(angle) * 400 * this.playerModel.scale);
       this.camera.position.copy(worldPos).add(offset);
     }
     this.camera.updateProjectionMatrix();
@@ -447,9 +420,7 @@ 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);
   }
@@ -477,18 +448,9 @@ var PlayerController = class {
       const regs = [
         [this.playerModel.idleAnim, "idle"],
         [this.playerModel.walkAnim, "walking"],
-        [
-          this.playerModel.leftWalkAnim || this.playerModel.walkAnim,
-          "left_walking"
-        ],
-        [
-          this.playerModel.rightWalkAnim || this.playerModel.walkAnim,
-          "right_walking"
-        ],
-        [
-          this.playerModel.backwardAnim || this.playerModel.walkAnim,
-          "walking_backward"
-        ],
+        [this.playerModel.leftWalkAnim || this.playerModel.walkAnim, "left_walking"],
+        [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.flyIdleAnim || this.playerModel.idleAnim, "flyidle"],
@@ -577,29 +539,22 @@ var PlayerController = class {
     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
-    );
+    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: r,
-      segment: new THREE.Line3(
-        new THREE.Vector3(),
-        new THREE.Vector3(0, -h * 0.5, 0)
-      )
+      segment: new THREE.Line3(new THREE.Vector3(), new THREE.Vector3(0, -h * 0.5, 0))
     };
     this.player.name = "capsule";
     this.scene.add(this.player);
     this.reset();
+    this.player.rotateY(this.playerModel.rotateY ?? 0);
   }
   // 获取法线与Y轴的夹角
   getAngleWithYAxis(normal) {
     const yAxis = { x: 0, y: 1, z: 0 };
     const dotProduct = normal.x * yAxis.x + normal.y * yAxis.y + normal.z * yAxis.z;
-    const normalMagnitude = Math.sqrt(
-      normal.x * normal.x + normal.y * normal.y + normal.z * normal.z
-    );
+    const normalMagnitude = Math.sqrt(normal.x * normal.x + normal.y * normal.y + normal.z * normal.z);
     const yAxisMagnitude = 1;
     const cosTheta = dotProduct / (normalMagnitude * yAxisMagnitude);
     return Math.acos(cosTheta);
@@ -608,8 +563,7 @@ var PlayerController = class {
   async update(delta = clock.getDelta()) {
     if (!this.isupdate || !this.player || !this.collider) return;
     delta = Math.min(delta, 1 / 30);
-    if (!this.isFlying)
-      this.player.position.addScaledVector(this.playerVelocity, delta);
+    if (!this.isFlying) this.player.position.addScaledVector(this.playerVelocity, delta);
     this.updateMixers(delta);
     this.camera.getWorldDirection(this.camDir);
     let angle = Math.atan2(this.camDir.z, this.camDir.x) + Math.PI / 2;
@@ -635,21 +589,11 @@ var PlayerController = class {
       this.playerSpeed = this.shiftPressed ? this.originPlayerSpeed * 2 : this.originPlayerSpeed;
     }
     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;
       const normal = intersects[0].normal;
@@ -677,11 +621,7 @@ var PlayerController = class {
           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.player.position.set(this.player.position.x, intersects[0].point.y + h, this.player.position.z);
           this.playerIsOnGround = true;
         }
       }
@@ -704,11 +644,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();
@@ -718,10 +654,7 @@ 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 offset = Math.max(0, deltaVector.length() - 1e-5);
     deltaVector.normalize().multiplyScalar(offset);
     this.player.position.add(deltaVector);
@@ -776,24 +709,15 @@ 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 {
         this._raycasterPersonToCam.far = this._maxCamDistance;
-        const intersectsMaxDis = this._raycasterPersonToCam.intersectObject(
-          this.collider,
-          false
-        );
+        const intersectsMaxDis = this._raycasterPersonToCam.intersectObject(this.collider, false);
         let safeDist = this._maxCamDistance;
         if (intersectsMaxDis.length) {
           const hitMax = intersectsMaxDis[0];
@@ -804,34 +728,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));
       }
     }
   }
@@ -883,6 +788,9 @@ var PlayerController = class {
     window.removeEventListener("mousemove", this._mouseMove);
     window.removeEventListener("click", this._mouseClick);
   }
+  getPosition() {
+    return this.player.position;
+  }
   // 更新模型动画
   updateMixers(delta) {
     if (this.personMixer) this.personMixer.update(delta);
@@ -936,8 +844,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++;
           }
         }
@@ -958,10 +865,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));
           }
         }
       }
@@ -1006,11 +910,7 @@ var PlayerController = class {
       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
-      );
+      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;
@@ -1026,11 +926,7 @@ 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);
     }
   }
@@ -1069,8 +965,7 @@ var PlayerController = class {
     if (input.toggleFly) {
       this.isFlying = !this.isFlying;
       this.setAnimationByPressed();
-      if (!this.isFlying && !this.playerIsOnGround)
-        this.playPersonAnimationByName("jumping");
+      if (!this.isFlying && !this.playerIsOnGround) this.playPersonAnimationByName("jumping");
     }
   }
   // 初始化移动端摇杆控制
@@ -1096,17 +991,15 @@ var PlayerController = class {
       userSelect: "none"
     });
     container.appendChild(this.joystickZoneEl);
-    ["touchstart", "touchmove", "touchend", "touchcancel"].forEach(
-      (evtName) => {
-        this.joystickZoneEl?.addEventListener(
-          evtName,
-          (e) => {
-            e.preventDefault();
-          },
-          { passive: false }
-        );
-      }
-    );
+    ["touchstart", "touchmove", "touchend", "touchcancel"].forEach((evtName) => {
+      this.joystickZoneEl?.addEventListener(
+        evtName,
+        (e) => {
+          e.preventDefault();
+        },
+        { passive: false }
+      );
+    });
     this.joystickManager = nipple.create({
       zone: this.joystickZoneEl,
       mode: "static",
@@ -1156,17 +1049,15 @@ var PlayerController = class {
       userSelect: "none"
     });
     container.appendChild(this.lookAreaEl);
-    ["touchstart", "touchmove", "touchend", "touchcancel"].forEach(
-      (evtName) => {
-        this.lookAreaEl?.addEventListener(
-          evtName,
-          (e) => {
-            e.preventDefault();
-          },
-          { passive: false }
-        );
-      }
-    );
+    ["touchstart", "touchmove", "touchend", "touchcancel"].forEach((evtName) => {
+      this.lookAreaEl?.addEventListener(
+        evtName,
+        (e) => {
+          e.preventDefault();
+        },
+        { passive: false }
+      );
+    });
     this.lookAreaEl.addEventListener("pointerdown", this.onPointerDown, {
       passive: false
     });
@@ -1309,7 +1200,8 @@ function playerController() {
     reset: (pos) => c.reset(pos),
     update: (dt) => c.update(dt),
     destroy: () => c.destroy(),
-    setInput: (i) => c.setInput(i)
+    setInput: (i) => c.setInput(i),
+    getposition: () => c.getPosition()
   };
 }
 function onAllEvent() {