WorldFPSController.re.ts 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. import * as RE from "rogue-engine";
  2. import { Object3D, Vector3 } from "three";
  3. const fwdDirection = new Vector3(0, 0, -1);
  4. const bwdDirection = new Vector3(0, 0, 1);
  5. const leftDirection = new Vector3(-1, 0, 0);
  6. const rightDirection = new Vector3(1, 0, 0);
  7. const upDirection = new Vector3(0, 1, 0);
  8. const downDirection = new Vector3(0, -1, 0);
  9. export default class WorldFPSController extends RE.Component {
  10. @RE.props.object3d() mainCamera: Object3D;
  11. @RE.props.num() horizontalLookSpeed: number = 360;
  12. @RE.props.num() verticalLookSpeed: number = 180;
  13. @RE.props.num(-Math.PI / 2, 0) minCameraRotY: number = -1.5708;
  14. @RE.props.num(0, Math.PI / 2) maxCameraRotY: number = 1.5708;
  15. @RE.props.num() cameraHeight: number = 0.4;
  16. @RE.props.num() walkSpeed: number = 2;
  17. @RE.props.num() fwdSpeedMultiplier: number = 1.3;
  18. @RE.props.num() runSpeedMultiplier: number = 1.8;
  19. @RE.props.object3d() character: Object3D;
  20. @RE.props.list.object3d() worldObjects: Object3D[];
  21. @RE.props.vector3() characterOffsetPosition: Vector3;
  22. @RE.props.vector3() characterRotatePosition: Vector3;
  23. characterOffset: Object3D = new Object3D();
  24. awake() {
  25. RE.Input.mouse.lock();
  26. this.characterOffset.position.copy(this.character.position);
  27. this.mainCamera.position.set(0,0,0);
  28. this.character.position.set(0,0,0);
  29. this.mainCamera.position.y += this.cameraHeight;
  30. this.mainCamera.rotation.copy(this.character.rotation);
  31. this.worldObjects.forEach(worldObject => {
  32. worldObject.position.set(
  33. -this.characterOffset.position.x,
  34. -this.characterOffset.position.y,
  35. -this.characterOffset.position.z
  36. );
  37. });
  38. const appContainer = document.getElementById("rogue-app");
  39. if (!appContainer) return;
  40. appContainer.onmousedown = e => {
  41. RE.Input.mouse.lock();
  42. };
  43. RE.Runtime.onStop(() => {
  44. if (!appContainer) return;
  45. appContainer.onmousedown = null;
  46. });
  47. this.mainCamera.rotation.order = "YXZ";
  48. this.character.rotation.order = "YXZ";
  49. this.mainCamera.up.set(0, 1, 0);
  50. }
  51. update() {
  52. const deltaTime = RE.Runtime.deltaTime;
  53. const appContainer = document.getElementById("rogue-app");
  54. if (!appContainer) return;
  55. if (RE.Input.mouse.isMoving && document.pointerLockElement) {
  56. console.log("movement Ratio", (RE.Input.mouse.movementX / appContainer.clientWidth), (RE.Input.mouse.movementY/ appContainer.clientHeight))
  57. const mouseDeltaX = (RE.Input.mouse.movementX / appContainer.clientWidth) * this.horizontalLookSpeed * deltaTime;
  58. const mouseDeltaY = (RE.Input.mouse.movementY/ appContainer.clientHeight) * this.verticalLookSpeed * deltaTime;
  59. this.character.rotation.set(
  60. this.character.rotation.x,
  61. this.character.rotation.y - mouseDeltaX,
  62. this.character.rotation.z
  63. );
  64. this.mainCamera.rotation.set(
  65. this.mainCamera.rotation.x - mouseDeltaY,
  66. this.character.rotation.y,
  67. this.mainCamera.rotation.z
  68. );
  69. this.mainCamera.rotation.x = Math.max(this.minCameraRotY, Math.min(this.maxCameraRotY, this.mainCamera.rotation.x));
  70. }
  71. RE.Input.keyboard.getKeyPressed("Escape") && RE.Input.mouse.unlock();
  72. let actualSpeed = this.walkSpeed;
  73. let onlyFwd = true;
  74. const movementVector = new Vector3();
  75. // if (RE.Input.keyboard.getKeyDown("Space")) {
  76. // //jump logic here
  77. // movementVector.add(upDirection);
  78. // }
  79. if (RE.Input.keyboard.getKeyPressed("Space")) {
  80. movementVector.add(upDirection);
  81. }
  82. if (RE.Input.keyboard.getKeyPressed("ControlLeft")) {
  83. movementVector.add(downDirection);
  84. }
  85. if (RE.Input.keyboard.getKeyPressed("KeyW")) {
  86. movementVector.add(fwdDirection);
  87. } else if (RE.Input.keyboard.getKeyPressed("KeyS")) {
  88. movementVector.add(bwdDirection);
  89. onlyFwd = false;
  90. }
  91. if (RE.Input.keyboard.getKeyPressed("KeyA")) {
  92. movementVector.add(leftDirection);
  93. onlyFwd = false;
  94. } else if (RE.Input.keyboard.getKeyPressed("KeyD")) {
  95. movementVector.add(rightDirection);
  96. onlyFwd = false;
  97. }
  98. if (onlyFwd) {
  99. if (RE.Input.keyboard.getKeyPressed("ShiftLeft")) {
  100. actualSpeed *= this.runSpeedMultiplier;
  101. } else {
  102. actualSpeed *= this.fwdSpeedMultiplier;
  103. }
  104. }
  105. movementVector.normalize();
  106. if (movementVector.length() > 0) {
  107. movementVector.copy(
  108. movementVector
  109. .transformDirection(this.character.matrix)
  110. .multiplyScalar(actualSpeed * deltaTime)
  111. );
  112. this.characterOffset.position.x += movementVector.x;
  113. this.characterOffset.position.y += movementVector.y;
  114. this.characterOffset.position.z += movementVector.z;
  115. this.worldObjects.forEach(worldObject => {
  116. worldObject.position.set(
  117. -this.characterOffset.position.x,
  118. -this.characterOffset.position.y,
  119. -this.characterOffset.position.z
  120. );
  121. });
  122. }
  123. this.characterOffsetPosition.set(
  124. this.characterOffset.position.x,
  125. this.characterOffset.position.y,
  126. this.characterOffset.position.z
  127. );
  128. this.characterRotatePosition.set(
  129. this.characterOffset.rotation.x,
  130. this.characterOffset.rotation.y,
  131. this.characterOffset.rotation.z
  132. );
  133. }
  134. }
  135. RE.registerComponent(WorldFPSController);