Merge pull request #873 from 3DStreet/model-card-previews

Model card previews
3DStreet · Oct 1, 2024 · d65a0e0 · d65a0e0
2 parents feeabc6 + 144ece4
commit d65a0e0
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 43 deletions.
diff --git a/src/assets.js b/src/assets.js
@@ -1,4 +1,5 @@
 /* global AFRAME, customElements */
+const catalog = require('./catalog.json');
 
 function buildAssetHTML(assetUrl, categories) {
   // if (!assetUrl) assetUrl = 'https://assets.3dstreet.app/';
@@ -86,21 +87,6 @@ function buildAssetHTML(assetUrl, categories) {
         <a-mixin shadow id="Character_1_M" gltf-part="src: #magic-carpet-glb; part: Character_1_M"></a-mixin>
         <a-mixin shadow id="magic-carpet" gltf-part="src: #magic-carpet-glb; part: magic-carpet"></a-mixin>
       `,
-    'vehicles-rigged': `
-        <!-- vehicles rigged -->
-        <a-mixin shadow id="sedan-rig" gltf-model="url(${assetUrl}sets/vehicles-rig/gltf-exports/draco/toyota-prius-rig.glb)" ></a-mixin>
-        <a-mixin shadow id="sedan-taxi-rig" gltf-model="url(${assetUrl}sets/vehicles-rig/gltf-exports/draco/sedan-taxi-rig.glb)"></a-mixin>
-        <a-mixin shadow id="suv-rig" gltf-model="url(${assetUrl}sets/vehicles-rig/gltf-exports/draco/suv-rig.glb)"></a-mixin>
-        <a-mixin shadow id="box-truck-rig" gltf-model="url(${assetUrl}sets/vehicles-rig/gltf-exports/draco/isuzu-truck-rig.glb)"></a-mixin>
-        <a-mixin shadow id="food-trailer-rig" gltf-model="url(${assetUrl}sets/vehicles-rig/gltf-exports/draco/food-trailer-rig.glb)"></a-mixin>
-        <a-mixin shadow id="fire-truck-rig" gltf-model="url(${assetUrl}sets/vehicles-rig/gltf-exports/draco/fire-truck-pumper-rig.glb)"></a-mixin>
-        <a-mixin shadow id="fire-ladder-rig" gltf-model="url(${assetUrl}sets/vehicles/gltf-exports/draco/fire_truck_ladder.glb)"></a-mixin>
-        <a-mixin shadow id="trash-truck-side-loading" gltf-model="url(${assetUrl}sets/vehicles/gltf-exports/draco/trash-truck-side-loading.glb)"></a-mixin>
-        <a-mixin shadow id="self-driving-cruise-car-rig" gltf-model="url(${assetUrl}sets/vehicles-rig/gltf-exports/draco/self-driving-cruise-car-rig.glb)"></a-mixin>
-        <a-mixin shadow id="self-driving-waymo-car" gltf-model="url(${assetUrl}sets/vehicles/gltf-exports/draco/waymo-self-driving-car.glb)"></a-mixin>
-        <a-mixin shadow id="tuk-tuk" gltf-model="url(${assetUrl}sets/vehicles/gltf-exports/draco/tuk-tuk.glb)"></a-mixin>
-        <a-mixin shadow id="motorbike" gltf-model="url(${assetUrl}sets/vehicles/gltf-exports/draco/two-wheeler-with-person.glb)"></a-mixin>
-      `,
     buildings: `
         <!-- blocks -->
         <a-asset-item id="blockmodel" src="${assetUrl}sets/buildings/gltf-exports/draco/buildings.glb"></a-asset-item>
@@ -307,6 +293,20 @@ function buildAssetHTML(assetUrl, categories) {
       assetsHTML += addCategoryNamesToMixins(assetsCategoryHTML, categoryName);
     }
   }
+
+  // Iterate through catalog.json and add mixins to assetsHTML
+  catalog.forEach((item) => {
+    if (item.id && item.src) {
+      const mixinHTML = `
+        <a-mixin
+          id="${item.id}"
+          shadow
+          gltf-model="url(${item.src})"
+          category="${item.category || ''}"
+        ></a-mixin>`;
+      assetsHTML += mixinHTML;
+    }
+  });
   return assetsHTML;
 }
 

diff --git a/src/catalog.json b/src/catalog.json
@@ -8,5 +8,83 @@
         "id": "bus",
         "name": "Bus New Flyer XD40",
         "description": "The New Flyer XD40 is a modern, stylish, and comfortable bus that is perfect for people in urban settings."
+    },
+    {
+        "id": "sedan-rig",
+        "name": "Sedan",
+        "src": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/toyota-prius-rig.glb",
+        "img": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/toyota-prius-rig.jpg",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "sedan-taxi-rig",
+        "name": "Sedan Taxi",
+        "src": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/sedan-taxi-rig.glb",
+        "img": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/sedan-taxi-rig.jpg",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "suv-rig",
+        "name": "SUV",
+        "src": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/suv-rig.glb",
+        "img": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/suv-rig.jpg",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "box-truck-rig",
+        "name": "Box Truck",
+        "src": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/isuzu-truck-rig.glb",
+        "img": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/box-truck-rig.jpg",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "food-trailer-rig",
+        "name": "Food Trailer",
+        "src": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/food-trailer-rig.glb",
+        "img": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/food-trailer-rig.jpg",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "fire-truck-rig",
+        "name": "Fire Truck",
+        "src": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/fire-truck-pumper-rig.glb",
+        "img": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/fire-truck-pumper-rig.jpg",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "fire-ladder-rig",
+        "name": "Fire Ladder Truck",
+        "src": "https://assets.3dstreet.app/sets/vehicles/gltf-exports/draco/fire_truck_ladder.glb",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "trash-truck-side-loading",
+        "name": "Side-Loading Trash Truck",
+        "src": "https://assets.3dstreet.app/sets/vehicles/gltf-exports/draco/trash-truck-side-loading.glb",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "self-driving-cruise-car-rig",
+        "name": "Self-Driving Cruise Car",
+        "src": "https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/self-driving-cruise-car-rig.glb",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "self-driving-waymo-car",
+        "name": "Self-Driving Waymo Car",
+        "src": "https://assets.3dstreet.app/sets/vehicles/gltf-exports/draco/waymo-self-driving-car.glb",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "tuk-tuk",
+        "name": "Tuk-Tuk",
+        "src": "https://assets.3dstreet.app/sets/vehicles/gltf-exports/draco/tuk-tuk.glb",
+        "category": "vehicles-rigged"
+    },
+    {
+        "id": "motorbike",
+        "name": "Motorbike",
+        "src": "https://assets.3dstreet.app/sets/vehicles/gltf-exports/draco/two-wheeler-with-person.glb",
+        "category": "vehicles-rigged"
     }
 ]
diff --git a/src/editor/components/components/AddLayerPanel/cardsData.js b/src/editor/components/components/AddLayerPanel/cardsData.js