Merge pull request #151 from musehq/dev

v2.8.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.8.2",
+  "version": "2.8.3",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [

src/ideas/primitives/RoundedBox.tsx

@@ -1,27 +1,48 @@
 import { cache } from "../../logic/cache";
 import { NamedArrayTuple } from "@react-three/drei/helpers/ts-utils";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { RoundedBoxGeometry } from "three/examples/jsm/geometries/RoundedBoxGeometry";
+import { Vector3 } from "three";
+import { MeshProps } from "@react-three/fiber";
 
 type RoundedBox = {
   args?: NamedArrayTuple<
     (width?: number, height?: number, depth?: number) => void
   >;
-} & Omit<JSX.IntrinsicElements["mesh"], "args">;
+} & Omit<MeshProps, "args"> & {
+    "scale-x"?: number;
+    "scale-y"?: number;
+    "scale-z"?: number;
+  };
+
+type CachedBox = {
+  key: string;
+  width: number;
+  height: number;
+  depth: number;
+};
+
+const local_cache: CachedBox[] = [];
 
 export function RoundedBox(props: RoundedBox) {
   const {
     args: [width = 1, height = 1, depth = 0.25] = [],
     children,
+    scale,
+    "scale-x": scaleX,
+    "scale-y": scaleY,
+    "scale-z": scaleZ,
     ...rest
   } = props;
 
+  const [locScale, setLocScale] = useState(new Vector3(1, 1, 1));
+
   const geo = useMemo(() => {
     const tolerance = 0.25; // 25% tolerance
 
-    let closestBox = undefined;
+    let closestBox: CachedBox | undefined = undefined;
     let closestOffset = Infinity;
-    for (const box of CACHED_BOXES) {
+    for (const box of local_cache) {
       const scale = box.width / width;
       const heightDiff = Math.abs(box.height - height * scale);
       const depthDiff = Math.abs(box.depth - depth * scale);
@@ -35,75 +56,37 @@ export function RoundedBox(props: RoundedBox) {
       }
     }
 
-    if (closestBox) {
-      return (cache[closestBox.key] as RoundedBoxGeometry)
-        .clone()
-        .scale(
-          width / closestBox.width,
-          height / closestBox.height,
-          depth / closestBox.depth
-        );
-    }
+    const key =
+      closestBox?.key ?? `geo_rounded_box_${width}x${height}x${depth}`;
+    const w = closestBox?.width ?? width;
+    const h = closestBox?.height ?? height;
+    const d = closestBox?.depth ?? depth;
+    const r = Math.min(w, h, d) / 2;
 
-    const radius = Math.min(width, height, depth) / 2;
-    return new RoundedBoxGeometry(width, height, depth, 4, radius);
+    const get_geo = () =>
+      cache.getResource(
+        key,
+        () => new RoundedBoxGeometry(width, height, depth, 4, r)
+      );
+
+    // make sure to cache result if it's not already cached
+    if (!closestBox) local_cache.push({ key, width, height, depth });
+
+    setLocScale(new Vector3(width / w, height / h, depth / d));
+    return get_geo();
   }, [width, height, depth]);
 
   return (
-    <mesh name="spacesvr-rounded-box" {...rest} geometry={geo}>
-      {children}
-    </mesh>
+    <group
+      name="spacesvr-rounded-box"
+      scale={scale}
+      scale-x={scaleX}
+      scale-y={scaleY}
+      scale-z={scaleZ}
+    >
+      <mesh {...rest} scale={locScale} geometry={geo}>
+        {children}
+      </mesh>
+    </group>
   );
 }
-
-type CachedBox = {
-  width: number;
-  height: number;
-  depth: number;
-  key: keyof typeof cache;
-};
-
-const CACHED_BOXES: CachedBox[] = [
-  {
-    width: 1,
-    height: 1,
-    depth: 0.25,
-    key: "geo_rounded_box_1x1x0_25",
-  },
-  {
-    width: 1,
-    height: 0.35,
-    depth: 0.125,
-    key: "geo_rounded_box_1x0_35x0_125",
-  },
-  {
-    width: 1,
-    height: 0.3,
-    depth: 0.1,
-    key: "geo_rounded_box_1x0_3x0_1",
-  },
-  {
-    width: 1,
-    height: 0.19,
-    depth: 0.23,
-    key: "geo_rounded_box_1x0_19x0_23",
-  },
-  {
-    width: 1,
-    height: 0.44,
-    depth: 0.23,
-    key: "geo_rounded_box_1x0_44x0_23",
-  },
-  {
-    width: 1,
-    height: 0.11,
-    depth: 0.06,
-    key: "geo_rounded_box_1x0_11x0_06",
-  },
-  {
-    width: 1,
-    height: 0.13,
-    depth: 0.04,
-    key: "geo_rounded_box_1x0_13x0_04",
-  },
-];

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

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

src/logic/cache.ts

@@ -59,6 +59,12 @@ export const cache = {
       () => new MeshStandardMaterial({ color: "#ff007f" })
     );
   },
+  get mat_basic_white(): MeshBasicMaterial {
+    return getResource<MeshBasicMaterial>(
+      "mat_basic_white",
+      () => new MeshBasicMaterial({ color: "white" })
+    );
+  },
   get mat_basic_black(): MeshBasicMaterial {
     return getResource<MeshBasicMaterial>(
       "mat_basic_black",
@@ -83,46 +89,4 @@ export const cache = {
       () => new MeshBasicMaterial({ color: "black", wireframe: true })
     );
   },
-  get geo_rounded_box_1x1x0_25(): RoundedBoxGeometry {
-    return getResource<RoundedBoxGeometry>(
-      "geo_rounded_box_1x1x0_25",
-      () => new RoundedBoxGeometry(1, 1, 0.25, 4, 0.125)
-    );
-  },
-  get geo_rounded_box_1x0_35x0_125(): RoundedBoxGeometry {
-    return getResource<RoundedBoxGeometry>(
-      "geo_rounded_box_1x0_35x0_125",
-      () => new RoundedBoxGeometry(1, 0.35, 0.125, 4, 0.0625)
-    );
-  },
-  get geo_rounded_box_1x0_3x0_1(): RoundedBoxGeometry {
-    return getResource<RoundedBoxGeometry>(
-      "geo_rounded_box_1x0_3x0_1",
-      () => new RoundedBoxGeometry(1, 0.3, 0.1, 4, 0.05)
-    );
-  },
-  get geo_rounded_box_1x0_19x0_23(): RoundedBoxGeometry {
-    return getResource<RoundedBoxGeometry>(
-      "geo_rounded_box_1x0_19x0_23",
-      () => new RoundedBoxGeometry(1, 0.19, 0.23, 4, 0.095)
-    );
-  },
-  get geo_rounded_box_1x0_44x0_23(): RoundedBoxGeometry {
-    return getResource<RoundedBoxGeometry>(
-      "geo_rounded_box_1x0_44x0_23",
-      () => new RoundedBoxGeometry(1, 0.44, 0.23, 4, 0.115)
-    );
-  },
-  get geo_rounded_box_1x0_11x0_06(): RoundedBoxGeometry {
-    return getResource<RoundedBoxGeometry>(
-      "geo_rounded_box_1x0_11x0_06",
-      () => new RoundedBoxGeometry(1, 0.11, 0.06, 4, 0.03)
-    );
-  },
-  get geo_rounded_box_1x0_13x0_04(): RoundedBoxGeometry {
-    return getResource<RoundedBoxGeometry>(
-      "geo_rounded_box_1x0_13x0_04",
-      () => new RoundedBoxGeometry(1, 0.13, 0.04, 4, 0.02)
-    );
-  },
 };