Merge pull request #139 from musehq/dev

alex-shortt · web-flow · commit 23f1f55a95e9 · 2022-11-26T21:08:33.000-08:00
v2.6.4
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [
diff --git a/src/ideas/basis/VisualIdea/index.tsx b/src/ideas/basis/VisualIdea/index.tsx
@@ -64,7 +64,7 @@ export function VisualIdea(props: VisualIdeaProps) {
     if (!mat?.userData?.shader || !limiter.isReady(clock)) return;
 
     mat.userData.shader.uniforms.time.value =
-      clock.getElapsedTime() / 6 + seed * 1000;
+      clock.elapsedTime / 6 + seed * 1000;
 
     mat.userData.shader.uniforms.color.value.set(col.get());
   });
diff --git a/src/ideas/basis/VisualWorld/index.tsx b/src/ideas/basis/VisualWorld/index.tsx
@@ -66,8 +66,7 @@ export function VisualWorld(props: VisualWorldProps) {
   useFrame(({ clock }) => {
     if (!limiter.isReady(clock) || !mat || !mat.userData.shader) return;
 
-    mat.userData.shader.uniforms.time.value =
-      clock.getElapsedTime() + SEED * 1000;
+    mat.userData.shader.uniforms.time.value = clock.elapsedTime + SEED * 1000;
   });
 
   return (
diff --git a/src/ideas/modifiers/Floating.tsx b/src/ideas/modifiers/Floating.tsx
@@ -1,7 +1,6 @@
 import { ReactNode, useRef } from "react";
-import { useFrame } from "@react-three/fiber";
 import { Group } from "three";
-import { useLimiter } from "../../logic/limiter";
+import { useLimitedFrame } from "../../logic/limiter";
 
 type FloatingProps = {
   height?: number;
@@ -14,14 +13,12 @@ export function Floating(props: FloatingProps) {
 
   const group = useRef<Group>(null);
   const seed = useRef(Math.random());
-  const limiter = useLimiter(75);
 
-  useFrame(({ clock }) => {
-    if (!group.current || !limiter.isReady(clock)) return;
+  useLimitedFrame(75, ({ clock }) => {
+    if (!group.current) return;
 
     group.current.position.y =
-      height *
-      Math.sin(clock.getElapsedTime() * speed * 0.4 + seed.current * 10000);
+      height * Math.sin(clock.elapsedTime * speed * 0.4 + seed.current * 10000);
   });
 
   return (
diff --git a/src/ideas/modifiers/Interactable/components/MobileDesktopInteractable.tsx b/src/ideas/modifiers/Interactable/components/MobileDesktopInteractable.tsx
@@ -71,14 +71,14 @@ export default function MobileDesktopInteractable(props: InteractableProps) {
   useEffect(() => {
     const startPress = () => {
       RAYCASTER.ray.at(1, down.start);
-      down.time = clock.getElapsedTime();
+      down.time = clock.elapsedTime;
     };
 
     const endPress = () => {
       if (!onClick || !group.current) return;
       const newPos = RAYCASTER.ray.at(1, new Vector3());
       const dist = down.start.distanceTo(newPos);
-      const timeDiff = clock.getElapsedTime() - down.time;
+      const timeDiff = clock.elapsedTime - down.time;
       if (dist > MAX_DRAG || timeDiff > CLICK_TIMEOUT) return;
       // either look for hover state or re-do raycast
       if (DETECT_HOVER) {
diff --git a/src/ideas/modifiers/Spinning.tsx b/src/ideas/modifiers/Spinning.tsx
@@ -1,7 +1,6 @@
 import { ReactNode, useRef, useState } from "react";
 import { Group } from "three";
-import { useFrame } from "@react-three/fiber";
-import { useLimiter } from "../../logic/limiter";
+import { useLimitedFrame } from "../../logic/limiter";
 
 type Props = {
   children: ReactNode;
@@ -15,18 +14,16 @@ export function Spinning(props: Props) {
 
   const group = useRef<Group>(null);
   const [seed] = useState(Math.random());
-  const limiter = useLimiter(75);
 
-  useFrame(({ clock }) => {
-    if (!group.current || !limiter.isReady(clock)) return;
+  useLimitedFrame(75, ({ clock }) => {
+    if (!group.current) return;
 
     group.current.rotation.x =
-      clock.getElapsedTime() * xSpeed * 0.25 + xSpeed * seed * 100;
+      clock.elapsedTime * xSpeed * 0.25 + xSpeed * seed * 100;
     group.current.rotation.y =
-      clock.getElapsedTime() * ySpeed * (0.25 + seed / 10) +
-      ySpeed * seed * 1000;
+      clock.elapsedTime * ySpeed * (0.25 + seed / 10) + ySpeed * seed * 1000;
     group.current.rotation.z =
-      clock.getElapsedTime() * zSpeed * 0.25 + zSpeed * seed * 40;
+      clock.elapsedTime * zSpeed * 0.25 + zSpeed * seed * 40;
   });
 
   return (
diff --git a/src/ideas/modifiers/Tool/modifiers/HUD.tsx b/src/ideas/modifiers/Tool/modifiers/HUD.tsx
@@ -56,6 +56,7 @@ export default function HUD(props: HUDProps) {
   const [thisEuler] = useState(new Euler(0, 0, 0, "YXZ"));
   const [dummy1] = useState(new Quaternion());
   const [dummy2] = useState(new Quaternion());
+  const [hud] = useState(new Vector2());
 
   const [spring, set] = useSpring(() => ({
     offset: [0, 0],
@@ -77,9 +78,8 @@ export default function HUD(props: HUDProps) {
     lerpedPos.lerp(targetPos, alpha);
 
     // calculate x position based on camera and screen width
-    const hud = getHudPos(lerpedPos, camera as PerspectiveCamera, distance);
-    const { x, y } = hud;
-    group.current.position.set(x, y, -distance);
+    getHudPos(lerpedPos, camera as PerspectiveCamera, distance, hud);
+    group.current.position.set(hud.x, hud.y, -distance);
 
     // calculate rotation velocities about the respective ROTATION axis (not screen space)
     dummy1.copy(lastQuat);
@@ -125,10 +125,9 @@ export default function HUD(props: HUDProps) {
     // bob a bit based on player velocity
     const vel_len = velocity.get().length() > 1 ? 1 : 0;
     const strength = bobStrength || Math.max(lerpedPos.length(), 0.05);
-    x_axis_vel +=
-      Math.sin(clock.getElapsedTime() * 15) * vel_len * 0.2 * strength;
+    x_axis_vel += Math.sin(clock.elapsedTime * 15) * vel_len * 0.2 * strength;
     y_axis_vel +=
-      Math.cos(clock.getElapsedTime() * 20 + 12) * vel_len * 0.1 * strength;
+      Math.cos(clock.elapsedTime * 20 + 12) * vel_len * 0.1 * strength;
 
     // set spring targets based on velocities
     const scale_ang = 0.1;
diff --git a/src/ideas/ui/TextInput/logic/blink.ts b/src/ideas/ui/TextInput/logic/blink.ts
@@ -22,7 +22,7 @@ export const useCaretBlink = (rate = 1): BlinkManager => {
 
   useFrame(({ clock }) => {
     if (!blinkRef.current) return;
-    const diff = clock.getElapsedTime() - startTime.current;
+    const diff = clock.elapsedTime - startTime.current;
     if (diff < RESET_TIMEOUT) {
       blinkRef.current.visible = true;
     } else {
@@ -36,7 +36,7 @@ export const useCaretBlink = (rate = 1): BlinkManager => {
   });
 
   const reset = () => {
-    startTime.current = clock.getElapsedTime();
+    startTime.current = clock.elapsedTime;
   };
 
   return { blinkRef, reset };
diff --git a/src/ideas/ui/TextInput/logic/select.ts b/src/ideas/ui/TextInput/logic/select.ts
@@ -79,7 +79,7 @@ export const getClickType = (
   lastClickTime: MutableRefObject<number>,
   lastDoubleClickTime: MutableRefObject<number>
 ): 1 | 2 | 3 => {
-  const time = clock.getElapsedTime();
+  const time = clock.elapsedTime;
   const clickTime = time - lastClickTime.current;
   const doubleClickTime = time - lastDoubleClickTime.current;
 
diff --git a/src/layers/Environment/ui/PauseMenu/index.tsx b/src/layers/Environment/ui/PauseMenu/index.tsx
@@ -48,7 +48,7 @@ export default function PauseMenu(props: PauseMenuProps) {
   const PAUSE_ITEMS: PauseItem[] = [
     ...pauseMenuItems,
     {
-      text: "v2.6.3",
+      text: "v2.6.4",
       link: "https://www.npmjs.com/package/spacesvr",
     },
     ...menuItems,
diff --git a/src/layers/Player/components/controls/PointerLockControls.tsx b/src/layers/Player/components/controls/PointerLockControls.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useCallback, useRef, useState } from "react";
-import { useFrame, useThree } from "@react-three/fiber";
-import { Euler, Vector3 } from "three";
+import { useEffect, useCallback, useRef } from "react";
+import { useThree } from "@react-three/fiber";
+import { Euler } from "three";
 import { PauseEvent, useEnvironment } from "../../../Environment";
-import * as THREE from "three";
+import { isTyping } from "../../../../logic/dom";
 
 const MIN_POLAR_ANGLE = 0; // radians
 const MAX_POLAR_ANGLE = Math.PI; // radians
@@ -25,24 +25,14 @@ export default function PointerLockCamera() {
   const { paused, setPaused, events } = useEnvironment();
 
   const { current: euler } = useRef(new Euler(0, 0, 0, "YXZ"));
-  const [dummy] = useState(new Vector3());
   const isLocked = useRef(false);
   const lock = () => domElement.requestPointerLock();
   const unlock = () => domElement.ownerDocument.exitPointerLock();
 
-  useFrame(() => {
-    if (isLocked.current) {
-      const lookAt = new THREE.Vector3(0, 0, -1);
-      lookAt.applyQuaternion(camera.quaternion);
-      dummy.set(1, 0, 1);
-      lookAt.multiply(dummy).normalize();
-    }
-  });
-
   // update camera while controls are locked
   const onMouseMove = useCallback(
     (event: MouseEvent) => {
-      if (!isLocked.current) return;
+      if (!isLocked.current || isTyping()) return;
 
       const movementX =
         // @ts-ignore
diff --git a/src/layers/Player/logic/bob.ts b/src/layers/Player/logic/bob.ts
@@ -18,8 +18,8 @@ export const useBob = (
     const IS_GROUNDED = Math.abs(velocity.current.y) < 0.01;
     bob.set(IS_MOVING && IS_GROUNDED ? 1 : 0);
     const amt = bob.get();
-    const y = Math.sin(clock.getElapsedTime() * 20) * 0.0055 * amt;
-    const x = Math.cos(clock.getElapsedTime() * 15 + 0.3) * 0.002 * amt;
+    const y = Math.sin(clock.elapsedTime * 20) * 0.0055 * amt;
+    const x = Math.cos(clock.elapsedTime * 15 + 0.3) * 0.002 * amt;
     offset.set(x, y, 0);
     offset.applyQuaternion(camera.quaternion);
     camera.position.add(offset);
diff --git a/src/logic/drag.ts b/src/logic/drag.ts
@@ -65,7 +65,7 @@ export const useDrag = (
       dragPoint.set(touch.clientX, touch.clientY);
       const delta = dragPoint.sub(downPoint);
 
-      const time = clock.getElapsedTime();
+      const time = clock.elapsedTime;
       const elapsed = time - lastTouchRead.current;
       velocity.set(delta.x / elapsed / aspect, delta.y / elapsed / aspect);
       lastTouchRead.current = time;
diff --git a/src/logic/hud.ts b/src/logic/hud.ts
@@ -6,17 +6,26 @@ const PADDING_Y = 0.125;
 export const getHudPos = (
   pos: [number, number] | Vector2,
   camera: PerspectiveCamera,
-  distance: number
+  distance: number,
+  target?: Vector2
 ) => {
-  const { width, height } = getHudDims(camera, distance);
+  const vFOV = (camera.fov * Math.PI) / 180;
+  const height = 2 * Math.tan(vFOV / 2) * Math.abs(distance);
+  const width = height * camera.aspect;
 
   const px = Array.isArray(pos) ? pos[0] : pos.x;
   const py = Array.isArray(pos) ? pos[1] : pos.y;
 
   const x = px * (width - PADDING_X * 2) * 0.5;
   const y = py * (height - PADDING_Y * 2) * 0.5;
 
-  return { x, y };
+  if (target) {
+    target.x = x;
+    target.y = y;
+    return target;
+  } else {
+    return new Vector2(x, y);
+  }
 };
 
 export const getHudDims = (camera: PerspectiveCamera, distance: number) => {
diff --git a/src/logic/limiter.ts b/src/logic/limiter.ts
@@ -17,7 +17,7 @@ export const useLimiter = (frequency: number): Limiter => {
 
   return {
     isReady: (clock: Clock) => {
-      const time = clock.getElapsedTime();
+      const time = clock.elapsedTime;
       const ready = time - lastCall.current > 1 / frequency;
       if (ready) {
         lastCall.current = time;
diff --git a/src/logic/material.ts b/src/logic/material.ts
@@ -57,7 +57,7 @@ export const useModifiedStandardShader = (
 
   useLimitedFrame(70, ({ clock }) => {
     if (!time || !mat.userData.shader?.uniforms?.time) return;
-    mat.userData.shader.uniforms.time.value = clock.getElapsedTime();
+    mat.userData.shader.uniforms.time.value = clock.elapsedTime;
   });
 
   return mat;
diff --git a/src/logic/visible.ts b/src/logic/visible.ts
@@ -11,7 +11,7 @@ import { useLimitedFrame } from "./limiter";
 export const useVisible = (val: SpringValue<number>) => {
   const [visible, setVisible] = useState(false);
 
-  useLimitedFrame(30, () => {
+  useLimitedFrame(5, () => {
     const v = val.get();
     if (visible && v === 0) setVisible(false);
     else if (!visible && v > 0) setVisible(true);
diff --git a/yarn.lock b/yarn.lock
@@ -1856,9 +1856,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001332:
-  version "1.0.30001346"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz#e895551b46b9cc9cc9de852facd42f04839a8fbe"
-  integrity sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==
+  version "1.0.30001434"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz"
+  integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==
 
 cannon-es-debugger@^1.0.0:
   version "1.0.0"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "spacesvr",`
`3`		`- "version": "2.6.3",`
	`3`	`+ "version": "2.6.4",`
`4`	`4`	`"private": true,`
`5`	`5`	`"description": "A standardized reality for future of the 3D Web",`
`6`	`6`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ export default function PauseMenu(props: PauseMenuProps) {`
`48`	`48`	`const PAUSE_ITEMS: PauseItem[] = [`
`49`	`49`	`...pauseMenuItems,`
`50`	`50`	`{`
`51`		`- text: "v2.6.3",`
	`51`	`+ text: "v2.6.4",`
`52`	`52`	`link: "https://www.npmjs.com/package/spacesvr",`
`53`	`53`	`},`
`54`	`54`	`...menuItems,`