diff --git a/package.json b/package.json index a1f01bc6..b13e6be7 100755 --- a/package.json +++ b/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": [ diff --git a/src/ideas/primitives/RoundedBox.tsx b/src/ideas/primitives/RoundedBox.tsx index 3ca6ce47..9c057479 100644 --- a/src/ideas/primitives/RoundedBox.tsx +++ b/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; +} & Omit & { + "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 ( - - {children} - + + + {children} + + ); } - -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", - }, -]; diff --git a/src/layers/Environment/ui/PauseMenu/index.tsx b/src/layers/Environment/ui/PauseMenu/index.tsx index 1804a0ba..b5d7331e 100644 --- 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.8.2", + text: "v2.8.3", link: "https://www.npmjs.com/package/spacesvr", }, ...menuItems, diff --git a/src/logic/cache.ts b/src/logic/cache.ts index b2d464fa..61c752d6 100644 --- a/src/logic/cache.ts +++ b/src/logic/cache.ts @@ -59,6 +59,12 @@ export const cache = { () => new MeshStandardMaterial({ color: "#ff007f" }) ); }, + get mat_basic_white(): MeshBasicMaterial { + return getResource( + "mat_basic_white", + () => new MeshBasicMaterial({ color: "white" }) + ); + }, get mat_basic_black(): MeshBasicMaterial { return getResource( "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( - "geo_rounded_box_1x1x0_25", - () => new RoundedBoxGeometry(1, 1, 0.25, 4, 0.125) - ); - }, - get geo_rounded_box_1x0_35x0_125(): RoundedBoxGeometry { - return getResource( - "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( - "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( - "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( - "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( - "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( - "geo_rounded_box_1x0_13x0_04", - () => new RoundedBoxGeometry(1, 0.13, 0.04, 4, 0.02) - ); - }, };