feat: fixed camera mode

featurelog.md

@@ -1,5 +1,13 @@
 ## New Features
 
+### (2024-6-24) FixedCamera Mode:
+
+- The “FixedCamera” mode automatically rotates the camera as the character turns (similar to the controls in Coastal World). You can activate it with the following code:
+
+`<Ecctrl mode="FixedCamera">`
+
+[![screenshot](example/EcctrlFixedCamera.png)]
+
 ### (2024-1-1) EcctrlMode:
 
 - Now you can seamlessly switch between different modes by adding "mode" inside Ecctrl.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecctrl",
-  "version": "1.0.80",
+  "version": "1.0.81",
   "author": "Erdong Chen",
   "license": "MIT",
   "description": "A floating rigibody character controller for R3F",

readme.md

@@ -13,26 +13,13 @@
 
 ## New Features
 
-### (2024-1-1) EcctrlMode:
+### (2024-6-24) FixedCamera Mode:
 
-- Now you can seamlessly switch between different modes by adding "mode" inside Ecctrl.
+- The “FixedCamera” mode automatically rotates the camera as the character turns (similar to the controls in Coastal World). You can activate it with the following code:
 
-`<Ecctrl mode="PointToMove">`
+`<Ecctrl mode="FixedCamera">`
 
-- "PointToMove" mode is designed for click-to-move or path following features. (no needs for keyboard controls)
-
-```js
-import { useGame } from "ecctrl";
-// ...
-const setMoveToPoint = useGame((state) => state.setMoveToPoint);
-// ...
-// call function setMoveToPoint(), whenever character needs to move
-setMoveToPoint(point); // "point" is a vec3 value
-```
-
-- Here is a simple click-to-move example: [Ecctrl CodeSandbox](https://codesandbox.io/p/sandbox/ecctrl-pointtomove-m9z6xh)
-
-[![screenshot](example/ecctrlClickToMove.png)](https://codesandbox.io/p/sandbox/ecctrl-pointtomove-m9z6xh)
+![screenshot](example/EcctrlFixedCamera.png)
 
 Check out the [featurelog.md](/featurelog.md) for details on previous updates and features.
 
@@ -130,6 +117,7 @@ EcctrlProps: {
   camZoomSpeed: 1, // Camera zooming speed multiplier
   camCollision: true, // Camera collision active/deactive
   camCollisionOffset: 0.7, // Camera collision offset
+  fixedCamRotMult: 1, // Camera rotate speed multiplier (FixedCamera mode)
    // Follow light setups
   followLightPos: { x: 20, y: 30, z: 10 }, // Follow light position
   // Base control setups

src/Ecctrl.tsx

@@ -67,6 +67,7 @@ const Ecctrl: ForwardRefRenderFunction<RapierRigidBody, EcctrlProps> = ({
   camZoomSpeed = 1,
   camCollision = true,
   camCollisionOffset = 0.7,
+  fixedCamRotMult = 1,
   // Follow light setups
   followLightPos = { x: 20, y: 30, z: 10 },
   // Base control setups
@@ -127,10 +128,12 @@ const Ecctrl: ForwardRefRenderFunction<RapierRigidBody, EcctrlProps> = ({
    * Mode setup
    */
   let isModePointToMove: boolean = false
+  let isModeFixedCamera: boolean = false
   const setCameraBased = useGame((state) => state.setCameraBased);
   const getCameraBased = useGame((state) => state.getCameraBased);
   if (mode) {
     if (mode === "PointToMove") isModePointToMove = true
+    if (mode === "FixedCamera") isModeFixedCamera = true
     if (mode === "CameraBasedMovement") setCameraBased(true)
   }
 
@@ -486,6 +489,7 @@ const Ecctrl: ForwardRefRenderFunction<RapierRigidBody, EcctrlProps> = ({
       releaseAllButtons()
     }
   }
+
   const handleSticks = (axes: readonly number[]) => {
     // Gamepad first joystick trigger the EcctrlJoystick event to move the character
     if (Math.abs(axes[0]) > 0 || Math.abs(axes[1]) > 0) {
@@ -499,7 +503,6 @@ const Ecctrl: ForwardRefRenderFunction<RapierRigidBody, EcctrlProps> = ({
     }
     // Gamepad second joystick trigger the useFollowCam event to move the camera
     if (Math.abs(axes[2]) > 0 || Math.abs(axes[3]) > 0) {
-      // console.log(axes[2], axes[3]);
       joystickCamMove(axes[2], axes[3])
     }
   }
@@ -536,8 +539,8 @@ const Ecctrl: ForwardRefRenderFunction<RapierRigidBody, EcctrlProps> = ({
     camMaxDis,
     camMinDis,
     camInitDir,
-    camMoveSpeed,
-    camZoomSpeed,
+    camMoveSpeed: isModeFixedCamera ? 0 : camMoveSpeed, // Disable camera move in fixed camera mode
+    camZoomSpeed: isModeFixedCamera ? 0 : camMoveSpeed, // Disable camera zoom in fixed camera mode
     camCollisionOffset
   };
 
@@ -1114,6 +1117,7 @@ const Ecctrl: ForwardRefRenderFunction<RapierRigidBody, EcctrlProps> = ({
         collider.parent().userData && !(collider.parent().userData as userDataType).excludeEcctrlRay
       ))
     );
+
     /**Test shape ray */
     // rayHit = world.castShape(
     //   currentPos,
@@ -1366,6 +1370,17 @@ const Ecctrl: ForwardRefRenderFunction<RapierRigidBody, EcctrlProps> = ({
      */
     isModePointToMove && pointToMove(delta, slopeAngle, movingObjectVelocity)
 
+    /**
+     * Fixed camera feature
+     */
+    if (isModeFixedCamera) {
+      if (leftward) {
+        pivot.rotation.y += (run ? delta * sprintMult * fixedCamRotMult : delta * fixedCamRotMult)
+      } else if (rightward) {
+        pivot.rotation.y -= (run ? delta * sprintMult * fixedCamRotMult : delta * fixedCamRotMult)
+      }
+    }
+
     /**
      * Apply all the animations
      */
@@ -1466,6 +1481,7 @@ export interface EcctrlProps extends RigidBodyProps {
   camZoomSpeed?: number;
   camCollision?: boolean;
   camCollisionOffset?: number;
+  fixedCamRotMult?: number;
   // Follow light setups
   followLightPos?: { x: number, y: number, z: number };
   // Base control setups