install product viewer component

src/components/project/ProductViewer.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/components/project/VirtualSample.vue

@@ -49,6 +49,8 @@
           <span>Comparer les pistes</span>
         </button>
       </header>
+
+      <ProductViewer />
     </div>
     <template #footer>
       <button
@@ -88,6 +90,7 @@
 <script setup>
 import Dialog from "primevue/dialog";
 import { ref, watch } from "vue";
+import ProductViewer from "./ProductViewer.vue";
 
 const { file } = defineProps({
   file: Object,

src/components/test/VirtualSample.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="virtual-sample" ref="virtualSampleContainer"></div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
+const virtualSampleContainer = ref(null);
+
+onMounted(() => {
+  const container = virtualSampleContainer.value;
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(
+    75,
+    container.clientWidth / container.clientHeight,
+    0.1,
+    1000
+  );
+  const renderer = new THREE.WebGLRenderer();
+  renderer.setSize(container.clientWidth, container.clientHeight);
+  renderer.setClearColor(0xffffff, 1);
+  container.appendChild(renderer.domElement);
+
+  const light = new THREE.AmbientLight(0xffffff);
+  scene.add(light);
+
+  const loader = new GLTFLoader();
+  loader.load(
+    "/assets/3D/flacon-test.glb",
+    (gltf) => {
+      const model = gltf.scene;
+      scene.add(model);
+    },
+    undefined,
+    (error) => {
+      console.error("Erreur lors du chargement du modèle", error);
+    }
+  );
+
+  camera.position.set(3, 2, 5);
+
+  const controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.05;
+
+  const animate = () => {
+    requestAnimationFrame(animate);
+    controls.update();
+    renderer.render(scene, camera);
+  };
+
+  animate();
+
+  window.addEventListener("resize", () => {
+    camera.aspect = container.clientWidth / container.clientHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(container.clientWidth, container.clientHeight);
+  });
+});
+</script>
+
+<style scoped>
+.virtual-sample {
+  width: 100%;
+  height: 100vh;
+}
+</style>

src/stores/user.js

@@ -5,7 +5,9 @@ export const useUserStore = defineStore("user", () => {
   const user = ref(null);
 
   const notifications = computed(() => {
-    return user.value.notifications;
+    return typeof user.value.notifications === "array"
+      ? user.value.notifications
+      : Object.values(user.value.notifications);
   });
 
   return { user, notifications };