Merge pull request #97 from musehq/dev

v2.0.5

Author: spacesvr

examples/worlds/Starter.tsx

@@ -16,6 +16,8 @@ export default function Starter() {
     "https://d27rt3a60hh1lx.cloudfront.net/audio/LucidMondayMix.mp3"
   );
 
+  const [size, setSize] = useState(1);
+
   setTimeout(() => {
     setAudio(
       "https://d27rt3a60hh1lx.cloudfront.net/content/muse.place/whoisabnel/dark.mp3"
@@ -89,9 +91,10 @@ export default function Starter() {
       <Interactable
         onHover={() => setHovering(true)}
         onUnHover={() => setHovering(false)}
+        onClick={() => setSize(Math.random() + 1)}
       >
         <mesh position={[-3, 0.5, 0]}>
-          <boxBufferGeometry args={[1, 0.25, 0.1]} />
+          <boxBufferGeometry args={[size, size * 0.25, size * 0.1]} />
           <meshStandardMaterial color={hovering ? "red" : "blue"} />
         </mesh>
       </Interactable>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [
@@ -52,7 +52,7 @@
     "@react-three/cannon": "^6.3.0",
     "@react-three/drei": "9.11.3",
     "@react-three/fiber": "^8.0.22",
-    "@react-three/xr": "^3.5.0",
+    "@react-three/xr": "^4.0.1",
     "culori": "^0.18.2",
     "nipplejs": "0.8.1",
     "node-fetch": "^2.6.1",

src/ideas/modifiers/Interactable.tsx renamed to src/ideas/modifiers/Interactable/components/MobileDesktopInteractable.tsx

@@ -1,28 +1,16 @@
-import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { Group, Vector2 } from "three";
 import { useFrame, useThree } from "@react-three/fiber";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Group, Vector2 } from "three";
 import { isMobile } from "react-device-detect";
-import { useLimiter } from "../../logic/limiter";
-import { usePlayer } from "../../layers/Player";
-
-type Props = {
-  onClick?: () => void;
-  onHover?: () => void;
-  onUnHover?: () => void;
-  children: ReactNode | ReactNode[];
-};
+import { InteractableProps } from "../index";
+import { usePlayer } from "../../../../layers/Player";
+import { useLimiter } from "../../../../logic/limiter";
 
 /**
- *
- * Interactable adds on click and hover methods to any group of Object3D's.
- *
  * This is a bit convoluted for the sake of working with the ClickDragControls
  * (i.e. the test for a double click)
- *
- * @param props
- * @constructor
  */
-export function Interactable(props: Props) {
+export default function MobileDesktopInteractable(props: InteractableProps) {
   const { onClick, onHover, onUnHover, children } = props;
 
   const gl = useThree((state) => state.gl);

src/ideas/modifiers/Interactable/components/XRInteractable.tsx

@@ -0,0 +1,14 @@
+import { Interactive } from "@react-three/xr";
+import { InteractableProps } from "../index";
+
+export default function XRInteractable(props: InteractableProps) {
+  const { onClick, onHover, onUnHover, children } = props;
+
+  return (
+    <group name="spacesvr-interactable">
+      <Interactive onHover={onHover} onBlur={onUnHover} onSelect={onClick}>
+        {children}
+      </Interactive>
+    </group>
+  );
+}

src/ideas/modifiers/Interactable/index.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { useEnvironment } from "../../../layers/Environment";
+import XRInteractable from "./components/XRInteractable";
+import MobileDesktopInteractable from "./components/MobileDesktopInteractable";
+
+export type InteractableProps = {
+  onClick?: () => void;
+  onHover?: () => void;
+  onUnHover?: () => void;
+  children: ReactNode | ReactNode[];
+};
+
+/**
+ * Interactable adds on click and hover methods to any group of Object3D's.
+ */
+export function Interactable(props: InteractableProps) {
+  const { device } = useEnvironment();
+
+  if (device.xr) return <XRInteractable {...props} />;
+  return <MobileDesktopInteractable {...props} />;
+}

src/ideas/physical/HDRI.tsx

@@ -1,53 +1,27 @@
-import { useEffect, useMemo } from "react";
-import { useThree } from "@react-three/fiber";
-import { NearestFilter, RGBAFormat, WebGLCubeRenderTarget } from "three";
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { Suspense } from "react";
+import { Environment } from "@react-three/drei";
 
 type HDRIProps = {
   src: string;
-  size?: number;
   disableBackground?: boolean;
   disableEnvironment?: boolean;
 };
 
 export function HDRI(props: HDRIProps) {
-  const { src, size = 1204, disableBackground, disableEnvironment } = props;
-
-  const { gl, scene } = useThree();
-
-  const loader = useMemo(() => new RGBELoader(), []);
-
-  useEffect(() => {
-    loader.load(src, (texture) => {
-      const opts = {
-        format: RGBAFormat,
-        generateMipmaps: false,
-        magFilter: NearestFilter,
-        minFilter: NearestFilter,
-      };
-
-      const envMap = new WebGLCubeRenderTarget(
-        size,
-        opts
-      ).fromEquirectangularTexture(gl, texture).texture;
-
-      // sent envmap onto scene env and background
-      if (!disableBackground) {
-        scene.background = envMap;
-      }
-      if (!disableEnvironment) {
-        scene.environment = envMap;
-      }
-
-      texture.dispose();
-
-      return () => {
-        scene.background = null;
-        scene.environment = null;
-        envMap.dispose();
-      };
-    });
-  }, [src, scene, loader, disableBackground, disableEnvironment]);
-
-  return null;
+  const { src, disableBackground, disableEnvironment } = props;
+
+  return (
+    <Suspense fallback={null}>
+      <Environment
+        files={src}
+        background={
+          !disableBackground && !disableEnvironment
+            ? true
+            : disableEnvironment && !disableBackground
+            ? "only"
+            : false
+        }
+      />
+    </Suspense>
+  );
 }

src/layers/Environment/index.tsx

@@ -6,7 +6,7 @@ import PauseMenu from "./ui/PauseMenu";
 import Crosshair from "./ui/Crosshair";
 import { RegisterMenuItems } from "./logic/menu";
 import { Props as ContainerProps } from "@react-three/fiber/dist/declarations/src/web/Canvas";
-import { VRCanvas } from "@react-three/xr";
+import { XRCanvas } from "@react-three/xr";
 import { defaultCanvasProps } from "./logic/canvas";
 import { EnvironmentContext, useEnvironmentState } from "./logic/environment";
 export * from "./logic/environment";
@@ -44,12 +44,12 @@ export function Environment(props: EnvironmentLayerProps) {
           {pauseMenu || <PauseMenu dev={dev} title={name} />}
           <Crosshair />
         </EnvironmentContext.Provider>
-        <VRCanvas {...defaultCanvasProps} {...canvasProps}>
+        <XRCanvas {...defaultCanvasProps} {...canvasProps}>
           <EnvironmentContext.Provider value={state}>
             <RegisterMenuItems />
             {children}
           </EnvironmentContext.Provider>
-        </VRCanvas>
+        </XRCanvas>
       </Container>
     </>
   );

src/layers/Environment/logic/menu.tsx

@@ -76,7 +76,12 @@ export const useVRMenuItem = (): MenuItem | undefined => {
 
     if (session.current === undefined) {
       const sessionInit = {
-        optionalFeatures: ["local-floor", "bounded-floor", "hand-tracking"],
+        optionalFeatures: [
+          "local-floor",
+          "bounded-floor",
+          "hand-tracking",
+          "layers",
+        ],
       };
       xr.requestSession("immersive-vr", sessionInit).then(onSessionStarted);
     } else {

src/layers/Environment/ui/GlobalStyles.tsx

@@ -28,13 +28,6 @@ const globalStyles = css`
       font-size: 24px;
     }
   }
-
-  // used to remove the "enter vr" button from react-xr
-  body > button,
-  body > a {
-    display: none;
-    pointer-events: none;
-  }
 `;
 
 export default function GlobalStyles() {

src/layers/Environment/ui/PauseMenu/index.tsx

@@ -48,7 +48,7 @@ export default function PauseMenu(props: PauseMenuProps) {
   const PAUSE_ITEMS: PauseItem[] = [
     ...pauseMenuItems,
     {
-      text: "v2.0.4",
+      text: "v2.0.5",
       link: "https://www.npmjs.com/package/spacesvr",
     },
     ...menuItems,

src/layers/Player/controls/VRControllerMovement.tsx

@@ -81,7 +81,8 @@ const VRControllerMovement = (props: VRControllerMovementProps) => {
 
     // average human height is ~1.7, player height is 1.
     // somehow subtracting 1 is more correct idk
-    player.position.y -= 1;
+    // update: now 1.4 seems right? who fukn knows
+    player.position.y -= 1.4;
   });
 
   return (

yarn.lock

@@ -1331,13 +1331,13 @@
     suspend-react "^0.0.8"
     zustand "^3.7.1"
 
-"@react-three/xr@^3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-three/xr/-/xr-3.5.0.tgz#90e41eed9b6fc492f9fb3c656ce658741d38b61a"
-  integrity sha512-Kb+dTjyOYwCw7CErZi2UYvhvTy41144HHpHpl/vvaa2B1xQKVK5vvbXJqUDzyrAcCZj5RUUx5e6W/u6NMa7miQ==
+"@react-three/xr@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@react-three/xr/-/xr-4.0.1.tgz#374cde93471bc1625908a75a5e759a368913cff2"
+  integrity sha512-ns1Tzg2mAHNbCs6BKuqqsvl80VXXGQIs6N7ys8XRHz/UK3Kofbxcgz2XIzxR+honpcy/4pW6lihlgnMnuHAOgw==
   dependencies:
-    react-merge-refs "^1.1.0"
-    three-stdlib "^2.8.6"
+    three-stdlib "^2.12.1"
+    zustand "^3.7.1"
 
 "@rollup/plugin-commonjs@^16.0.0":
   version "16.0.0"
@@ -4233,7 +4233,7 @@ three-mesh-bvh@^0.5.10:
   resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.5.11.tgz#6c64f80557c00d3d2bb85667444787449ae352cb"
   integrity sha512-blVHefpW+aRqB7XZcL8MEJrVwGoX9COqCgGccgzhLoPwLEdIWz4bs2FGdLECIpAEHHThL6nQodQ2S8WAs/H3CA==
 
-three-stdlib@^2.10.1, three-stdlib@^2.8.6:
+three-stdlib@^2.10.1:
   version "2.10.2"
   resolved "https://registry.yarnpkg.com/three-stdlib/-/three-stdlib-2.10.2.tgz#4909153c491d29439d199aa47747993ba1dd4a2b"
   integrity sha512-A4++o7962jrRDo0Mm2I+2LaT62RRA8p8IJyHFnPfOxSk+90qGSm2vSfSdJ+3HugzABjStQyQuvnQmdxxZolzkw==
@@ -4249,6 +4249,22 @@ three-stdlib@^2.10.1, three-stdlib@^2.8.6:
     potpack "^1.0.1"
     zstddec "^0.0.2"
 
+three-stdlib@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/three-stdlib/-/three-stdlib-2.12.1.tgz#b63de05cf7f7803e630a7c0c5887e85ae06178ca"
+  integrity sha512-G3SSsCOBiWa0sjjPt+K28ikQ84Plm/ZVUozMfWagK59kZqBWcaPVXpOThkAgvdBpm2zCWLW3edAoW/4XIbljVQ==
+  dependencies:
+    "@babel/runtime" "^7.16.7"
+    "@webgpu/glslang" "^0.0.15"
+    chevrotain "^10.1.2"
+    draco3d "^1.4.1"
+    fflate "^0.6.9"
+    ktx-parse "^0.2.1"
+    mmd-parser "^1.0.4"
+    opentype.js "^1.3.3"
+    potpack "^1.0.1"
+    zstddec "^0.0.2"
+
 three@0.139.2:
   version "0.139.2"
   resolved "https://registry.yarnpkg.com/three/-/three-0.139.2.tgz#b110799a15736df673b9293e31653a4ac73648dd"