Refactor backend CORS settings to include default origins and improve error handling in chat services: Introduce dynamic CORS origin handling, enhance RabbitMQ message sending with fallback mechanisms, and update WebSocket service to manage pending messages. Update UI components for better accessibility and responsiveness, including adjustments to dialog and navigation elements. Enhance styling for improved user experience across various components.

frontend/src/components/Character3D.vue

@@ -12,13 +12,27 @@
 
 <script>
 import { markRaw } from 'vue';
-import * as THREE from 'three';
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 import { getApiBaseURL } from '@/utils/axios.js';
 
 /** Backend-Route: GET /api/models/3d/falukant/characters/:filename (Proxy mit Draco-Optimierung) */
 const MODELS_API_PATH = '/api/models/3d/falukant/characters';
+let threeRuntimePromise = null;
+
+async function loadThreeRuntime() {
+  if (!threeRuntimePromise) {
+    threeRuntimePromise = Promise.all([
+      import('three'),
+      import('three/addons/loaders/GLTFLoader.js'),
+      import('three/addons/loaders/DRACOLoader.js')
+    ]).then(([THREE, { GLTFLoader }, { DRACOLoader }]) => ({
+      THREE,
+      GLTFLoader,
+      DRACOLoader
+    }));
+  }
+
+  return threeRuntimePromise;
+}
 
 export default {
   name: 'Character3D',
@@ -48,9 +62,10 @@ export default {
       model: null,
       animationId: null,
       mixer: null,
-      clock: markRaw(new THREE.Clock()),
+      clock: null,
       baseYPosition: 0,
-      showFallback: false
+      showFallback: false,
+      threeRuntime: null
     };
   },
   computed: {
@@ -110,32 +125,42 @@ export default {
     }
   },
   watch: {
-    actualGender() {
-      this.loadModel();
+    async actualGender() {
+      await this.loadModel();
     },
-    ageGroup() {
-      this.loadModel();
+    async ageGroup() {
+      await this.loadModel();
     }
   },
-  mounted() {
-    this.init3D();
-    this.loadModel();
+  async mounted() {
+    await this.init3D();
+    await this.loadModel();
     this.animate();
   },
   beforeUnmount() {
     this.cleanup();
   },
   methods: {
-    init3D() {
+    async ensureThreeRuntime() {
+      if (!this.threeRuntime) {
+        this.threeRuntime = markRaw(await loadThreeRuntime());
+      }
+
+      return this.threeRuntime;
+    },
+
+    async init3D() {
       const container = this.$refs.container;
       if (!container) return;
       this.showFallback = false;
+      const { THREE } = await this.ensureThreeRuntime();
+      this.clock = markRaw(new THREE.Clock());
 
       // Scene erstellen - markRaw verwenden, um Vue's Reactivity zu vermeiden
       this.scene = markRaw(new THREE.Scene());
       if (!this.noBackground) {
         this.scene.background = new THREE.Color(0xf0f0f0);
-        this.loadBackground();
+        await this.loadBackground();
       }
 
       // Camera erstellen
@@ -174,7 +199,8 @@ export default {
       window.addEventListener('resize', this.onWindowResize);
     },
 
-    loadBackground() {
+    async loadBackground() {
+      const { THREE } = await this.ensureThreeRuntime();
       // Optimierte Versionen (512×341, ~130 KB); Originale ~3 MB
       const backgrounds = ['bg1_opt.png', 'bg2_opt.png'];
       const randomBg = backgrounds[Math.floor(Math.random() * backgrounds.length)];
@@ -202,6 +228,7 @@ export default {
 
     async loadModel() {
       if (!this.scene) return;
+      const { THREE, GLTFLoader, DRACOLoader } = await this.ensureThreeRuntime();
 
       // Altes Modell entfernen
       if (this.model) {
@@ -323,6 +350,10 @@ export default {
     animate() {
       this.animationId = requestAnimationFrame(this.animate);
 
+      if (!this.clock) {
+        return;
+      }
+
       const delta = this.clock.getDelta();
 
       // Animation-Mixer aktualisieren