Update deplacement_dans_env/viewer_pr_env.js

deplacement_dans_env/viewer_pr_env.js

@@ -1,11 +1,11 @@
 // viewer_pr_env.js
 // ==============================
-// Version 2.0 : Utilisation du MOTEUR PHYSIQUE de PlayCanvas
-// - Remplace la détection de collision AABB manuelle
+// Version 2.1 : Utilisation du MOTEUR PHYSIQUE de PlayCanvas
+// - CORRIGÉ : Inclut le chargement du moteur physique (Ammo.js) pour fixer l'écran noir.
 // - Utilise RigidBody (dynamique) pour le joueur (capsule)
 // - Utilise RigidBody (statique) pour l'environnement (mesh)
 // - Gère la gravité, le "vrai" mesh des portes, etc.
-// - L'ancien fichier camera.js n'est plus nécessaire.
+// - L'ancien fichier camera.js (ou 'registerFreeCamScripts') n'est plus utilisé.
 
 /* -------------------------------------------
    Utils communs (Inchangés)
@@ -63,7 +63,7 @@ function traverse(entity, callback) {
   }
 }
 
-// Helpers math (Inchangés, mais moins utilisés)
+// Helpers math (Inchangés)
 function vAdd(a,b){ return new pc.Vec3(a.x+b.x,a.y+b.y,a.z+b.z); }
 function vSub(a,b){ return new pc.Vec3(a.x-b.x,a.y-b.y,a.z-b.z); }
 function vScale(v,s){ return new pc.Vec3(v.x*s,v.y*s,v.z*s); }
@@ -134,7 +134,7 @@ function registerFirstPersonScripts() {
     this.yaw -= e.dx * this.lookSpeed;
     this.pitch -= e.dy * this.lookSpeed;
     this.pitch = pc.math.clamp(this.pitch, this.pitchAngleMin, this.pitchAngleMax);
-  };
+t };
 
   FirstPersonCamera.prototype.update = function (dt) {
     // --- 1. Rotation (Look) ---
@@ -148,27 +148,30 @@ function registerFirstPersonScripts() {
     // --- 2. Mouvement (Clavier) ---
     var fwd = 0;
     var strf = 0;
+    const kb = this.app.keyboard; // Raccourci
 
-    if (this.app.keyboard.isPressed(pc.KEY_Z) || this.app.keyboard.isPressed(pc.KEY_W)) {
+    if (kb.isPressed(pc.KEY_Z) || kb.isPressed(pc.KEY_W) || kb.isPressed(pc.KEY_UP)) {
       fwd += 1;
     }
-    if (this.app.keyboard.isPressed(pc.KEY_S)) {
+    if (kb.isPressed(pc.KEY_S) || kb.isPressed(pc.KEY_DOWN)) {
       fwd -= 1;
     }
-    if (this.app.keyboard.isPressed(pc.KEY_Q) || this.app.keyboard.isPressed(pc.KEY_A)) {
+    if (kb.isPressed(pc.KEY_Q) || kb.isPressed(pc.KEY_A) || kb.isPressed(pc.KEY_LEFT)) {
       strf -= 1;
     }
-    if (this.app.keyboard.isPressed(pc.KEY_D)) {
+    if (kb.isPressed(pc.KEY_D) || kb.isPressed(pc.KEY_RIGHT)) {
       strf += 1;
     }
 
+    // Réinitialise la force à chaque frame
+    this.force.set(0, 0, 0);
+
     if (fwd !== 0 || strf !== 0) {
       // On utilise les vecteurs de l'entité (qui a le yaw)
       var forward = this.entity.forward;
       var right = this.entity.right;
 
       // Calcule la force de déplacement
-      this.force.set(0, 0, 0);
       this.force.add(forward.mulScalar(fwd));
       this.force.add(right.mulScalar(strf));
       
@@ -184,20 +187,18 @@ function registerFirstPersonScripts() {
       this.velocity.copy(this.entity.rigidbody.linearVelocity);
       
       // Définit la vélocité XZ (mouvement)
+      // On applique la vitesse au vecteur de force normalisé
       this.velocity.x = this.force.x * this.moveSpeed;
       this.velocity.z = this.force.z * this.moveSpeed;
       
       // Applique la nouvelle vélocité (conserve Y pour la gravité)
       this.entity.rigidbody.linearVelocity = this.velocity;
     }
-    
-    // Reset la force pour la prochaine frame
-    this.force.set(0, 0, 0);
   };
 }
 
 /* -------------------------------------------
-   State (Inchangé)
+   State (Modifié)
 -------------------------------------------- */
 
 let pc;
@@ -210,13 +211,15 @@ let viewerInitialized = false;
 let resizeObserver = null;
 let resizeTimeout = null;
 
-// ... (toutes les variables de config sont conservées) ...
+// paramètres courants de l'instance
 let chosenCameraX, chosenCameraY, chosenCameraZ;
 let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minY;
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let presentoirScaleX, presentoirScaleY, presentoirScaleZ;
 let sogUrl, glbUrl, presentoirUrl;
 let color_bg_hex, color_bg, espace_expo_bool;
+
+// perf dynamique
 let maxDevicePixelRatio = 1.75;
 let interactDpr = 1.0;
 let idleRestoreDelay = 350;
@@ -297,12 +300,13 @@ export async function initializeViewer(config, instanceId) {
 
   const canvas = document.createElement("canvas");
   canvas.id = canvasId;
-  // ... (tous les listeners de canvas sont conservés) ...
   canvas.className = "ply-canvas";
   canvas.style.width = "100%";
   canvas.style.height = "100%";
   canvas.setAttribute("tabindex", "0");
   viewerContainer.insertBefore(canvas, progressDialog);
+  
+  // ... (tous les listeners de canvas sont conservés) ...
   canvas.style.touchAction = "none";
   canvas.style.webkitTouchCallout = "none";
   canvas.addEventListener("gesturestart", (e) => e.preventDefault());
@@ -359,11 +363,25 @@ export async function initializeViewer(config, instanceId) {
   device.maxPixelRatio = Math.min(window.devicePixelRatio || 1, maxDevicePixelRatio);
 
   const opts = new pc.AppOptions();
+  
+  // ++++++++++ CORRECTIF ÉCRAN NOIR (DÉBUT) ++++++++++
+  // Indique à l'application où trouver les fichiers du moteur physique (Ammo.js)
+  const ammoUrl = "https://playcanvas.vercel.app/static/lib/ammo/ammo.js";
+  const ammoWasmUrl = "https://playcanvas.vercel.app/static/lib/ammo/ammo.wasm.js";
+  const ammoWasmBinaryUrl = "https://playcanvas.vercel.app/static/lib/ammo/ammo.wasm.wasm";
+
+  opts.physics = {
+    url: ammoUrl,
+    wasmUrl: ammoWasmUrl,
+    binaryUrl: ammoWasmBinaryUrl
+  };
+  // ++++++++++ CORRECTIF ÉCRAN NOIR (FIN) ++++++++++
+
   opts.graphicsDevice = device;
   opts.mouse = new pc.Mouse(canvas);
   opts.touch = new pc.TouchDevice(canvas);
   opts.keyboard = new pc.Keyboard(canvas);
-Note: This component system list *must* include RigidBody and Collision.
+  // Note: Cette liste *doit* inclure RigidBody et Collision.
   opts.componentSystems = [
     pc.RenderComponentSystem,
     pc.CameraComponentSystem,
@@ -380,7 +398,7 @@ Note: This component system list *must* include RigidBody and Collision.
   app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
   // *** NOUVEAU : Définir la gravité pour le monde physique ***
-  app.systems.rigidbody.gravity.set(0, -9.81, 0);
+  app.systems.rigidbody.gravity.set(0, -9.81, 0); // Gravité standard
 
   // --- Debounce resize (Inchangé) ---
   resizeObserver = new ResizeObserver((entries) => {
@@ -412,6 +430,7 @@ Note: This component system list *must* include RigidBody and Collision.
   });
 
   // --- Chargement des assets (Inchangé) ---
+section
   const sogAsset = new pc.Asset("gsplat", "gsplat", { url: sogUrl });
   const glbAsset = new pc.Asset("glb", "container", { url: glbUrl });
   app.assets.add(sogAsset);
@@ -452,6 +471,7 @@ Note: This component system list *must* include RigidBody and Collision.
       if (node.render) {
         meshCount++;
         // 1. Le rend statique (il ne bouge pas)
+content
         node.addComponent('rigidbody', {
           type: pc.BODYTYPE_STATIC,
           restitution: 0.0
@@ -478,16 +498,16 @@ Note: This component system list *must* include RigidBody and Collision.
   playerEntity.addComponent('rigidbody', {
     type: pc.BODYTYPE_DYNAMIC,
     mass: 70, // Poids d'un humain
-    friction: 0.1,
-    restitution: 0.0,
+    friction: 0.3, // Un peu de friction pour ne pas glisser
+    restitution: 0.0, // Pas de rebond
     angularFactor: new pc.Vec3(0, 0, 0) // Empêche la capsule de basculer
   });
   
   // Ajoute une forme de collision CAPSULE
   playerEntity.addComponent('collision', {
     type: 'capsule',
-    radius: 0.35,
-    height: 1.7
+    radius: 0.35, // Rayon de 35cm (diamètre 70cm)
+    height: 1.7  // Hauteur totale 1m70
   });
 
   // 2. L'entité "Camera" (les yeux)
@@ -498,7 +518,8 @@ Note: This component system list *must* include RigidBody and Collision.
     farClip: 250
   });
   // Positionne la caméra à hauteur des "yeux" dans la capsule
-  cameraEntity.setLocalPosition(0, 0.7, 0); // (0, height/2 - radius, 0) approx.
+  // (Hauteur / 2) - Rayon = (1.7 / 2) - 0.35 = 0.85 - 0.35 = 0.5
+  cameraEntity.setLocalPosition(0, 0.5, 0); // Hauteur des yeux
 
   // 3. Attache la caméra au joueur
   playerEntity.addChild(cameraEntity);
@@ -508,7 +529,7 @@ Note: This component system list *must* include RigidBody and Collision.
   playerEntity.script.create("orbitCamera", {
     attributes: {
       cameraEntity: cameraEntity,
-      moveSpeed: 4.0, // Ajustez cette vitesse
+      moveSpeed: 4.0, // Vitesse de 4 m/s (marche rapide)
       lookSpeed: 0.25,
       pitchAngleMax: maxAngle, // Utilise vos configs
       pitchAngleMin: minAngle
@@ -533,7 +554,6 @@ Note: This component system list *must* include RigidBody and Collision.
     if (app.graphicsDevice.maxPixelRatio !== clamped) {
       app.graphicsDevice.maxPixelRatio = clamped;
       app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-  ---
     }
   };
   const bumpInteraction = () => {
@@ -566,8 +586,13 @@ export function resetViewerCamera() {
     
     // Téléporte le JOUEUR (pas la caméra)
     playerEntity.rigidbody.teleport(chosenCameraX, chosenCameraY, chosenCameraZ);
+    playerEntity.rigidbody.linearVelocity = pc.Vec3.ZERO;
+    playerEntity.rigidbody.angularVelocity = pc.Vec3.ZERO;
+    
     // Réinitialise le regard
-    playerEntity.lookAt(modelPos.x, playerEntity.getPosition().y, modelPos.z);
+    // Calcule le yaw nécessaire pour regarder vers le centre du modèle (modelPos)
+    const targetPos = new pc.Vec3(modelPos.x, playerEntity.getPosition().y, modelPos.z);
+    playerEntity.lookAt(targetPos);
     
     // Met à jour les angles dans le script
     var angles = playerEntity.getLocalEulerAngles();