feat: add touch support to follow cam

Author: ErdongChen-Andrew

package.json

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

readme.md

@@ -128,6 +128,9 @@ EcctrlProps: {
   camMaxDis: -7, // Maximum camera distance
   camMinDis: -0.7, // Minimum camera distance
   camInitDir: 0, // Camera initial position direction (in rad)
+  camMoveSpeed = 1, // Camera moving speed multiplier
+  camZoomSpeed = 1, // Camera zooming speed multiplier
+  camCollisionOffset = 0.7, // Camera collision offset
    // Follow light setups
   followLightPos: { x: 20, y: 30, z: 10 }, // Follow light position
   // Base control setups

src/Ecctrl.tsx

@@ -34,6 +34,9 @@ const Ecctrl = forwardRef<RapierRigidBody, EcctrlProps>(({
   camMaxDis = -7,
   camMinDis = -0.7,
   camInitDir = 0, // in rad
+  camMoveSpeed = 1,
+  camZoomSpeed = 1,
+  camCollisionOffset = 0.7,
   // Follow light setups
   followLightPos = { x: 20, y: 30, z: 10 },
   // Base control setups
@@ -396,6 +399,9 @@ const Ecctrl = forwardRef<RapierRigidBody, EcctrlProps>(({
     camInitDis,
     camMaxDis,
     camMinDis,
+    camMoveSpeed,
+    camZoomSpeed,
+    camCollisionOffset
   };
 
   /**
@@ -1074,8 +1080,11 @@ export interface EcctrlProps extends RigidBodyProps {
   camMaxDis?: number;
   camMinDis?: number;
   camInitDir?: number;
+  camMoveSpeed?: number;
+  camZoomSpeed?: number;
+  camCollisionOffset?: number;
   // Follow light setups
-  followLightPos?: { x: number, y: number, z: number },
+  followLightPos?: { x: number, y: number, z: number };
   // Base control setups
   maxVelLimit?: number;
   turnVelMultiplier?: number;

src/hooks/useFollowCam.tsx

@@ -7,10 +7,16 @@ export const useFollowCam = function (props: UseFollowCamProps) {
   const { scene, camera } = useThree();
   // const { rapier, world } = useRapier();
 
+  let isMouseDown = false;
+  let previousTouch1: Touch = null;
+  let previousTouch2: Touch = null;
+
   let originZDis = props.camInitDis;
   const camMaxDis = props.camMaxDis;
   const camMinDis = props.camMinDis;
-  const camCollisionOff = 0.7;
+  const camMoveSpeed = props.camMoveSpeed;
+  const camZoomSpeed = props.camZoomSpeed;
+  const camCollisionOffset = props.camCollisionOffset;
   const pivot = useMemo(() => new THREE.Object3D(), []);
   const followCam = useMemo(() => {
     const origin = new THREE.Object3D();
@@ -40,9 +46,9 @@ export const useFollowCam = function (props: UseFollowCamProps) {
 
   // Mouse move event
   const onDocumentMouseMove = (e: MouseEvent) => {
-    if (document.pointerLockElement) {
-      pivot.rotation.y -= e.movementX * 0.002;
-      const vy = followCam.rotation.x + e.movementY * 0.002;
+    if (document.pointerLockElement || isMouseDown) {
+      pivot.rotation.y -= e.movementX * 0.002 * camMoveSpeed;
+      const vy = followCam.rotation.x + e.movementY * 0.002 * camMoveSpeed;
 
       cameraDistance = followCam.position.length();
 
@@ -57,18 +63,76 @@ export const useFollowCam = function (props: UseFollowCamProps) {
 
   // Mouse scroll event
   const onDocumentMouseWheel = (e: Event) => {
-    if (document.pointerLockElement) {
-      const vz = originZDis - (e as WheelEvent).deltaY * 0.002;
-      const vy = followCam.rotation.x + (e as WheelEvent).movementY * 0.002;
+    const vz = originZDis - (e as WheelEvent).deltaY * 0.002 * camZoomSpeed;
+    const vy = followCam.rotation.x;
+
+    if (vz >= camMaxDis && vz <= camMinDis) {
+      originZDis = vz;
+      followCam.position.z = originZDis * Math.cos(-vy);
+      followCam.position.y = originZDis * Math.sin(-vy);
+    }
+    return false;
+  };
+
+  // Touch start event
+  const onTouchStart = (e: TouchEvent) => {
+    // prevent swipe to navigate gesture
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+
+  // Touch end event
+  const onTouchEnd = (e: TouchEvent) => {
+    previousTouch1 = null
+    previousTouch2 = null
+  }
+
+  // Touch move event
+  const onTouchMove = (e: TouchEvent) => {
+    const touch1 = e.targetTouches[0];
+    const touch2 = e.targetTouches[1];
+
+    // One finger touch to rotate camera
+    if (previousTouch1 && !previousTouch2) {
+      const touch1MovementX = touch1.pageX - previousTouch1.pageX;
+      const touch1MovementY = touch1.pageY - previousTouch1.pageY;
+
+      pivot.rotation.y -= touch1MovementX * 0.005 * camMoveSpeed;
+      const vy = followCam.rotation.x + touch1MovementY * 0.005 * camMoveSpeed;
+
+      cameraDistance = followCam.position.length();
+
+      if (vy >= -0.5 && vy <= 1.5) {
+        followCam.rotation.x = vy;
+        followCam.position.y = -cameraDistance * Math.sin(-vy);
+        followCam.position.z = -cameraDistance * Math.cos(-vy);
+      }
+    }
+
+    // Two fingers touch to zoom in/out camera
+    if (previousTouch2) {
+      const prePinchDis = Math.hypot(
+        previousTouch1.pageX - previousTouch2.pageX,
+        previousTouch1.pageY - previousTouch2.pageY
+      );
+      const pinchDis = Math.hypot(
+        e.touches[0].pageX - e.touches[1].pageX,
+        e.touches[0].pageY - e.touches[1].pageY
+      );
+
+      const vz = originZDis - (prePinchDis - pinchDis) * 0.01 * camZoomSpeed;
+      const vy = followCam.rotation.x;
 
       if (vz >= camMaxDis && vz <= camMinDis) {
         originZDis = vz;
         followCam.position.z = originZDis * Math.cos(-vy);
         followCam.position.y = originZDis * Math.sin(-vy);
       }
     }
-    return false;
-  };
+
+    previousTouch1 = touch1;
+    previousTouch2 = touch2;
+  }
 
   // Custom traverse function
   // Prepare intersect objects for camera collision
@@ -106,8 +170,8 @@ export const useFollowCam = function (props: UseFollowCamProps) {
     intersects = camRayCast.intersectObjects(intersectObjects);
     if (intersects.length && intersects[0].distance <= -originZDis) {
       smallestDistance =
-        -intersects[0].distance * camCollisionOff < -0.7
-          ? -intersects[0].distance * camCollisionOff
+        -intersects[0].distance * camCollisionOffset < -0.7
+          ? -intersects[0].distance * camCollisionOffset
           : -0.7;
     } else {
       smallestDistance = originZDis;
@@ -144,11 +208,24 @@ export const useFollowCam = function (props: UseFollowCamProps) {
     followCam.add(camera);
     pivot.add(followCam);
 
+    document.addEventListener("mousedown", () => { isMouseDown = true });
+    document.addEventListener("mouseup", () => { isMouseDown = false });
     document.addEventListener("mousemove", onDocumentMouseMove);
     document.addEventListener("mousewheel", onDocumentMouseWheel);
+    // Touch event
+    document.addEventListener("touchstart", onTouchStart, { passive: false });
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("touchmove", onTouchMove);
+
     return () => {
+      document.removeEventListener("mousedown", () => { isMouseDown = true });
+      document.removeEventListener("mouseup", () => { isMouseDown = false });
       document.removeEventListener("mousemove", onDocumentMouseMove);
       document.removeEventListener("mousewheel", onDocumentMouseWheel);
+      // Touch event
+      document.removeEventListener("touchstart", onTouchStart);
+      document.removeEventListener("touchend", onTouchEnd);
+      document.removeEventListener("touchmove", onTouchMove);
     };
   });
 
@@ -159,4 +236,7 @@ export type UseFollowCamProps = {
   camInitDis: number;
   camMaxDis: number;
   camMinDis: number;
+  camMoveSpeed: number;
+  camZoomSpeed: number;
+  camCollisionOffset: number;
 };