Merge pull request #133 from musehq/dev

v2.5.4

Author: alex-shortt

examples/worlds/Media.tsx

@@ -1,4 +1,4 @@
-import { StandardReality, LostWorld, Model, Button } from "spacesvr";
+import { StandardReality, LostWorld, Model, Button, Image } from "spacesvr";
 import Link from "../ideas/Link";
 import Title from "../ideas/Title";
 import Test from "../ideas/Text";
@@ -8,9 +8,7 @@ import Analytics from "../ideas/Analytics";
 export default function Media() {
   const MODELS = [
     "https://d27rt3a60hh1lx.cloudfront.net/content/on-air-light/light_and_mic_01.glb.br",
-    "https://d27rt3a60hh1lx.cloudfront.net/models/MortHead-1644445725/mort_head_00.glb.gz",
     "https://d27rt3a60hh1lx.cloudfront.net/models/spotLight-1642615872/spotLight_2.glb.gz",
-    "https://d27rt3a60hh1lx.cloudfront.net/models/jesus-1622883798/jesus.glb.gz",
     "https://d1htv66kutdwsl.cloudfront.net/ae483f1d-77dc-4402-963d-b4105cd6c944/334823a4-b069-45fb-92e8-c88c2b55ba4a.glb",
   ];
 
@@ -32,22 +30,30 @@ export default function Media() {
       </Link>
 
       <group position-z={-5}>
-        <Button onClick={next} position={[-0.75, 0.5, 0]}>
+        <Button onClick={next} position={[0.5, 0.5, 0]}>
           next model
         </Button>
-        <Test name="basic model">
+        <Test name="basic model" position-x={1.2}>
           <Model src={MODEL_URL} />
         </Test>
-        <Test name="center model" position-x={1.2}>
+        <Test name="center model" position-x={1.2 * 2}>
           <Model center src={MODEL_URL} />
         </Test>
-        <Test name="normalize model" position-x={1.2 * 2}>
+        <Test name="normalize model" position-x={1.2 * 3}>
           <Model normalize src={MODEL_URL} />
         </Test>
-        <Test name="normalize and center model" position-x={1.2 * 3}>
+        <Test name="normalize and center model" position-x={1.2 * 4}>
           <Model normalize center src={MODEL_URL} />
         </Test>
       </group>
+      <group position-z={-5}>
+        <Test name="fallback model (wireframe)" position-x={-1.2}>
+          <Model normalize center src="sdjkfnoi" />
+        </Test>
+        <Test name="fallback image" position-x={-1.2 * 2}>
+          <Image src="sdjkfnoi" />
+        </Test>
+      </group>
     </StandardReality>
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [
@@ -66,7 +66,8 @@
     "nipplejs": "0.8.1",
     "node-fetch": "^2.6.1",
     "peerjs": "^1.4.6",
-    "react-device-detect": "^1.13.1"
+    "react-device-detect": "^1.13.1",
+    "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
     "react": ">=18.1",

src/ideas/media/Model.tsx

@@ -3,6 +3,7 @@ import { GroupProps } from "@react-three/fiber";
 import { useModel } from "../../logic";
 import { Box3, Vector3 } from "three";
 import { SkeletonUtils } from "three-stdlib";
+import { ErrorBoundary } from "react-error-boundary";
 
 type ModelProps = {
   src: string;
@@ -37,10 +38,28 @@ function UnsuspensedModel(props: ModelProps) {
   );
 }
 
+function FallbackModel(props: ModelProps) {
+  const { src, center, normalize, ...rest } = props;
+
+  return (
+    <group name="spacesvr-fallback-model" {...rest}>
+      <mesh>
+        <boxBufferGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color="black" wireframe />
+      </mesh>
+    </group>
+  );
+}
+
 export function Model(props: ModelProps) {
   return (
-    <Suspense fallback={null}>
-      <UnsuspensedModel {...props} />
-    </Suspense>
+    <ErrorBoundary
+      fallbackRender={() => <FallbackModel {...props} />}
+      onError={(err) => console.error(err)}
+    >
+      <Suspense fallback={null}>
+        <UnsuspensedModel {...props} />
+      </Suspense>
+    </ErrorBoundary>
   );
 }

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

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

src/logic/assets.ts

@@ -4,7 +4,7 @@ import { useThree } from "@react-three/fiber";
 import { useGLTF } from "@react-three/drei";
 import { suspend } from "suspend-react";
 import { useMemo } from "react";
-import { getFallbackModel, getFallbackTexture } from "./fallback";
+import { getFallbackTexture } from "./fallback";
 import { GLTF } from "three-stdlib";
 
 let ktx2loader: KTX2Loader | undefined;
@@ -52,19 +52,12 @@ export function useImage(url: string): Texture {
 export function useModel(url: string): GLTF {
   const gl = useThree((st) => st.gl);
 
-  try {
-    return useGLTF(url, true, true, (loader) => {
-      if (!ktx2loader) {
-        ktx2loader = new KTX2Loader();
-        ktx2loader.setTranscoderPath(KTX_CDN);
-        ktx2loader.detectSupport(gl);
-      }
-      loader.setKTX2Loader(ktx2loader);
-    });
-  } catch {
-    return suspend(
-      (): Promise<GLTF> => new Promise((res) => getFallbackModel().then(res)),
-      []
-    );
-  }
+  return useGLTF(url, true, true, (loader) => {
+    if (!ktx2loader) {
+      ktx2loader = new KTX2Loader();
+      ktx2loader.setTranscoderPath(KTX_CDN);
+      ktx2loader.detectSupport(gl);
+    }
+    loader.setKTX2Loader(ktx2loader);
+  });
 }

src/logic/fallback.ts

@@ -1,13 +1,4 @@
-import {
-  BoxBufferGeometry,
-  CanvasTexture,
-  Group,
-  Mesh,
-  MeshStandardMaterial,
-} from "three";
-import { GLTF } from "three-stdlib";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
-import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter";
+import { CanvasTexture } from "three";
 
 let fallbackTexture: CanvasTexture | undefined;
 
@@ -54,36 +45,3 @@ export function getFallbackTexture(): CanvasTexture {
 
   return fallbackTexture;
 }
-
-/**
- * Provides a default model
- */
-export function getFallbackModel(): Promise<GLTF> {
-  const group = new Group();
-  const geo = new BoxBufferGeometry(1, 1, 1);
-  const mat = new MeshStandardMaterial({ color: "black", wireframe: true });
-  const mesh = new Mesh(geo, mat);
-  group.add(mesh);
-
-  const exporter = new GLTFExporter();
-  const loader = new GLTFLoader();
-  return new Promise((res) =>
-    exporter.parse(
-      group,
-      (gltf) => {
-        loader.parse(
-          gltf as ArrayBuffer,
-          "",
-          // @ts-ignore
-          (gltf) => res(gltf as GLTF),
-          (err) => console.error(err)
-        );
-      },
-      {
-        binary: true,
-        embedImages: true,
-        onlyVisible: false,
-      }
-    )
-  );
-}

yarn.lock

@@ -967,6 +967,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
+  integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
 "@babel/template@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -3729,6 +3736,13 @@ react-dom@^18.1.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
+react-error-boundary@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -3796,6 +3810,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.13.10:
+  version "0.13.10"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
+  integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"