load models from catalog, some refactoring

geoblocks · Nov 14, 2024 · 7bcff63 · 7bcff63
1 parent b1b2930
commit 7bcff63
Show file tree

Hide file tree

Showing 10 changed files with 210 additions and 164 deletions.
diff --git a/src/apps/permits/demoPermitConfig.ts b/src/apps/permits/demoPermitConfig.ts
@@ -1,4 +1,5 @@
 import type {IPermitsConfig} from './ingv-config-permits.js';
+import {PrimitiveCollection} from '@cesium/engine';
 
 export const config: IPermitsConfig = {
   languages: ['de', 'fr', 'en', 'it'],
@@ -28,10 +29,13 @@ export const config: IPermitsConfig = {
       },
       layers: {
         // tilesets: ['@cesium/googlePhotorealistic'],
-        // models: ['@demo/sofa', '@demo/thatopensmall'],
+        models: ['@demo/sofa', '@demo/thatopensmall'],
         imageries: ['@geoadmin/pixel-karte-farbe'],
         // terrain: '@geoadmin/terrain',
       },
+      collections: {
+        models: new PrimitiveCollection(),
+      },
       camera: {
         position: [6.628484, 46.5, 100],
         orientation: {

diff --git a/src/apps/permits/index.ts b/src/apps/permits/index.ts
@@ -13,49 +13,24 @@ import type {IPermitsConfig} from './ingv-config-permits.js';
 import '../../plugins/cesium/ngv-plugin-cesium-widget';
 import '../../plugins/cesium/ngv-plugin-cesium-upload';
 import '../../plugins/cesium/ngv-plugin-cesium-model-interact';
-import type {CesiumWidget, DataSourceCollection, Model} from '@cesium/engine';
+import type {CesiumWidget, DataSourceCollection} from '@cesium/engine';
 
-import {
-  Math as CesiumMath,
-  Ellipsoid,
-  HeadingPitchRoll,
-  Transforms,
-  PrimitiveCollection,
-} from '@cesium/engine';
+import {PrimitiveCollection} from '@cesium/engine';
 import type {ViewerInitializedDetails} from '../../plugins/cesium/ngv-plugin-cesium-widget.js';
 
 @customElement('ngv-app-permits')
 @localized()
 export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
   @state()
   private viewer: CesiumWidget;
-  private primitiveCollection: PrimitiveCollection = new PrimitiveCollection();
+  private uploadedModelsCollection: PrimitiveCollection =
+    new PrimitiveCollection();
   private dataSourceCollection: DataSourceCollection;
 
   constructor() {
     super(() => import('./demoPermitConfig.js'));
   }
 
-  modelCallback(name: string, model: Model): void {
-    // This position the model where the camera is
-    console.log('positioning', name);
-    const positionClone = this.viewer.camera.position.clone();
-
-    const fixedFrameTransform = Transforms.localFrameToFixedFrameGenerator(
-      'north',
-      'west',
-    );
-
-    const modelOrientation = [90, 0, 0];
-    const modelMatrix = Transforms.headingPitchRollToFixedFrame(
-      positionClone,
-      new HeadingPitchRoll(...modelOrientation.map(CesiumMath.toRadians)),
-      Ellipsoid.WGS84,
-      fixedFrameTransform,
-    );
-    model.modelMatrix = modelMatrix;
-  }
-
   render(): HTMLTemplateResult {
     const r = super.render();
     if (r && !this.config) {
@@ -67,24 +42,34 @@ export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
           slot="menu"
           style="display: flex; flex-direction: column; row-gap: 10px;"
         >
+          <ngv-plugin-cesium-model-interact
+            .viewer="${this.viewer}"
+            .dataSourceCollection="${this.dataSourceCollection}"
+            .primitiveCollection="${this.config.app.cesiumContext.collections
+              .models}"
+            .options="${{listTitle: 'Catalog'}}"
+          ></ngv-plugin-cesium-model-interact>
+          <div
+            style="width: 100%;border: 1px solid #E0E3E6;margin: 5px 0;"
+          ></div>
           <ngv-plugin-cesium-upload
             .viewer="${this.viewer}"
-            .primitiveCollection="${this.primitiveCollection}"
+            .primitiveCollection="${this.uploadedModelsCollection}"
             .storeOptions="${this.config.app.cesiumContext.storeOptions}"
           ></ngv-plugin-cesium-upload>
           <ngv-plugin-cesium-model-interact
             .viewer="${this.viewer}"
             .dataSourceCollection="${this.dataSourceCollection}"
-            .primitiveCollection="${this.primitiveCollection}"
+            .primitiveCollection="${this.uploadedModelsCollection}"
             .storeOptions="${this.config.app.cesiumContext.storeOptions}"
+            .options="${{listTitle: 'Uploaded models'}}"
           ></ngv-plugin-cesium-model-interact>
         </div>
         <ngv-plugin-cesium-widget
           .cesiumContext=${this.config.app.cesiumContext}
-          .modelCallback=${this.modelCallback.bind(this)}
           @viewerInitialized=${(evt: CustomEvent<ViewerInitializedDetails>) => {
             this.viewer = evt.detail.viewer;
-            this.viewer.scene.primitives.add(this.primitiveCollection);
+            this.viewer.scene.primitives.add(this.uploadedModelsCollection);
             this.dataSourceCollection = evt.detail.dataSourceCollection;
           }}
         ></ngv-plugin-cesium-widget>

diff --git a/src/catalogs/demoCatalog.ts b/src/catalogs/demoCatalog.ts
@@ -12,13 +12,19 @@ export const catalog: INGVCatalog = {
           credit: 'test',
         },
       },
+      position: [6.628484, 46.5],
+      height: 0,
+      rotation: 0,
     },
     sofa: {
       type: 'model',
       options: {
         url: 'https://raw.GithubUserContent.com/KhronosGroup/glTF-Sample-Assets/main/./Models/SheenWoodLeatherSofa/glTF-Binary/SheenWoodLeatherSofa.glb',
         credit: 'Khonos',
       },
+      position: [6.628484, 46.5],
+      height: 0,
+      rotation: 0,
     },
     // to complete
   },

diff --git a/src/interfaces/cesium/ingv-cesium-context.ts b/src/interfaces/cesium/ingv-cesium-context.ts
@@ -1,4 +1,4 @@
-import type {CesiumWidget, Globe} from '@cesium/engine';
+import type {CesiumWidget, Globe, PrimitiveCollection} from '@cesium/engine';
 import type {INGVCatalog} from './ingv-catalog.js';
 
 export interface IngvCesiumContext {
@@ -14,6 +14,10 @@ export interface IngvCesiumContext {
     models?: string[];
     imageries: string[];
   };
+  collections?: {
+    models?: PrimitiveCollection;
+    tiles3d?: PrimitiveCollection;
+  };
   /**
    * These are lists of selected layers.
    */

diff --git a/src/interfaces/cesium/ingv-layers.ts b/src/interfaces/cesium/ingv-layers.ts
@@ -6,6 +6,7 @@ import type {
 } from '@cesium/engine';
 
 import type {CesiumTerrainProvider, Model} from '@cesium/engine';
+import type {Cartesian3} from '@cesium/engine';
 
 export type INGVCesiumImageryTypes =
   | INGVCesiumWMSImagery
@@ -18,7 +19,7 @@ export type INGVCesiumAllTypes =
   | INGVCesiumImageryTypes;
 
 export type INGVCesiumAllPrimitiveTypes =
-  | INGVCesiumModel
+  | INGVCesiumModelConfig
   | INGVIFC
   | INGVCesium3DTiles;
 
@@ -29,17 +30,30 @@ export interface INGVCesium3DTiles {
   options?: ConstructorParameters<typeof Cesium3DTileset>[0];
 }
 
-export interface INGVCesiumModel {
+export interface INGVCesiumModelConfig {
   type: 'model';
   options?: Parameters<typeof Model.fromGltfAsync>[0];
+  position?: [number, number];
+  height?: number;
+  rotation?: number;
+}
+
+export interface INGVCesiumModel extends Model {
+  id: {
+    dimensions?: Cartesian3;
+    name: string;
+  };
 }
 
 export interface INGVIFC {
   type: 'ifc';
   url: string;
   options?: {
-    modelOptions: Omit<INGVCesiumModel['options'], 'url'>;
+    modelOptions: Omit<INGVCesiumModelConfig['options'], 'url'>;
   };
+  position: [number, number];
+  height: number;
+  rotation: number;
 }
 
 export interface INGVCesiumTerrain {