Add 3D character model integration and update dependencies

- Introduced a new CharacterModel3D component for rendering 3D character models in OverviewView.
- Updated package.json and package-lock.json to include 'three' library for 3D graphics support.
- Enhanced Vite configuration to allow access to external files and ensure proper handling of GLB/GLTF assets.
- Improved layout and styling in OverviewView for better visualization of character and avatar.

frontend/src/views/falukant/OverviewView.vue

@@ -116,15 +116,26 @@
                 </table>
             </div>
         </div>
-        <div v-if="falukantUser?.character" class="imagecontainer">
-            <div :style="getAvatarStyle" class="avatar"></div>
-            <div :style="getHouseStyle" class="house"></div>
+        <div v-if="falukantUser?.character" class="overview-visualization">
+            <div class="character-3d-container">
+                <CharacterModel3D
+                    :gender="falukantUser.character.gender"
+                    :age="falukantUser.character.age"
+                    :autoRotate="true"
+                    :rotationSpeed="0.5"
+                />
+            </div>
+            <div class="imagecontainer">
+                <div :style="getAvatarStyle" class="avatar"></div>
+                <div :style="getHouseStyle" class="house"></div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 import StatusBar from '@/components/falukant/StatusBar.vue';
+import CharacterModel3D from '@/components/falukant/CharacterModel3D.vue';
 import apiClient from '@/utils/axios.js';
 import { mapState } from 'vuex';
 
@@ -169,6 +180,7 @@ export default {
     name: 'FalukantOverviewView',
     components: {
         StatusBar,
+        CharacterModel3D,
     },
     data() {
         return {
@@ -481,4 +493,27 @@ h2 {
     padding: 20px;
     color: #666;
 }
+
+.overview-visualization {
+    display: flex;
+    gap: 20px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+.character-3d-container {
+    flex: 1;
+    min-width: 300px;
+    max-width: 500px;
+    height: 400px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #f9f9f9;
+}
+
+.imagecontainer {
+    flex: 1;
+    min-width: 300px;
+}
 </style>