From now TPS Camera can use the rotation of the target.

Unit controller boilerplates was renamed into Player controller just like in the latest three-game package. Dependency updates.
NewKrok · May 30, 2022 · 4acf7b1 · 4acf7b1
1 parent 6d038ea
commit 4acf7b1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-tps",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "TPS extension for THREE Game",
   "exports": {
     "./src/*": "./src/*"
@@ -23,9 +23,9 @@
   },
   "homepage": "https://github.com/NewKrok/three-tps#readme",
   "dependencies": {
-    "@newkrok/three-game": "0.6.1",
-    "@newkrok/three-utils": "0.2.0",
-    "three": "0.140.2"
+    "@newkrok/three-game": "^0.7.0",
+    "@newkrok/three-utils": "^0.3.0",
+    "three": "^0.141.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/...lates/tps-unit-controller-boilerplates.js → ...tes/tps-player-controller-boilerplates.js b/...lates/tps-unit-controller-boilerplates.js → ...tes/tps-player-controller-boilerplates.js
@@ -1,15 +1,15 @@
 import * as THREE from "three";
 
 import {
-  UnitActionId,
+  PlayerActionId,
   unitControllerConfig,
-} from "@newkrok/three-game/src/js/newkrok/three-game/boilerplates/unit-controller-boilerplates.js";
+} from "@newkrok/three-game/src/js/newkrok/three-game/boilerplates/player-controller-boilerplates.js";
 
 import { ButtonKey } from "@newkrok/three-game/src/js/newkrok/three-game/control/gamepad.js";
 import { Mouse } from "@newkrok/three-game/src/js/newkrok/three-game/control/mouse-manager.js";
 import { TPSUnitModuleId } from "@newkrok/three-tps/src/js/newkrok/three-tps/modules/tps-module-enums.js";
 
-export const TPSUnitActionId = {
+export const TPSPlayerActionId = {
   CAMERA: "CAMERA",
   AIM: "AIM",
 };
@@ -18,7 +18,7 @@ export const tpsUnitControllerConfig = {
   actionConfig: [
     ...unitControllerConfig.actionConfig,
     {
-      actionId: TPSUnitActionId.CAMERA,
+      actionId: TPSPlayerActionId.CAMERA,
       customTrigger: (trigger) => {
         document.addEventListener("mousemove", ({ movementX, movementY }) => {
           trigger({ x: movementX / 350, y: movementY / 350 });
@@ -27,7 +27,7 @@ export const tpsUnitControllerConfig = {
       gamepadButtons: [ButtonKey.LeftAxisX, ButtonKey.LeftAxisY],
     },
     {
-      actionId: TPSUnitActionId.AIM,
+      actionId: TPSPlayerActionId.AIM,
       mouse: [Mouse.RIGHT_BUTTON],
       gamepadButtons: [ButtonKey.LeftTrigger],
     },
@@ -36,44 +36,52 @@ export const tpsUnitControllerConfig = {
   handlers: [
     ...unitControllerConfig.handlers,
     {
-      actionId: UnitActionId.FORWARD,
-      callback: ({ unit, value }) => {
-        const tpsMovementModule = unit.getModule(TPSUnitModuleId.TPS_MOVEMENT);
+      actionId: PlayerActionId.FORWARD,
+      callback: ({ target, value }) => {
+        const tpsMovementModule = target.getModule(
+          TPSUnitModuleId.TPS_MOVEMENT
+        );
         tpsMovementModule.setForwardValue(value);
       },
     },
     {
-      actionId: UnitActionId.BACKWARD,
-      callback: ({ unit, value }) => {
-        const tpsMovementModule = unit.getModule(TPSUnitModuleId.TPS_MOVEMENT);
+      actionId: PlayerActionId.BACKWARD,
+      callback: ({ target, value }) => {
+        const tpsMovementModule = target.getModule(
+          TPSUnitModuleId.TPS_MOVEMENT
+        );
         tpsMovementModule.setBackwardValue(value);
       },
     },
     {
-      actionId: UnitActionId.LEFT,
-      callback: ({ unit, value }) => {
-        const tpsMovementModule = unit.getModule(TPSUnitModuleId.TPS_MOVEMENT);
+      actionId: PlayerActionId.LEFT,
+      callback: ({ target, value }) => {
+        const tpsMovementModule = target.getModule(
+          TPSUnitModuleId.TPS_MOVEMENT
+        );
         tpsMovementModule.setLeftValue(value);
       },
     },
     {
-      actionId: UnitActionId.RIGHT,
-      callback: ({ unit, value }) => {
-        const tpsMovementModule = unit.getModule(TPSUnitModuleId.TPS_MOVEMENT);
+      actionId: PlayerActionId.RIGHT,
+      callback: ({ target, value }) => {
+        const tpsMovementModule = target.getModule(
+          TPSUnitModuleId.TPS_MOVEMENT
+        );
         tpsMovementModule.setRightValue(value);
       },
     },
     {
-      actionId: TPSUnitActionId.CAMERA,
+      actionId: TPSPlayerActionId.CAMERA,
       callback: ({ world, value: { x, y } }) => {
         world.tpsCamera.rotate({ x, y });
       },
     },
     {
-      actionId: TPSUnitActionId.AIM,
-      callback: ({ unit, world }) => {
-        unit.userData.useAim = !unit.userData.useAim;
-        if (unit.userData.useAim) {
+      actionId: TPSPlayerActionId.AIM,
+      callback: ({ target, world }) => {
+        target.userData.useAim = !target.userData.useAim;
+        if (target.userData.useAim) {
           world.tpsCamera.setMaxDistance(1);
           world.tpsCamera.setPositionOffset(new THREE.Vector3(0.5, 1.5, 0));
           world.tpsCamera.setYBoundaries({ min: 1, max: 2.6 });

diff --git a/src/js/newkrok/three-tps/tps-camera.js b/src/js/newkrok/three-tps/tps-camera.js
@@ -6,6 +6,8 @@ export const createTPSCamera = (config) => {
   let target, q;
   let maxDistance, maxDistanceByCollision, currentDistance, maxCameraOffset;
   let _worldOctree;
+  let useTargetRotation = false;
+  let targetRotation = 0;
 
   let cameraSphere = new Sphere(
     new THREE.Vector3(),
@@ -26,6 +28,7 @@ export const createTPSCamera = (config) => {
     1000
   );
   const rotation = new THREE.Vector3();
+  const rotationEuler = new THREE.Euler();
   const realTargetPosition = new THREE.Object3D();
   const rotatedPositionOffset = new THREE.Vector3(0, 0, 0);
   const targetAndOffsetNormalizedVector = new THREE.Vector3(0, 0, 0);
@@ -89,8 +92,8 @@ export const createTPSCamera = (config) => {
     setTarget: (object) => {
       target = object;
       q = target.quaternion.clone();
-      rotation.x =
-        -new THREE.Euler().setFromQuaternion(q).y + config.initialRotation.x;
+      rotation.x = targetRotation =
+        -rotationEuler.setFromQuaternion(q).y + config.initialRotation.x;
       rotation.y = config.initialRotation.y;
     },
     setMaxDistance: (value) => (maxDistance = value),
@@ -100,6 +103,12 @@ export const createTPSCamera = (config) => {
       if (config.stopDuringPause && isPaused) return;
 
       if (target) {
+        if (useTargetRotation) {
+          q.slerp(target.quaternion, config.lerp.targetRotation * delta);
+          rotation.x = -rotationEuler.setFromQuaternion(q).y;
+          normalizeRotation(null);
+        }
+
         const targetPos = target.position.clone();
 
         if (targetPos) {
@@ -198,17 +207,19 @@ export const createTPSCamera = (config) => {
     getRotation: () => rotation,
     rotate: ({ x, y }) => {
       if (target) {
-        rotation.x += x ?? 0;
+        if (!useTargetRotation) rotation.x += x ?? 0;
         rotation.y += y ?? 0;
         normalizeRotation(x);
       }
     },
     setRotation: ({ x, y }) => {
       if (target) {
-        rotation.x = x ?? 0;
+        if (!useTargetRotation) rotation.x = x ?? 0;
         rotation.y = y ?? 0;
         normalizeRotation(x);
       }
     },
+    getUseTargetRotation: () => useTargetRotation,
+    setUseTargetRotation: (value) => (useTargetRotation = value),
   };
 };
diff --git a/src/js/newkrok/three-tps/tps-world.js b/src/js/newkrok/three-tps/tps-world.js
@@ -28,13 +28,12 @@ const TPS_WORLD_CONFIG = {
         collision: 60,
         normal: 4,
       },
+      targetRotation: 6,
     },
   },
 };
 
-export const createTPSWorld = ({ target, worldConfig, unitConfig }) => {
-  let _onUpdate;
-
+export const createTPSWorld = ({ target, worldConfig }) => {
   const tpsCamera = createTPSCamera(worldConfig.tpsCamera);
   const onLoaded = worldConfig.onLoaded;
 
@@ -43,25 +42,21 @@ export const createTPSWorld = ({ target, worldConfig, unitConfig }) => {
       createWorld({
         target,
         worldConfig: { ...worldConfig, onLoaded: null },
-        unitConfig,
         camera: tpsCamera.instance,
       })
         .then((world) => {
           tpsCamera.init({
             worldOctree: world.getModule(WorldModuleId.OCTREE).worldOctree,
           });
 
-          const update = (cycleData) => {
+          world.on.update((cycleData) => {
             tpsCamera.update(cycleData);
-            _onUpdate && _onUpdate(cycleData);
-          };
-          world.onUpdate(update);
+          });
 
           const tpsWorld = deepMerge(
             world,
             {
               tpsCamera,
-              onUpdate: (onUpdate) => (_onUpdate = onUpdate),
             },
             { applyToFirstObject: true }
           );