Add catalogue model retrieval

src/objectList.vue

@@ -9,14 +9,15 @@
         <v-expansion-panels v-for = "(subcats, categoryName) in objLib" :key="categoryName">
           <v-expansion-panel >
             <v-expansion-panel-title>{{ categoryName }}</v-expansion-panel-title>
-            <v-container v-for="(entries, subCategory) in subcats" :key = "subCategory" class="py-1 px-1">
-              <VcsLabel>{{subCategory}}</VcsLabel>
+            <v-container v-for="(entries, subCategory) in subcats" :key = "subCategory" class=" py-1 px-1 border-b-md" expandable>
+              <v-col>
+              <VcsLabel class="mb-4">{{subCategory}}</VcsLabel>
               <v-list>
                 <v-row>
                 <v-list-item
                     v-for="entry in entries"
                     :key="entry.title"
-                    class="d-flex align-center"
+                    class="d-flex align-center my-0 mx-1 border"
                     @click="fetchCatalogueModel(entry.model)"
                     style ="cursor: pointer;"
                 >
@@ -24,6 +25,7 @@
                 </v-list-item>
                 </v-row>
               </v-list>
+              </v-col>
               <v-divider/>
             </v-container>
           </v-expansion-panel>
@@ -100,7 +102,7 @@
 <script>
 import {
   Icons,
-  NotificationType,
+  NotificationType, VcsButton,
   VcsExpansionPanel,
   VcsFormButton,
   VcsFormSection,
@@ -207,12 +209,72 @@ function getCatalogueEntries(json, linkPrefix) {
     return part;
   }
 
-function retrieveCatalogModel(modelLink){
+async function retrieveCatalogModel(modelLink){
   console.log(modelLink);
   if(preloadedModels.value[modelLink] != null){
-
+    const catModel = preloadedModels.value[modelLink];
+    const x = window.innerWidth / 2;
+    const y = window.innerHeight / 2;
+    const cart = new Cartesian2(x, y);
+    setupModelFunction(app, cart, catModel.url, catModel.modelLink);
   } else {
+    const loader = new GLTFLoader();
+    loader.load(
+        modelLink,
+        function (gltf) {
+          const bounds = new THREE.Box3().setFromObject(gltf.scene);
+          const x = bounds.min.x + (bounds.max.x - bounds.min.x) / 2;
+          const z = bounds.min.z + (bounds.max.z - bounds.min.z) / 2;
+          const m = new THREE.Matrix4().makeTranslation(-x, -bounds.min.y, -z);
+          gltf.scene.applyMatrix4(m);
+
+          const exporter = new GLTFExporter();
+          const options = {
+            binary: true,
+            animations: gltf.animations,
+          };
 
+          exporter.parse(
+              gltf.scene,
+              function (output) {
+                const blob = new Blob([output], { type: 'application/octet-stream' });
+                const url = URL.createObjectURL(blob);
+
+                projectStateObject.objects.push({
+                  name: modelLink,
+                  url: url,
+                });
+                const x = window.innerWidth / 2;
+                const y = window.innerHeight / 2;
+                const cart = new Cartesian2(x, y);
+                setupModelFunction(app, cart, url, modelLink);
+                preloadedModels.value[modelLink] = {
+                  url: url,
+                  modelLink: modelLink,
+                };
+              },
+              function (error) {
+                app.notifier.add({
+                  type: NotificationType.ERROR,
+                  message:
+                      'Ein Fehler ist beim Laden der glTF Datei aufgetreten. Bitte vergewissern Sie sich, dass es sich um eine gültige glTF2.0 Datei handelt.',
+                  timeout: 20000,
+                });
+              },
+              options
+          );
+        },
+        undefined,
+        function (error) {
+          app.notifier.add({
+            type: NotificationType.ERROR,
+            message:
+                'Ein Fehler ist beim Laden der glTF Datei aufgetreten. Bitte vergewissern Sie sich, dass es sich um eine gültige glTF2.0 Datei handelt.' +
+                ' Fehlermeldung: ' + error.message,
+            timeout: 20000,
+          });
+        }
+    );
   }
 }
 
@@ -323,6 +385,7 @@ function uploadModel() {
   export default {
     name: 'objectList',
     components: {
+      VcsButton,
       VcsLabel,
       VcsExpansionPanel,
       VcsTreeview,