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,