correction de bug

public/css/utils.css

@@ -17,6 +17,15 @@ .w-slider{
     width: 40%;
 }
 
+/* .blockandnone{
+    display: block  !important;
+} */
+
+.vr-container{
+    width: 60vw;
+    height: 60vh;
+    margin-top: 6rem;
+}
 
 .w-texte-slider{
     width: 40%;
@@ -316,7 +325,7 @@ @keyframes slide-right {
     }
 }
 
-.overlay-vr {
+/* .overlay-vr {
     width: 200px;
     height: 200px;
     top: 20rem;
@@ -350,8 +359,38 @@ .overlay-vr::before {
     background: none;
     border: 2px solid rgba(199, 199, 199, 0.5); 
     position: absolute;
+} */
+
+.overlay-vr {
+    width: 200px;
+    height: 200px;
+    top: 20rem;
+    left: 45em;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.overlay-vr img{
+    height: 80px ;
+    opacity: .5;
+    animation: slideLeftAndRight 3s  ease infinite;
 }
 
+@keyframes slideLeftAndRight{
+    0%{
+        transform: translateX(-50%);
+    }
+    50%{
+        transform: translateX(0);
+    }
+    100%{
+        transform: translateX(-50%);
+    }
+}
+
+
 @keyframes dash-array {
     0%{
         clip-path: inset(0 0 0 100%);
@@ -1308,6 +1347,10 @@ @media (max-width: 768px) {
         margin-left: 2.5rem;
     }
 
+    .blockandnone{
+        display: none !important;
+    }
+
    
     .pt-spe-title-accueil{
         padding-top: 18rem;
@@ -1319,6 +1362,12 @@ @media (max-width: 768px) {
         margin-left: -3rem;
     }
 
+    .vr-container{
+            height: 57vh;
+                margin-top: -23rem;
+                z-index: -1;
+    }
+
     .line-icube{
         margin-left: -3.5rem;
     }

public/js/three.js

-console.log('container');
+console.log("container");
 
-import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
-import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';
-import { FBXLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/FBXLoader.js';
+import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";
+import { OrbitControls } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js";
+import { FBXLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/FBXLoader.js";
 
 const scene = new THREE.Scene();
 
 // Création de la caméra
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const camera = new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+);
 
 // Création du renderer
 const renderer = new THREE.WebGLRenderer();
-renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
+let isMobile = window.innerWidth <= 768; // On considère que l'écran est mobile si sa largeur est inférieure ou égale à 768px
+
+if (isMobile) {
+    console.log("Mobile");
+    renderer.setSize(window.innerWidth, window.innerHeight); // Pleine taille pour mobile
+} else {
+    console.log("Desktop");
+    renderer.setSize(window.innerWidth / 2, window.innerHeight / 2); // Divisé par 2 pour les écrans plus grands
+}
+
 renderer.setClearColor(0xffffff, 1); // Fond blanc
 
+// Pour réagir aux changements de taille d'écran, ajoutez un écouteur :
+window.addEventListener("resize", () => {
+    isMobile = window.innerWidth <= 768;
+
+    if (isMobile) {
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    } else {
+        renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
+    }
+});
+
 // Ajouter le renderer au DOM
-const container = document.getElementById('three-container');
+const container = document.getElementById("three-container");
 container.appendChild(renderer.domElement);
 
 // Lumières
@@ -31,12 +56,12 @@ const controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true;
 controls.dampingFactor = 0.25;
 controls.screenSpacePanning = false;
-controls.enableZoom = false; 
+controls.enableZoom = false;
 
 // Charger un modèle FBX
 const loader = new FBXLoader();
 loader.load(
-    '/models/casque_vr.fbx', // Remplace par le chemin vers ton modèle
+    "/models/casque_vr.fbx", // Remplace par le chemin vers ton modèle
     (fbx) => {
         const pivot = new THREE.Group();
         scene.add(pivot);
@@ -49,12 +74,17 @@ loader.load(
 
         // Préparer l'animation de la caméra
         const startPosition = new THREE.Vector3(0, 300, -750); // Position initiale
-        const endPosition = new THREE.Vector3(-520, 150, 100); // Position finale
+        let endPosition;
+        if (isMobile) {
+            endPosition = new THREE.Vector3(-900, 150, 100);
+        } else {
+            endPosition = new THREE.Vector3(-520, 150, 100);
+        }
         const duration = 3000; // Durée en millisecondes (3 secondes)
 
         // Écouter l'événement scroll pour déclencher l'animation
         let animationTriggered = false;
-        window.addEventListener('scroll', () => {
+        window.addEventListener("scroll", () => {
             if (window.scrollY > 1050 && !animationTriggered) {
                 console.log(window.scrollY);
                 animationTriggered = true; // Empêche de relancer l'animation plusieurs fois
@@ -63,10 +93,10 @@ loader.load(
         });
     },
     (xhr) => {
-        console.log((xhr.loaded / xhr.total * 100) + '% chargé');
+        console.log((xhr.loaded / xhr.total) * 100 + "% chargé");
     },
     (error) => {
-        console.error('Erreur lors du chargement du modèle FBX', error);
+        console.error("Erreur lors du chargement du modèle FBX", error);
     }
 );
 
@@ -95,7 +125,7 @@ function animateCamera(startPosition, endPosition, duration, target) {
         if (progress < 1) {
             requestAnimationFrame(updateCameraAnimation);
         } else {
-            console.log('Animation terminée');
+            console.log("Animation terminée");
         }
     }
 

resources/views/pages/accueil.blade.php

@@ -131,11 +131,11 @@
 
 
 
-    <div class="d-flex position-relative">
-        <div id="three-container" style="width: 60vw; height: 60vh; margin-top: 6rem; "></div>
-        {{-- <div class="position-absolute overlay-vr">
-           <p>Bougez</p>
-        </div> --}}
+    <div class="d-flex flex-column flex-md-row position-relative blockandnone">
+        <div id="three-container" class="vr-container"></div>
+        <!-- <div class="position-absolute overlay-vr">
+            <img src="{{ asset('images/mainVr.png') }}" alt="image illustration" class="img-fluid object-fit-cover overlay-vr-img">
+        </div>  -->
         <div class="w-50 padding-vr-text d-flex flex-column gap-4">
             <h3 class="fs-1">Plongez dans l'univers de la VR <br><span class="blue bold">Une expérience immersive </span></h3>
             <p class="delay-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit sit obcaecati repellendus non, cumque, rem tenetur ullam fugiat corporis fugit veniam deserunt enim voluptas incidunt! Ad rem excepturi enim tenetur.</p>