three-player-controller 0.1.9 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -42,6 +42,7 @@ var import_RoundedBoxGeometry = require("three/examples/jsm/geometries/RoundedBo
42
42
  var import_DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader.js");
43
43
  var import_GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader.js");
44
44
  var BufferGeometryUtils = __toESM(require("three/examples/jsm/utils/BufferGeometryUtils.js"));
45
+ THREE.Mesh.prototype.raycast = import_three_mesh_bvh.acceleratedRaycast;
45
46
  var controllerInstance = null;
46
47
  var clock = new THREE.Clock();
47
48
  var PlayerController = class {
@@ -105,8 +106,14 @@ var PlayerController = class {
105
106
  this.DIR_UP = new THREE.Vector3(0, 1, 0);
106
107
  this._personToCam = new THREE.Vector3();
107
108
  this._originTmp = new THREE.Vector3();
108
- this._raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, -1, 0));
109
- this._raycasterPersonToCam = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3());
109
+ this._raycaster = new THREE.Raycaster(
110
+ new THREE.Vector3(),
111
+ new THREE.Vector3(0, -1, 0)
112
+ );
113
+ this._raycasterPersonToCam = new THREE.Raycaster(
114
+ new THREE.Vector3(),
115
+ new THREE.Vector3()
116
+ );
110
117
  // 键盘按下事件
111
118
  this._boundOnKeydown = async (e) => {
112
119
  if (e.ctrlKey && (e.code === "KeyW" || e.code === "KeyA" || e.code === "KeyS" || e.code === "KeyD")) {
@@ -148,12 +155,7 @@ var PlayerController = class {
148
155
  break;
149
156
  case "KeyF":
150
157
  this.isFlying = !this.isFlying;
151
- this._maxCamDistance = this.isFlying ? this.orginMaxCamDistance * 2 : this.orginMaxCamDistance;
152
- if (!this.isFlying && !this.playerIsOnGround) {
153
- this.playPersonAnimationByName("jumping");
154
- } else {
155
- this.setAnimationByPressed();
156
- }
158
+ this.setAnimationByPressed();
157
159
  break;
158
160
  }
159
161
  };
@@ -233,6 +235,8 @@ var PlayerController = class {
233
235
  this.playPersonAnimationByName("walking_backward");
234
236
  return;
235
237
  }
238
+ } else {
239
+ this.playPersonAnimationByName("jumping");
236
240
  }
237
241
  };
238
242
  // 鼠标移动事件
@@ -242,7 +246,11 @@ var PlayerController = class {
242
246
  const yaw = -e.movementX * 1e-4 * this.mouseSensity;
243
247
  const pitch = -e.movementY * 1e-4 * this.mouseSensity;
244
248
  this.player.rotateY(yaw);
245
- this.camera.rotation.x = THREE.MathUtils.clamp(this.camera.rotation.x + pitch, -1.3, 1.4);
249
+ this.camera.rotation.x = THREE.MathUtils.clamp(
250
+ this.camera.rotation.x + pitch,
251
+ -1.3,
252
+ 1.4
253
+ );
246
254
  } else {
247
255
  const sensitivity = 1e-4 * this.mouseSensity;
248
256
  const deltaX = -e.movementX * sensitivity;
@@ -258,12 +266,17 @@ var PlayerController = class {
258
266
  const newX = distance * Math.sin(phi) * Math.sin(theta);
259
267
  const newY = distance * Math.cos(phi);
260
268
  const newZ = distance * Math.sin(phi) * Math.cos(theta);
261
- this.camera.position.set(target.x + newX, target.y + newY, target.z + newZ);
269
+ this.camera.position.set(
270
+ target.x + newX,
271
+ target.y + newY,
272
+ target.z + newZ
273
+ );
262
274
  this.camera.lookAt(target);
263
275
  }
264
276
  };
265
277
  this._mouseClick = (e) => {
266
- if (document.pointerLockElement !== document.body) document.body.requestPointerLock();
278
+ if (document.pointerLockElement !== document.body)
279
+ document.body.requestPointerLock();
267
280
  };
268
281
  this._raycaster.firstHitOnly = true;
269
282
  this._raycasterPersonToCam.firstHitOnly = true;
@@ -272,6 +285,7 @@ var PlayerController = class {
272
285
  async init(opts, callback) {
273
286
  this.scene = opts.scene;
274
287
  this.camera = opts.camera;
288
+ this.camera.rotation.order = "YXZ";
275
289
  this.controls = opts.controls;
276
290
  this.playerModel = opts.playerModel;
277
291
  this.initPos = opts.initPos ? opts.initPos : new THREE.Vector3(0, 0, 0);
@@ -280,7 +294,8 @@ var PlayerController = class {
280
294
  this.visualizeDepth = 0 * s;
281
295
  this.gravity = opts.playerModel.gravity ? opts.playerModel.gravity * s : -2400 * s;
282
296
  this.jumpHeight = opts.playerModel.jumpHeight ? opts.playerModel.jumpHeight * s : 800 * s;
283
- this.playerSpeed = opts.playerModel.speed ? opts.playerModel.speed * s : 400 * s;
297
+ this.originPlayerSpeed = opts.playerModel.speed ? opts.playerModel.speed * s : 400 * s;
298
+ this.playerSpeed = this.originPlayerSpeed;
284
299
  this._camCollisionLerp = 0.18;
285
300
  this._camEpsilon = 35 * s;
286
301
  this._minCamDistance = opts.minCamDistance ? opts.minCamDistance * s : 100 * s;
@@ -302,15 +317,25 @@ var PlayerController = class {
302
317
  this.isFirstPerson = !this.isFirstPerson;
303
318
  if (this.isFirstPerson) {
304
319
  this.player.attach(this.camera);
305
- this.camera.position.set(0, 40 * this.playerModel.scale, 30 * this.playerModel.scale);
320
+ this.camera.position.set(
321
+ 0,
322
+ 40 * this.playerModel.scale,
323
+ 30 * this.playerModel.scale
324
+ );
306
325
  this.camera.rotation.set(0, Math.PI, 0);
307
326
  document.body.requestPointerLock();
308
327
  } else {
309
328
  this.scene.attach(this.camera);
310
329
  const worldPos = this.player.position.clone();
311
- const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(this.player.quaternion);
330
+ const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(
331
+ this.player.quaternion
332
+ );
312
333
  const angle = Math.atan2(dir.z, dir.x);
313
- const offset = new THREE.Vector3(Math.cos(angle) * 400 * this.playerModel.scale, 200 * this.playerModel.scale, Math.sin(angle) * 400 * this.playerModel.scale);
334
+ const offset = new THREE.Vector3(
335
+ Math.cos(angle) * 400 * this.playerModel.scale,
336
+ 200 * this.playerModel.scale,
337
+ Math.sin(angle) * 400 * this.playerModel.scale
338
+ );
314
339
  this.camera.position.copy(worldPos).add(offset);
315
340
  this.controls.target.copy(worldPos);
316
341
  document.body.requestPointerLock();
@@ -319,12 +344,22 @@ var PlayerController = class {
319
344
  // 摄像机/控制器设置
320
345
  setCameraPos() {
321
346
  if (this.isFirstPerson) {
322
- this.camera.position.set(0, 40 * this.playerModel.scale, 30 * this.playerModel.scale);
347
+ this.camera.position.set(
348
+ 0,
349
+ 40 * this.playerModel.scale,
350
+ 30 * this.playerModel.scale
351
+ );
323
352
  } else {
324
353
  const worldPos = this.player.position.clone();
325
- const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(this.player.quaternion);
354
+ const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(
355
+ this.player.quaternion
356
+ );
326
357
  const angle = Math.atan2(dir.z, dir.x);
327
- const offset = new THREE.Vector3(Math.cos(angle) * 400 * this.playerModel.scale, 200 * this.playerModel.scale, Math.sin(angle) * 400 * this.playerModel.scale);
358
+ const offset = new THREE.Vector3(
359
+ Math.cos(angle) * 400 * this.playerModel.scale,
360
+ 200 * this.playerModel.scale,
361
+ Math.sin(angle) * 400 * this.playerModel.scale
362
+ );
328
363
  this.camera.position.copy(worldPos).add(offset);
329
364
  }
330
365
  this.camera.updateProjectionMatrix();
@@ -351,7 +386,9 @@ var PlayerController = class {
351
386
  // 初始化加载器
352
387
  async initLoader() {
353
388
  const dracoLoader = new import_DRACOLoader.DRACOLoader();
354
- dracoLoader.setDecoderPath("https://unpkg.com/three@0.180.0/examples/jsm/libs/draco/gltf/");
389
+ dracoLoader.setDecoderPath(
390
+ "https://unpkg.com/three@0.180.0/examples/jsm/libs/draco/gltf/"
391
+ );
355
392
  dracoLoader.setDecoderConfig({ type: "js" });
356
393
  this.loader.setDRACOLoader(dracoLoader);
357
394
  }
@@ -367,7 +404,11 @@ var PlayerController = class {
367
404
  this.person.traverse((child) => {
368
405
  if (child.isMesh) {
369
406
  child.castShadow = true;
370
- child.receiveShadow = true;
407
+ const mat = child.material;
408
+ if (!mat) return;
409
+ const mats = Array.isArray(mat) ? mat : [mat];
410
+ mats.forEach((m) => {
411
+ });
371
412
  }
372
413
  });
373
414
  this.player.add(this.person);
@@ -379,9 +420,18 @@ var PlayerController = class {
379
420
  const regs = [
380
421
  [this.playerModel.idleAnim, "idle"],
381
422
  [this.playerModel.walkAnim, "walking"],
382
- [this.playerModel.leftWalkAnim || this.playerModel.walkAnim, "left_walking"],
383
- [this.playerModel.rightWalkAnim || this.playerModel.walkAnim, "right_walking"],
384
- [this.playerModel.backwardAnim || this.playerModel.walkAnim, "walking_backward"],
423
+ [
424
+ this.playerModel.leftWalkAnim || this.playerModel.walkAnim,
425
+ "left_walking"
426
+ ],
427
+ [
428
+ this.playerModel.rightWalkAnim || this.playerModel.walkAnim,
429
+ "right_walking"
430
+ ],
431
+ [
432
+ this.playerModel.backwardAnim || this.playerModel.walkAnim,
433
+ "walking_backward"
434
+ ],
385
435
  [this.playerModel.jumpAnim, "jumping"],
386
436
  [this.playerModel.runAnim, "running"],
387
437
  [this.playerModel.flyIdleAnim || this.playerModel.idleAnim, "flyidle"],
@@ -470,11 +520,17 @@ var PlayerController = class {
470
520
  material.depthWrite = false;
471
521
  const r = this.playerRadius * this.playerModel.scale;
472
522
  const h = this.playerHeight * this.playerModel.scale;
473
- this.player = new THREE.Mesh(new import_RoundedBoxGeometry.RoundedBoxGeometry(r * 2, h, r * 2, 1, 75), material);
523
+ this.player = new THREE.Mesh(
524
+ new import_RoundedBoxGeometry.RoundedBoxGeometry(r * 2, h, r * 2, 1, 75),
525
+ material
526
+ );
474
527
  this.player.geometry.translate(0, -h * 0.25, 0);
475
528
  this.player.capsuleInfo = {
476
529
  radius: r,
477
- segment: new THREE.Line3(new THREE.Vector3(), new THREE.Vector3(0, -h * 0.5, 0))
530
+ segment: new THREE.Line3(
531
+ new THREE.Vector3(),
532
+ new THREE.Vector3(0, -h * 0.5, 0)
533
+ )
478
534
  };
479
535
  this.player.name = "capsule";
480
536
  this.scene.add(this.player);
@@ -484,7 +540,9 @@ var PlayerController = class {
484
540
  getAngleWithYAxis(normal) {
485
541
  const yAxis = { x: 0, y: 1, z: 0 };
486
542
  const dotProduct = normal.x * yAxis.x + normal.y * yAxis.y + normal.z * yAxis.z;
487
- const normalMagnitude = Math.sqrt(normal.x * normal.x + normal.y * normal.y + normal.z * normal.z);
543
+ const normalMagnitude = Math.sqrt(
544
+ normal.x * normal.x + normal.y * normal.y + normal.z * normal.z
545
+ );
488
546
  const yAxisMagnitude = 1;
489
547
  const cosTheta = dotProduct / (normalMagnitude * yAxisMagnitude);
490
548
  return Math.acos(cosTheta);
@@ -493,7 +551,8 @@ var PlayerController = class {
493
551
  async update(delta = clock.getDelta()) {
494
552
  if (!this.isupdate || !this.player || !this.collider) return;
495
553
  delta = Math.min(delta, 1 / 30);
496
- if (!this.isFlying) this.player.position.addScaledVector(this.playerVelocity, delta);
554
+ if (!this.isFlying)
555
+ this.player.position.addScaledVector(this.playerVelocity, delta);
497
556
  this.updateMixers(delta);
498
557
  this.camera.getWorldDirection(this.camDir);
499
558
  let angle = Math.atan2(this.camDir.z, this.camDir.x) + Math.PI / 2;
@@ -514,16 +573,26 @@ var PlayerController = class {
514
573
  }
515
574
  }
516
575
  if (this.isFlying && this.fwdPressed) {
517
- this.playerSpeed = this.shiftPressed ? 4e3 * this.playerModel.scale : 3e3 * this.playerModel.scale;
576
+ this.playerSpeed = this.shiftPressed ? this.originPlayerSpeed * 12 : this.originPlayerSpeed * 7;
518
577
  } else {
519
- this.playerSpeed = this.shiftPressed ? 900 * this.playerModel.scale : 400 * this.playerModel.scale;
578
+ this.playerSpeed = this.shiftPressed ? this.originPlayerSpeed * 2 : this.originPlayerSpeed;
520
579
  }
521
580
  this.moveDir.normalize().applyAxisAngle(this.upVector, angle);
522
- this.player.position.addScaledVector(this.moveDir, this.playerSpeed * delta);
581
+ this.player.position.addScaledVector(
582
+ this.moveDir,
583
+ this.playerSpeed * delta
584
+ );
523
585
  let playerDistanceFromGround = Infinity;
524
- this._originTmp.set(this.player.position.x, this.player.position.y, this.player.position.z);
586
+ this._originTmp.set(
587
+ this.player.position.x,
588
+ this.player.position.y,
589
+ this.player.position.z
590
+ );
525
591
  this._raycaster.ray.origin.copy(this._originTmp);
526
- const intersects = this._raycaster.intersectObject(this.collider, false);
592
+ const intersects = this._raycaster.intersectObject(
593
+ this.collider,
594
+ false
595
+ );
527
596
  if (intersects.length > 0) {
528
597
  playerDistanceFromGround = this.player.position.y - intersects[0].point.y;
529
598
  const normal = intersects[0].normal;
@@ -531,7 +600,6 @@ var PlayerController = class {
531
600
  const maxH = this.playerHeight * this.playerModel.scale * 0.9;
532
601
  const h = this.playerHeight * this.playerModel.scale * 0.75;
533
602
  const minH = this.playerHeight * this.playerModel.scale * 0.7;
534
- console.log(angle2, playerDistanceFromGround, maxH, h, minH);
535
603
  if (this.isFlying) {
536
604
  } else {
537
605
  if (playerDistanceFromGround > maxH) {
@@ -552,7 +620,11 @@ var PlayerController = class {
552
620
  this.playerIsOnGround = true;
553
621
  } else if (playerDistanceFromGround < minH) {
554
622
  this.playerVelocity.set(0, 0, 0);
555
- this.player.position.set(this.player.position.x, intersects[0].point.y + h, this.player.position.z);
623
+ this.player.position.set(
624
+ this.player.position.x,
625
+ intersects[0].point.y + h,
626
+ this.player.position.z
627
+ );
556
628
  this.playerIsOnGround = true;
557
629
  }
558
630
  }
@@ -575,7 +647,11 @@ var PlayerController = class {
575
647
  intersectsTriangle: (tri) => {
576
648
  const triPoint = this.tempVector;
577
649
  const capsulePoint = this.tempVector2;
578
- const distance = tri.closestPointToSegment(this.tempSegment, triPoint, capsulePoint);
650
+ const distance = tri.closestPointToSegment(
651
+ this.tempSegment,
652
+ triPoint,
653
+ capsulePoint
654
+ );
579
655
  if (distance < capsuleInfo.radius) {
580
656
  const depth = capsuleInfo.radius - distance;
581
657
  const direction = capsulePoint.sub(triPoint).normalize();
@@ -585,7 +661,10 @@ var PlayerController = class {
585
661
  }
586
662
  });
587
663
  const newPosition = this.tempVector.copy(this.tempSegment.start).applyMatrix4(this.collider.matrixWorld);
588
- const deltaVector = this.tempVector2.subVectors(newPosition, this.player.position);
664
+ const deltaVector = this.tempVector2.subVectors(
665
+ newPosition,
666
+ this.player.position
667
+ );
589
668
  const offset = Math.max(0, deltaVector.length() - 1e-5);
590
669
  deltaVector.normalize().multiplyScalar(offset);
591
670
  this.player.position.add(deltaVector);
@@ -626,15 +705,24 @@ var PlayerController = class {
626
705
  const desiredDist = this._personToCam.length();
627
706
  this._raycasterPersonToCam.set(origin, direction);
628
707
  this._raycasterPersonToCam.far = desiredDist;
629
- const intersects2 = this._raycasterPersonToCam.intersectObject(this.collider, false);
708
+ const intersects2 = this._raycasterPersonToCam.intersectObject(
709
+ this.collider,
710
+ false
711
+ );
630
712
  if (intersects2.length > 0) {
631
713
  const hit = intersects2[0];
632
- const safeDist = Math.max(hit.distance - this._camEpsilon, this._minCamDistance);
714
+ const safeDist = Math.max(
715
+ hit.distance - this._camEpsilon,
716
+ this._minCamDistance
717
+ );
633
718
  const targetCamPos = origin.clone().add(direction.clone().multiplyScalar(safeDist));
634
719
  this.camera.position.lerp(targetCamPos, this._camCollisionLerp);
635
720
  } else {
636
721
  this._raycasterPersonToCam.far = this._maxCamDistance;
637
- const intersectsMaxDis = this._raycasterPersonToCam.intersectObject(this.collider, false);
722
+ const intersectsMaxDis = this._raycasterPersonToCam.intersectObject(
723
+ this.collider,
724
+ false
725
+ );
638
726
  let safeDist = this._maxCamDistance;
639
727
  if (intersectsMaxDis.length) {
640
728
  const hitMax = intersectsMaxDis[0];
@@ -645,15 +733,34 @@ var PlayerController = class {
645
733
  }
646
734
  }
647
735
  if (this.player.position.y < this.boundingBoxMinY - 1) {
648
- this._originTmp.set(this.player.position.x, 1e4, this.player.position.z);
736
+ this._originTmp.set(
737
+ this.player.position.x,
738
+ 1e4,
739
+ this.player.position.z
740
+ );
649
741
  this._raycaster.ray.origin.copy(this._originTmp);
650
- const intersects2 = this._raycaster.intersectObject(this.collider, false);
742
+ const intersects2 = this._raycaster.intersectObject(
743
+ this.collider,
744
+ false
745
+ );
651
746
  if (intersects2.length > 0) {
652
747
  console.log("\u73A9\u5BB6\u4E3Abug\u610F\u5916\u6389\u843D");
653
- this.reset(new THREE.Vector3(this.player.position.x, intersects2[0].point.y + 5, this.player.position.z));
748
+ this.reset(
749
+ new THREE.Vector3(
750
+ this.player.position.x,
751
+ intersects2[0].point.y + 5,
752
+ this.player.position.z
753
+ )
754
+ );
654
755
  } else {
655
756
  console.log("\u73A9\u5BB6\u6B63\u5E38\u6389\u843D");
656
- this.reset(new THREE.Vector3(this.player.position.x, this.player.position.y + 15, this.player.position.z));
757
+ this.reset(
758
+ new THREE.Vector3(
759
+ this.player.position.x,
760
+ this.player.position.y + 15,
761
+ this.player.position.z
762
+ )
763
+ );
657
764
  }
658
765
  }
659
766
  }
@@ -757,7 +864,8 @@ var PlayerController = class {
757
864
  attrMap.set(name, { itemSize, arrayCtor: ctor, examples: 1 });
758
865
  } else {
759
866
  const m = attrMap.get(name);
760
- if (m.itemSize !== itemSize || m.arrayCtor !== ctor) attrConflict.add(name);
867
+ if (m.itemSize !== itemSize || m.arrayCtor !== ctor)
868
+ attrConflict.add(name);
761
869
  else m.examples++;
762
870
  }
763
871
  }
@@ -778,7 +886,10 @@ var PlayerController = class {
778
886
  const meta = attrMap.get(name);
779
887
  const len = count * meta.itemSize;
780
888
  const array = new meta.arrayCtor(len);
781
- g.setAttribute(name, new THREE.BufferAttribute(array, meta.itemSize));
889
+ g.setAttribute(
890
+ name,
891
+ new THREE.BufferAttribute(array, meta.itemSize)
892
+ );
782
893
  }
783
894
  }
784
895
  }
@@ -798,7 +909,9 @@ var PlayerController = class {
798
909
  console.error("\u5408\u5E76\u51E0\u4F55\u5931\u8D25");
799
910
  return;
800
911
  }
801
- merged.boundsTree = new import_three_mesh_bvh.MeshBVH(merged);
912
+ merged.boundsTree = new import_three_mesh_bvh.MeshBVH(merged, {
913
+ maxDepth: 100
914
+ });
802
915
  this.collider = new THREE.Mesh(
803
916
  merged,
804
917
  new THREE.MeshBasicMaterial({