dynamic resource adder

webxr-cube/src/components/XRRenderer.tsx

@@ -10,7 +10,7 @@ import {ARBottomBar} from "./ARBottomBar";
 import {RoomEnvironment} from "three/examples/jsm/environments/RoomEnvironment";
 import {addLightToScene, createCamera, createPlacementRing, createRenderer, setSceneBackground} from "./Setup.ts";
 
-import {ModelType} from "../model/ModelType.ts"; // bottom UI for selecting objects
+import {ModelEmojiMap, ModelName, ModelTypeMap} from "../model/ModelType.ts"; // bottom UI for selecting objects
 
 
 function createARButton(renderer: WebGLRenderer, overlayRef: React.RefObject<HTMLDivElement>) {
@@ -136,23 +136,17 @@ export const XRRenderer: React.FC = () => {
       let objectToAdd;
 
       // Choose what object to add based on selection
-      if (name === ModelType.CUBE) {
-        objectToAdd = new Cube(position);
-      } else if (name === ModelType.WATERMILL) {
-        objectToAdd = new GLTFModel("/fantasy/watermill.glb", position, "/fantasy/colormap.png");
-      } else if (name === ModelType.TREE) {
-        objectToAdd = new GLTFModel("/fantasy/tree.glb", position, "/fantasy/colormap.png");
-      } else if (name === ModelType.CROISSANT) {
-        objectToAdd = new GLTFModel("/food/croissant.glb", position, "/food/colormap.png");
-      } else {
-        objectToAdd = new Cube(position); // fallback
-      }
+        if (name === ModelName.CUBE) {
+            objectToAdd = new Cube(position);
+        } else {
+            objectToAdd = new GLTFModel(`/${ModelTypeMap[name as ModelName]}/${name}.glb`, position, `/${ModelTypeMap[name as ModelName]}/colormap.png`)
+        }
 
-      const audio = new Audio('/sounds/cash.mp3');
-      audio.play();
+          const audio = new Audio('/sounds/cash.mp3');
+          audio.play();
 
-      // Add the object to the scene (via manager)
-      blockManager.addObject(objectToAdd);
+          // Add the object to the scene (via manager)
+          blockManager.addObject(objectToAdd);
     };
 
     // Expose function globally for debugging in browser console
@@ -218,6 +212,15 @@ export const XRRenderer: React.FC = () => {
     (window as any).addSelectedObject?.(name); // add object immediately
   };
 
+const items = [];
+
+for (const key in ModelName) {
+    items.push({
+        name: ModelName[key as keyof typeof ModelName],
+        emoji: ModelEmojiMap[key as keyof typeof ModelEmojiMap],
+    });
+}
+
   // --- 🔸 Render layout ---
   return (
       <div style={{ width: "100vw", height: "100vh", position: "relative" }}>
@@ -251,17 +254,24 @@ export const XRRenderer: React.FC = () => {
           </button>
 
           {/* Bottom bar appears only during active AR session */}
-          {isSessionActive && (
-              <ARBottomBar
-                  objectOptions={[
-                    { name: ModelType.CUBE, emoji: "🧊" },
-                    { name: ModelType.WATERMILL, emoji: "🌊" },
-                    { name: ModelType.TREE ,emoji: "🌳" },
-                    { name: ModelType.CROISSANT, emoji: "🥐" },
-                  ]}
-                  onSelect={handleSelect}
-              />
-          )}
+          {/*{isSessionActive && (*/}
+          {/*    <ARBottomBar*/}
+          {/*        objectOptions={[*/}
+          {/*          { name: ModelType.CUBE, emoji: "🧊" },*/}
+          {/*          { name: ModelType.WATERMILL, emoji: "🌊" },*/}
+          {/*          { name: ModelType.TREE ,emoji: "🌳" },*/}
+          {/*          { name: ModelType.CROISSANT, emoji: "🥐" },*/}
+          {/*        ]}*/}
+          {/*        onSelect={handleSelect}*/}
+          {/*    />*/}
+          {/*)}*/}
+
+            {isSessionActive && (
+                <ARBottomBar
+                    objectOptions={items}
+                    onSelect={handleSelect}
+                />
+            )}
         </div>
       </div>
   );

webxr-cube/src/model/ModelType.ts

+// @ts-ignore
 export enum ModelType {
+    FANTASY = 'fantasy',
+    FOOD = 'food',
+    GENERIC = ""
+}
+
+// @ts-ignore
+export enum ModelName {
     CUBE = 'Cube',
-    FOUNTAIN = "Fountain",
-    TREE = "Tree",
-    WATERMILL = "Watermill",
-    WHEEL = "Wheel",
-    WINDMILL = "Windmill",
-    BREAD = "Bread",
-    BURGER = "Burger",
-    CROISSANT = "Croissant",
-    PIZZA_BOX = "Pizza Box",
+    FOUNTAIN = 'Fountain',
+    TREE = 'Tree',
+    WATERMILL = 'Watermill',
+    WHEEL = 'Wheel',
+    BREAD = 'Bread',
+    BURGER = 'Burger',
+    CROISSANT = 'Croissant',
+    PIZZA_BOX = 'Pizza Box',
 }
 
+export const ModelEmojiMap: Record<ModelName, string> = {
+    [ModelName.CUBE]: '🧊',
+    [ModelName.FOUNTAIN]: '⛲',
+    [ModelName.TREE]: '🌳',
+    [ModelName.WATERMILL]: '💧',
+    [ModelName.WHEEL]: '🛞',
+    [ModelName.BREAD]: '🍞',
+    [ModelName.BURGER]: '🍔',
+    [ModelName.CROISSANT]: '🥐',
+    [ModelName.PIZZA_BOX]: '🍕',
+};
+
+export const ModelTypeMap: Record<ModelName, ModelType> = {
+    [ModelName.CUBE]: ModelType.GENERIC,
+    [ModelName.FOUNTAIN]: ModelType.FANTASY,
+    [ModelName.TREE]: ModelType.FANTASY,
+    [ModelName.WATERMILL]: ModelType.FANTASY,
+    [ModelName.WHEEL]: ModelType.FANTASY,
+    [ModelName.BREAD]: ModelType.FOOD,
+    [ModelName.BURGER]: ModelType.FOOD,
+    [ModelName.CROISSANT]: ModelType.FOOD,
+    [ModelName.PIZZA_BOX]: ModelType.FOOD,
+};
+
+export function getModelPath(name: ModelName): string {
+    const type = ModelTypeMap[name];
+    const fileName = name.toLowerCase();
+    return `/${type}/${fileName}.glb`;
+}
+
+