Update viewer.js

viewer.js

@@ -18,6 +18,16 @@
   };
 })();
 
+//convertie les hex en vec rgb
+function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
 let pc;
 export let app = null;
 let cameraEntity = null;
@@ -32,6 +42,7 @@ let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRot
 let presentoirScaleX, presentoirScaleY, presentoirScaleZ;
 
 let sogsUrl, glbUrl, presentoirUrl;
+let color_bg_hex, color_bg;
 
 // --- Log user agent and page location ---
 console.log("%c[VIEWER DEBUG] User Agent:", "color: #0074D9;", navigator.userAgent);
@@ -43,6 +54,7 @@ export async function initializeViewer(config, instanceId) {
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
+  //prends les differents arguments de config.json
   sogsUrl = config.sogs_json_url;
   glbUrl = (config.glb_url !== undefined) ? config.glb_url : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/espace_expo/sol_blanc.glb";
   presentoirUrl = (config.presentoir_url !== undefined) ? config.presentoir_url : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/espace_expo/sol_blanc.glb";
@@ -67,6 +79,11 @@ export async function initializeViewer(config, instanceId) {
   presentoirScaleY = (config.presentoirScaleY !== undefined) ? parseFloat(config.presentoirScaleY) : 0;
   presentoirScaleZ = (config.presentoirScaleZ !== undefined) ? parseFloat(config.presentoirScaleZ) : 0; 
 
+  color_bg_hex = (config.canvas_background !== undefined) ? config.canvas_background : "#DDD4D5";
+  color_bg = new pc.Color(hexToRgb(color_bg_hex));
+  console.log(color_bg);
+  
+
   const cameraX = (config.cameraX !== undefined) ? parseFloat(config.cameraX) : 0;
   const cameraY = (config.cameraY !== undefined) ? parseFloat(config.cameraY) : 2;
   const cameraZ = (config.cameraZ !== undefined) ? parseFloat(config.cameraZ) : 5;
@@ -78,6 +95,7 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
+  //cree le nouveau canva (instanceId est une valeur aléatoire pour gérer plusieurs canvas sur la meme page)
   const canvasId = 'canvas-' + instanceId;
   const progressDialog = document.getElementById('progress-dialog-' + instanceId);
   const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
@@ -207,7 +225,7 @@ export async function initializeViewer(config, instanceId) {
     app.root.addChild(presentoirEntity);
     
     cameraEntity = new pc.Entity('camera');
-    cameraEntity.addComponent('camera', { clearColor: new pc.Color(1, 1, 1, 1) });
+    //cameraEntity.addComponent('camera', { clearColor: new pc.Color(1, 1, 1, 1) });
     cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
     cameraEntity.lookAt(modelEntity.getPosition());
     cameraEntity.addComponent('script');