STEP support for CAD Preview

aas-web-ui/package.json

@@ -33,6 +33,7 @@
     "md5": "^2.3.0",
     "mermaid": "^11.11.0",
     "mime": "^4.0.7",
+    "occt-import-js": "^0.0.23",
     "pinia": "^3.0.3",
     "prismjs": "^1.30.0",
     "qrcode": "^1.5.4",

aas-web-ui/src/components/Plugins/CADPreview.vue

@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+    // ts-expect-error Could not find a declaration file for module 'occt-import-js'.
+    import occtimportjs from 'occt-import-js';
     import * as THREE from 'three';
     import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
     import { OutlineEffect } from 'three/examples/jsm/effects/OutlineEffect.js';
@@ -55,7 +57,7 @@
     });
 
     // Methods
-    function initThree(): void {
+    async function initThree(): Promise<void> {
         // create a new Three.js scene
         const scene = new THREE.Scene();
         scene.background = new THREE.Color(0x343434);
@@ -108,6 +110,8 @@
             contentType == 'text/x-sla'
         ) {
             importSTL(scene);
+        } else if (contentType.endsWith('step') || contentType.endsWith('stp')) {
+            await importSTEP(scene);
             // check if the file is an obj file
         } else if (contentType == 'application/obj') {
             importOBJ(scene);
@@ -259,6 +263,66 @@
             })
             .catch((error) => console.error('Error loading GLTF:', error));
     }
+
+    // Function to import a STEP file
+    async function importSTEP(scene: THREE.Scene): Promise<void> {
+        try {
+            const response = await fetch(localPathValue.value, {
+                headers: {
+                    Authorization: `Bearer ${authToken.value}`,
+                },
+            });
+            const buffer = await response.arrayBuffer();
+            const stepFile = new Uint8Array(buffer);
+
+            const occt = await occtimportjs();
+            const result = occt.ReadStepFile(stepFile, null);
+            console.log('STEP parse result:', result);
+
+            // Prüfen ob mehrere Meshes zurückkamen
+            if (result.meshes && Array.isArray(result.meshes)) {
+                result.meshes.forEach((m) => {
+                    const geometry = new THREE.BufferGeometry();
+                    geometry.setAttribute('position', new THREE.Float32BufferAttribute(m.positions, 3));
+                    if (m.normals && m.normals.length > 0) {
+                        geometry.setAttribute('normal', new THREE.Float32BufferAttribute(m.normals, 3));
+                    } else {
+                        geometry.computeVertexNormals();
+                    }
+
+                    const material = new THREE.MeshStandardMaterial({
+                        color: m.color ? new THREE.Color(m.color.r, m.color.g, m.color.b) : 0xcccccc,
+                        metalness: 0.1,
+                        roughness: 0.8,
+                    });
+
+                    const mesh = new THREE.Mesh(geometry, material);
+                    mesh.castShadow = true;
+                    mesh.receiveShadow = true;
+                    mesh.scale.multiplyScalar(0.03);
+                    scene.add(mesh);
+                });
+                // } else if (result.mesh) {
+                //     // Fallback falls nur ein Mesh-Objekt vorliegt
+                //     const geometry = new THREE.BufferGeometry();
+                //     geometry.setAttribute('position', new THREE.Float32BufferAttribute(result.mesh.positions, 3));
+                //     if (result.mesh.normals && result.mesh.normals.length > 0) {
+                //         geometry.setAttribute('normal', new THREE.Float32BufferAttribute(result.mesh.normals, 3));
+                //     } else {
+                //         geometry.computeVertexNormals();
+                //     }
+
+                //     const material = new THREE.MeshStandardMaterial({ color: 0xcccccc });
+                //     const mesh = new THREE.Mesh(geometry, material);
+                //     mesh.scale.multiplyScalar(0.03);
+                //     scene.add(mesh);
+            } else {
+                console.warn('Keine Meshdaten in STEP-Datei gefunden.');
+            }
+        } catch (error) {
+            console.error('Error loading STEP:', error);
+        }
+    }
 </script>
 
 <style>

aas-web-ui/src/types/occt-import-js.d.ts

@@ -0,0 +1,100 @@
+// occt-import-js.d.ts
+// TypeScript type definitions for occt-import-js
+
+declare module 'occt-import-js' {
+    /**
+     * The main OCCT import interface.
+     * All functions are provided once the WebAssembly module is fully loaded.
+     */
+    export interface OcctImport {
+        /**
+         * Reads a STEP file from a binary buffer and returns the parsed geometry data.
+         * @param buffer STEP file content as Uint8Array
+         * @param config Optional import configuration
+         */
+        ReadStepFile(buffer: Uint8Array, config?: StepIgesImportConfig | null): ImportResult;
+
+        /**
+         * Reads an IGES file from a binary buffer and returns the parsed geometry data.
+         * @param buffer IGES file content as Uint8Array
+         * @param config Optional import configuration
+         */
+        ReadIgesFile(buffer: Uint8Array, config?: StepIgesImportConfig | null): ImportResult;
+
+        /**
+         * Reads a BREP file from a binary buffer and returns the parsed geometry data.
+         * @param buffer BREP file content as Uint8Array
+         */
+        ReadBrepFile(buffer: Uint8Array): ImportResult;
+
+        /**
+         * Export geometry data to STEP file format.
+         */
+        WriteStepFile(data: ExportData, config?: StepIgesExportConfig | null): Uint8Array;
+
+        /**
+         * Export geometry data to IGES file format.
+         */
+        WriteIgesFile(data: ExportData, config?: StepIgesExportConfig | null): Uint8Array;
+
+        /**
+         * Export geometry data to BREP file format.
+         */
+        WriteBrepFile(data: ExportData): Uint8Array;
+    }
+
+    export interface StepIgesImportConfig {
+        /**
+         * Import units (e.g., "mm", "inch"). If undefined, defaults are used.
+         */
+        lengthUnit?: string;
+        /**
+         * Whether to sew edges into a solid (default: true).
+         */
+        sewDtol?: number;
+        /**
+         * Whether to allow free edges (default: false).
+         */
+        allowFreeEdges?: boolean;
+    }
+
+    export interface StepIgesExportConfig {
+        /**
+         * Export units (e.g., "mm", "inch"). If undefined, defaults are used.
+         */
+        lengthUnit?: string;
+        /**
+         * STEP schema ("AP203" or "AP214").
+         */
+        schema?: string;
+    }
+
+    export interface ImportResult {
+        meshes: ImportedMesh[];
+        shapes?: any[]; // optional raw OCCT shape data
+    }
+
+    export interface ImportedMesh {
+        name?: string;
+        positions: number[]; // x,y,z triplets
+        normals?: number[]; // nx,ny,nz triplets
+        triangles: number[]; // vertex indices
+        color?: { r: number; g: number; b: number; a?: number };
+        edges?: EdgeData[];
+    }
+
+    export interface EdgeData {
+        vertices: [number, number, number][];
+    }
+
+    export interface ExportData {
+        shapes: any[]; // raw OCCT shape objects
+    }
+
+    /**
+     * Loads the OCCT WebAssembly module asynchronously
+     */
+    function occtimportjs(options?: unknown): Promise<OcctImport>;
+
+    export default occtimportjs;
+}

aas-web-ui/tsconfig.json

@@ -19,5 +19,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx", "tests/**/*.vue", "vite.config.mts", "vitest.config.ts"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx", "tests/**/*.vue", "vite.config.mts", "vitest.config.ts", "src/types/occt-import-js.d.ts"]
 }

aas-web-ui/vite.config.mts

@@ -34,6 +34,32 @@ function copyWebIfcWasmPlugin() {
     };
 }
 
+function copyOcctImportJsWasmFilesPlugin() {
+    return {
+        name: 'copy-occt-import-js-wasm',
+        buildStart() {
+            // Copy WASM files from occt-import-js to public/wasm directory
+            const sourceDir = 'node_modules/occt-import-js/dist';
+            const targetDir = 'public/wasm';
+
+            if (!existsSync(targetDir)) {
+                mkdirSync(targetDir, { recursive: true });
+            }
+
+            const wasmFiles = ['occt-import-js.wasm'];
+
+            wasmFiles.forEach((file) => {
+                const sourcePath = join(sourceDir, file);
+                const targetPath = join(targetDir, file);
+
+                if (existsSync(sourcePath)) {
+                    copyFileSync(sourcePath, targetPath);
+                }
+            });
+        },
+    };
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
     process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
@@ -42,6 +68,7 @@ export default defineConfig(({ mode }) => {
     return {
         plugins: [
             copyWebIfcWasmPlugin(),
+            copyOcctImportJsWasmFilesPlugin(),
             AutoImport({
                 imports: ['vue'],
                 dts: 'src/auto-imports.d.ts',
@@ -74,11 +101,21 @@ export default defineConfig(({ mode }) => {
         server: {
             port: 3000,
             hmr: true, // enable hot module replacement
+            fs: {
+                allow: ['..'],
+            },
         },
         css: {
             preprocessorOptions: {
                 sass: {},
             },
         },
+        assetsInclude: ['**/*.wasm'],
+        optimizeDeps: {
+            exclude: ['occt-import-js'],
+        },
+        define: {
+            global: 'globalThis',
+        },
     };
 });

aas-web-ui/yarn.lock

@@ -3828,6 +3828,11 @@ object.assign@^4.1.4:
     has-symbols "^1.1.0"
     object-keys "^1.1.1"
 
+occt-import-js@^0.0.23:
+  version "0.0.23"
+  resolved "https://registry.yarnpkg.com/occt-import-js/-/occt-import-js-0.0.23.tgz#1916aacd5b228e92da5de631ae048ca152281778"
+  integrity sha512-RFfYQXYFX5C1mB1Aywm0ShcUKzXOr/VzTnlzhBSDJOR6YCAPt1HYCzeXWg1vwwjn/cUxwqRNhhtf1dlewoZYCQ==
+
 optionator@^0.9.3:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"