three js, ajout du bonne angles et d'autres fonctionnalités

public/js/three.js

@@ -11,7 +11,7 @@ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerH
 
 // Création du renderer
 const renderer = new THREE.WebGLRenderer();
-renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
 
 // Définir la couleur de fond en blanc
 renderer.setClearColor(0xffffff, 1); // 0xffffff est la couleur blanche
@@ -29,14 +29,40 @@ const directionalLight = new THREE.DirectionalLight(0x202020, .3); // Lumière b
 directionalLight.position.set(1, 1, 1); // Positionner la lumière     girs foncé couleur :  0x404040 ,et plus foncé 0x202020
 scene.add(directionalLight);
 
+
+// Ajouter les contrôles OrbitControls pour interagir avec la scène
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true; // Activation du "damping" pour un mouvement fluide
+controls.dampingFactor = 0.25; // Facteur de "damping"
+controls.screenSpacePanning = false; // Désactivation du "screen space panning"
+// controls.enableZoom = false
+
 // Charger un modèle FBX
 const loader = new FBXLoader();
 loader.load(
     '/models/casque_vr.fbx', // Remplace par l'URL de ton modèle .fbx
     (fbx) => {
         // Ajouter le modèle à la scène
-        scene.add(fbx);
-        console.log('Modèle FBX chargé avec succès');
+        const pivot = new THREE.Group();
+        scene.add(pivot);
+ 
+        // fbx.scale.set(0.1, 0.1, 0.1);  // Redimensionner le modèle
+        
+        // Ajouter le modèle au pivot
+        pivot.add(fbx);
+        
+        // Calculer les dimensions du modèle pour le recentrer
+        const box = new THREE.Box3().setFromObject(fbx);
+        const center = box.getCenter(new THREE.Vector3());
+        console.log(center, box);
+        // Déplacer le modèle pour que son centre corresponde au pivot
+        // fbx.position.sub(center);
+        
+        // Déplacer le pivot (et donc le modèle) à gauche
+        // pivot.position.set(-500, 0, 0); // Positionner le pivot (et son contenu) à gauche
+        
+        controls.target.copy(center); // Définir le centre de rotation des contrôles
+        controls.update(); // Mettre à jour les contrôles
     },
     (xhr) => {
         console.log((xhr.loaded / xhr.total * 100) + '% chargé');
@@ -47,13 +73,9 @@ loader.load(
 );
 
 // Positionner la caméra
-camera.position.z = 500;
+camera.position.z = 1;
+
 
-// Ajouter les contrôles OrbitControls pour interagir avec la scène
-const controls = new OrbitControls(camera, renderer.domElement);
-controls.enableDamping = true; // Activation du "damping" pour un mouvement fluide
-controls.dampingFactor = 0.25; // Facteur de "damping"
-controls.screenSpacePanning = false; // Désactivation du "screen space panning"
 
 // Fonction d'animation
 function animate() {
@@ -66,4 +88,4 @@ function animate() {
     renderer.render(scene, camera);
 }
 
-animate();
+animate();
\ No newline at end of file

resources/views/pages/accueil.blade.php

@@ -111,7 +111,7 @@
         </div>
       
         <!-- Post info -->
-        <div id="postDetails" class="w-40 p-4 gap-5 mt-5  pt-3">
+        <div id="postDetails" class="w-40 p-4 gap-4 mt-5  pt-3">
 
        
           <h2 class="slider-h5" data-aos="fade-up">{{ $posts->first()->titre ?? '' }}</h2>
@@ -131,7 +131,8 @@
       
 
 
-      <div id="three-container" style="width: 50vw; height: 100vh;"></div>
+      <div id="three-container" style="width: 50vw; height: 50vh; "></div>
+