v1.2.22 - allow ssl local server, remove crosshair on mobile, move some touch functionality, add alpha offset on mobile gyro controls

Author: alex-shortt

.gitignore

@@ -34,4 +34,6 @@ yarn-error.log*
 
 staging
 dist
-*.tgz
+*.tgz
+*.key
+*.crt

examples/package.json

@@ -17,6 +17,7 @@
   },
   "scripts": {
     "start": "react-app-rewired start",
+    "start-ssl": "HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key react-app-rewired start",
     "build": "react-app-rewired build",
     "eject": "react-app-rewired eject"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "1.2.21",
+  "version": "1.2.22",
   "private": true,
   "description": "An Environment for WebXR Spaces",
   "keywords": [

src/core/controls/GyroControls.tsx

@@ -1,7 +1,23 @@
 import { DeviceOrientationControls } from "three/examples/jsm/controls/DeviceOrientationControls";
-import { MutableRefObject, ReactNode, useEffect, useState } from "react";
+import {
+  MutableRefObject,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useFrame, useThree } from "react-three-fiber";
-import { Quaternion, Vector3 } from "three";
+import { Quaternion, Vector2, Vector3 } from "three";
+import { config, useSpring } from "react-spring";
+import {
+  Touch,
+  DefaultTouch,
+  getCurrentTouch,
+  tappedNipple,
+} from "../utils/touch";
+import { getSpringValues } from "../utils/spring";
+
+const ALPHA_SENSITIVITY = 0.008;
 
 type GyroControlsProps = {
   quaternion: MutableRefObject<Quaternion>;
@@ -15,6 +31,8 @@ type GyroControlsProps = {
  * A required fallback component will be used in the place of the gyroscope
  * controls until they are accepted and in use.
  *
+ * Some code sampled from TouchFPSCamera.ts
+ *
  * @param props
  * @constructor
  */
@@ -26,6 +44,14 @@ export const GyroControls = (props: GyroControlsProps) => {
   const [controls, setControls] = useState<DeviceOrientationControls>();
   const [enableGyro, setEnableGyro] = useState(false);
 
+  // dragging for y axis offset
+  const touchStartPos = useRef<Touch>(DefaultTouch);
+  const currentOffset = useRef(0);
+  const [spring, setSpring] = useSpring(() => ({
+    a: [0],
+    config: { ...config.default, precision: 0.001 },
+  }));
+
   // try to prompt user for device controls
   useEffect(() => {
     if (!controls) {
@@ -52,6 +78,8 @@ export const GyroControls = (props: GyroControlsProps) => {
     }
 
     if (controls) {
+      const [a] = getSpringValues(spring);
+      controls.alphaOffset = -a * ALPHA_SENSITIVITY;
       controls.update();
       quaternion.current = camera.quaternion;
     }
@@ -62,6 +90,60 @@ export const GyroControls = (props: GyroControlsProps) => {
     }
   });
 
+  // touch move scripts
+  const onTouchStart = (ev: TouchEvent) => {
+    if (touchStartPos.current.id !== -1) {
+      return;
+    }
+
+    if (tappedNipple(ev)) {
+      touchStartPos.current = DefaultTouch;
+      return;
+    }
+
+    // get last in list (most recent touch) to not confuse with movement
+    const touchIndex = ev.touches.length - 1;
+    const { clientX, clientY, identifier: id } = ev.touches[touchIndex];
+
+    touchStartPos.current = { pos: new Vector2(clientX, clientY), id };
+  };
+
+  const onTouchMove = (ev: TouchEvent) => {
+    const touch = getCurrentTouch(touchStartPos.current.id, ev.touches);
+
+    if (!touch) {
+      return;
+    }
+
+    const extraOffset = touch.clientX - touchStartPos.current.pos.x;
+    setSpring({ a: [currentOffset.current + extraOffset] });
+  };
+  const onTouchEnd = (ev: TouchEvent) => {
+    const touch = getCurrentTouch(touchStartPos.current.id, ev.changedTouches);
+
+    if (!touch) {
+      return;
+    }
+
+    const finalOffset = touch.clientX - touchStartPos.current.pos.x;
+    setSpring({ a: [currentOffset.current + finalOffset] });
+    currentOffset.current += finalOffset;
+    touchStartPos.current.id = -1;
+  };
+
+  // register touch events
+  useEffect(() => {
+    document.addEventListener("touchstart", onTouchStart);
+    document.addEventListener("touchmove", onTouchMove);
+    document.addEventListener("touchend", onTouchEnd);
+
+    return () => {
+      document.removeEventListener("touchstart", onTouchStart);
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onTouchEnd);
+    };
+  }, []);
+
   if (!enableGyro) {
     return <>{fallback}</>;
   }

src/core/controls/TouchFPSCamera.tsx

@@ -1,22 +1,18 @@
 import { useRef, useEffect, MutableRefObject } from "react";
 import { useFrame, useThree } from "react-three-fiber";
 import { Quaternion, Vector3, Vector2, Euler } from "three";
+import {
+  Touch,
+  DefaultTouch,
+  getCurrentTouch,
+  tappedNipple,
+} from "../utils/touch";
 
 type DragFPSCameraProps = {
   quaternion: MutableRefObject<Quaternion>;
   position: MutableRefObject<Vector3>;
 };
 
-type Touch = {
-  pos: Vector2;
-  id: number;
-};
-
-const DefaultTouch = {
-  pos: new Vector2(0, 0),
-  id: -1,
-};
-
 const DRAG_SENSITIVITY = new Vector2(0.7, 0.7);
 
 /**
@@ -54,26 +50,6 @@ const TouchFPSCamera = (props: DragFPSCameraProps) => {
     return newEuler;
   };
 
-  const tappedNipple = (ev: TouchEvent) => {
-    // get the relevant touched element (casted as an Element)
-    const ele = ev.touches[ev.touches.length - 1].target as Element;
-    return (
-      ele.classList.contains("nipple-container") ||
-      ele.classList.contains("front") ||
-      ele.classList.contains("back")
-    );
-  };
-
-  const getCurrentTouch = (touches: TouchList) => {
-    const len = touches.length;
-    for (let i = 0; i < len; i++) {
-      if (touchStartPos.current.id === touches[i].identifier) {
-        return touches[i];
-      }
-    }
-    return undefined;
-  };
-
   // touch move scripts
   const onTouchStart = (ev: TouchEvent) => {
     if (touchStartPos.current.id !== -1) {
@@ -93,7 +69,7 @@ const TouchFPSCamera = (props: DragFPSCameraProps) => {
   };
 
   const onTouchMove = (ev: TouchEvent) => {
-    const touch = getCurrentTouch(ev.touches);
+    const touch = getCurrentTouch(touchStartPos.current.id, ev.touches);
 
     if (!touch) {
       return;
@@ -105,7 +81,7 @@ const TouchFPSCamera = (props: DragFPSCameraProps) => {
     quaternion.current = camera.quaternion;
   };
   const onTouchEnd = (ev: TouchEvent) => {
-    const touch = getCurrentTouch(ev.changedTouches);
+    const touch = getCurrentTouch(touchStartPos.current.id, ev.changedTouches);
 
     if (!touch) {
       return;

src/core/ui/Crosshair.tsx

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { isMobile } from "react-device-detect";
 
 const Element = styled.div`
   position: fixed;
@@ -25,6 +26,10 @@ const Element = styled.div`
 `;
 
 const Crosshair = () => {
+  if (isMobile) {
+    return null;
+  }
+
   return <Element />;
 };
 

src/core/utils/touch.ts

@@ -0,0 +1,33 @@
+import { Vector2 } from "three";
+
+export type Touch = {
+  pos: Vector2;
+  id: number;
+};
+
+export const DefaultTouch = {
+  pos: new Vector2(0, 0),
+  id: -1,
+};
+
+// get the current touch from touch array
+export const getCurrentTouch = (curTouchId: number, touches: TouchList) => {
+  const len = touches.length;
+  for (let i = 0; i < len; i++) {
+    if (curTouchId === touches[i].identifier) {
+      return touches[i];
+    }
+  }
+  return undefined;
+};
+
+// check whether given touch tapped nipple
+export const tappedNipple = (ev: TouchEvent) => {
+  // get the relevant touched element (casted as an Element)
+  const ele = ev.touches[ev.touches.length - 1].target as Element;
+  return (
+    ele.classList.contains("nipple-container") ||
+    ele.classList.contains("front") ||
+    ele.classList.contains("back")
+  );
+};