Update viewer.js

viewer.js

@@ -1,6 +1,8 @@
 // viewer.js
 // ==============================
+// PlayCanvas GLB/texture Viewer - Modern, Mobile-friendly, Modular
 
+// ----- Helper to load image textures into PlayCanvas -----
 async function loadImageAsTexture(url, app) {
     return new Promise((resolve, reject) => {
         const img = new window.Image();
@@ -19,6 +21,7 @@ async function loadImageAsTexture(url, app) {
     });
 }
 
+// ----- Global handles -----
 let pc;
 export let app = null;
 let cameraEntity = null;
@@ -28,438 +31,399 @@ let filtreEntity = null;
 let viewerInitialized = false;
 let resizeObserver = null;
 
-// These will hold references to the material(s) you want to update.
+// Materials (for real-time switching)
 let matTransparent = null;
 let matOpaque = null;
 let tubeTransparent = null;
 let tubeOpaque = null;
 
-
+// Configurable globals
 let chosenCameraX, chosenCameraY, chosenCameraZ;
 let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, minY;
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let glbUrl, glbUrl2, glbUrl3;
 
-// RECURSIVE ENTITY TRAVERSAL (needed for material assignment)
+// ----- Utility: Recursive scene traversal -----
 function traverse(entity, callback) {
-  callback(entity);
-  if (entity.children) {
-    entity.children.forEach(child => traverse(child, callback));
-  }
+    callback(entity);
+    if (entity.children) {
+        entity.children.forEach(child => traverse(child, callback));
+    }
 }
 
+// ----- Main Viewer Initialization -----
 export async function initializeViewer(config, instanceId) {
-  if (viewerInitialized) return;
-
-  glbUrl = config.glb_url;
-  glbUrl2 = config.glb_url_2;
-  glbUrl3 = config.glb_url_3;
-  minZoom = 0.2;
-  maxZoom = 2;
-  minAngle = -Infinity;
-  maxAngle = Infinity;
-  minAzimuth = -Infinity;
-  maxAzimuth = Infinity;
-  minPivotY = 0;
-  minY = -10;
-
-  modelX = 0;
-  modelY = 0;
-  modelZ = 0;
-  modelScale = 1;
-  modelRotationX = 0;
-  modelRotationY = 0;
-  modelRotationZ = 0;
-
-  const cameraX = 0;
-  const cameraY = 0;
-  const cameraZ = 1;
-  const cameraXPhone = 0;
-  const cameraYPhone = 0;
-  const cameraZPhone = 1;
-
-  chosenCameraX = isMobile ? cameraXPhone : cameraX;
-  chosenCameraY = isMobile ? cameraYPhone : cameraY;
-  chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
-
-  
-
-  const canvasId = 'canvas-' + instanceId;
-  const progressDialog = document.getElementById('progress-dialog-' + instanceId);
-  const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
-  const viewerContainer = document.getElementById('viewer-container-' + instanceId);
-
-  let oldCanvas = document.getElementById(canvasId);
-  if (oldCanvas) oldCanvas.remove();
-
-  const canvas = document.createElement('canvas');
-  canvas.id = canvasId;
-  canvas.className = 'ply-canvas';
-  canvas.style.width = "100%";
-  canvas.style.height = "100%";
-  canvas.setAttribute('tabindex', '0');
-  // Safer insert:
-  if (progressDialog) {
-    viewerContainer.insertBefore(canvas, progressDialog);
-  } else {
-    viewerContainer.appendChild(canvas);
-  }
-
-  canvas.style.touchAction = "none";
-  canvas.style.webkitTouchCallout = "none";
-  canvas.addEventListener('gesturestart', e => e.preventDefault());
-  canvas.addEventListener('gesturechange', e => e.preventDefault());
-  canvas.addEventListener('gestureend', e => e.preventDefault());
-  canvas.addEventListener('dblclick', e => e.preventDefault());
-  canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
-
-  canvas.addEventListener('wheel', (e) => {
-    e.preventDefault();
-  }, { passive: false });
-
-  if (progressDialog) progressDialog.style.display = 'block';
-
-  if (!pc) {
-    pc = await import("https://esm.run/playcanvas");
-    window.pc = pc;
-  }
-
-  // Create app first
-  const device = await pc.createGraphicsDevice(canvas, {
-    deviceTypes: ["webgl2", "webgl1"],
-    glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
-    twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
-    antialias: false
-  });
-  device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-
-  const opts = new pc.AppOptions();
-  opts.graphicsDevice = device;
-  opts.mouse = new pc.Mouse(canvas);
-  opts.touch = new pc.TouchDevice(canvas);
-  opts.componentSystems = [
-    pc.RenderComponentSystem,
-    pc.CameraComponentSystem,
-    pc.LightComponentSystem,
-    pc.ScriptComponentSystem,
-    pc.GSplatComponentSystem,
-    pc.CollisionComponentSystem,
-    pc.RigidbodyComponentSystem
-  ];
-  opts.resourceHandlers = [
-    pc.TextureHandler,
-    pc.ContainerHandler,
-    pc.ScriptHandler,
-    pc.GSplatHandler
-  ];
-
-  app = new pc.Application(canvas, opts);
-  app.setCanvasFillMode(pc.FILLMODE_NONE);
-  app.setCanvasResolution(pc.RESOLUTION_AUTO);
-
-  resizeObserver = new ResizeObserver(entries => {
-    entries.forEach(entry => {
-      app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
+    if (viewerInitialized) return; // Prevent double-init
+
+    // ----- Device checks -----
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+    const isMobile = isIOS || /Android/i.test(navigator.userAgent);
+
+    // ----- Config setup -----
+    glbUrl = config.glb_url;
+    glbUrl2 = config.glb_url_2;
+    glbUrl3 = config.glb_url_3;
+    minZoom = 0.2; maxZoom = 2;
+    minAngle = -Infinity; maxAngle = Infinity;
+    minAzimuth = -Infinity; maxAzimuth = Infinity;
+    minPivotY = 0; minY = -10;
+    modelX = modelY = modelZ = 0;
+    modelScale = 1;
+    modelRotationX = modelRotationY = modelRotationZ = 0;
+
+    // Camera setup for desktop/mobile
+    chosenCameraX = chosenCameraY = 0;
+    chosenCameraZ = 1;
+
+    // ----- DOM: Canvas and progress -----
+    const canvasId = 'canvas-' + instanceId;
+    const progressDialog = document.getElementById('progress-dialog-' + instanceId);
+    const viewerContainer = document.getElementById('viewer-container-' + instanceId);
+
+    let oldCanvas = document.getElementById(canvasId);
+    if (oldCanvas) oldCanvas.remove();
+
+    const canvas = document.createElement('canvas');
+    canvas.id = canvasId;
+    canvas.className = 'ply-canvas';
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    canvas.setAttribute('tabindex', '0');
+    if (progressDialog) {
+        viewerContainer.insertBefore(canvas, progressDialog);
+    } else {
+        viewerContainer.appendChild(canvas);
+    }
+    // Touch and scroll safety
+    canvas.style.touchAction = "none";
+    canvas.style.webkitTouchCallout = "none";
+    canvas.addEventListener('gesturestart', e => e.preventDefault());
+    canvas.addEventListener('gesturechange', e => e.preventDefault());
+    canvas.addEventListener('gestureend', e => e.preventDefault());
+    canvas.addEventListener('dblclick', e => e.preventDefault());
+    canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
+    canvas.addEventListener('wheel', e => e.preventDefault(), { passive: false });
+
+    if (progressDialog) progressDialog.style.display = 'block';
+
+    // ----- Load PlayCanvas -----
+    if (!pc) {
+        pc = await import("https://esm.run/playcanvas");
+        window.pc = pc;
+    }
+
+    // ----- PlayCanvas App Setup -----
+    const device = await pc.createGraphicsDevice(canvas, {
+        deviceTypes: ["webgl2", "webgl1"],
+        glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
+        twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
+        antialias: false
     });
-  });
-  resizeObserver.observe(viewerContainer);
-
-  window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
-  app.on('destroy', () => resizeObserver.disconnect());
-
-  // --- Assets ---
-  const assets = {
-    orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
-    model: new pc.Asset('model_glb', 'container', { url: glbUrl }),
-    tube: new pc.Asset('tube_glb', 'container', { url: glbUrl2 }),
-    filtre: new pc.Asset('filtre_glb', 'container', { url: glbUrl3 }),
-  };
-
-  const hdrUrl = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/hdr/ciel_nuageux_1k.png';
-  const hdrTex = await loadImageAsTexture(hdrUrl, app);
-
-  const emitUrl = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/emit_map_2k.png';
-  const emitTex = await loadImageAsTexture(emitUrl, app);
-
-  const opUrl = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/op_map_2k.png';
-  const opTex = await loadImageAsTexture(opUrl, app);
-
-  const thicknessUrl = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/thickness_map_2k.png';
-  const thicknessTex = await loadImageAsTexture(thicknessUrl, app);  
-
-  const bgurl ='https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/banniere_earcare.png';
-  const bgTex = await loadImageAsTexture(bgurl, app);
-
-  for (const key in assets) app.assets.add(assets[key]);
-
+    device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+    const opts = new pc.AppOptions();
+    opts.graphicsDevice = device;
+    opts.mouse = new pc.Mouse(canvas);
+    opts.touch = new pc.TouchDevice(canvas);
+    opts.componentSystems = [
+        pc.RenderComponentSystem, pc.CameraComponentSystem,
+        pc.LightComponentSystem, pc.ScriptComponentSystem,
+        pc.GSplatComponentSystem, pc.CollisionComponentSystem,
+        pc.RigidbodyComponentSystem
+    ];
+    opts.resourceHandlers = [
+        pc.TextureHandler, pc.ContainerHandler,
+        pc.ScriptHandler, pc.GSplatHandler
+    ];
+
+    app = new pc.Application(canvas, opts);
+    app.setCanvasFillMode(pc.FILLMODE_NONE);
+    app.setCanvasResolution(pc.RESOLUTION_AUTO);
+
+    // Canvas responsive resize
+    resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+            app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
+        });
+    });
+    resizeObserver.observe(viewerContainer);
+    window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
+    app.on('destroy', () => resizeObserver.disconnect());
+
+    // ----- Load all images as Textures (async, safe for CORS) -----
+    // All of these can fail (network, CORS), so wrap with try/catch if needed.
+    const hdrTex      = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/hdr/ciel_nuageux_1k.png', app);
+    const emitTex     = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/emit_map_2k.png', app);
+    const opTex       = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/op_map_2k.png', app);
+    const thicknessTex= await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/thickness_map_2k.png', app);
+    const bgTex       = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/banniere_earcare.png', app);
+
+    // ----- GLB asset definition -----
+    const assets = {
+        orbit:  new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
+        model:  new pc.Asset('model_glb', 'container', { url: glbUrl }),
+        tube:   new pc.Asset('tube_glb', 'container', { url: glbUrl2 }),
+        filtre: new pc.Asset('filtre_glb', 'container', { url: glbUrl3 }),
+    };
+    for (const key in assets) app.assets.add(assets[key]);
+
+    // ----- Environment / Skybox -----
     app.scene.envAtlas = hdrTex;
     app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, -90, 0);
     app.scene.skyboxIntensity = 4;
     app.scene.skyboxMip = 0;
 
-
-    // Now load all GLBs and other assets
+    // ----- Load GLBs -----
     const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
-
     loader.load(() => {
-      app.start();
-      if (progressDialog) progressDialog.style.display = 'none';
-
-      // Reorder depth layer for transmission
-      const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
-      app.scene.layers.remove(depthLayer);
-      app.scene.layers.insertOpaque(depthLayer, 2);
-
-      // 1. Models
-      modelEntity = assets.model.resource.instantiateRenderEntity();
-      tubeEntity = assets.tube.resource.instantiateRenderEntity();
-      filtreEntity = assets.filtre.resource.instantiateRenderEntity();
-
-      app.root.addChild(modelEntity);
-      app.root.addChild(tubeEntity);
-      app.root.addChild(filtreEntity);
-
-      // 2. Materials for main model & tube      
-            //mat transparent
-      matTransparent = new pc.StandardMaterial();
-      matTransparent.blendType = pc.BLEND_NORMAL;
-      matTransparent.diffuse = new pc.Color(1, 1, 1);
-      matTransparent.specular = new pc.Color(0.01, 0.01, 0.01);
-      matTransparent.gloss = 1;
-      matTransparent.metalness = 0;
-      matTransparent.useMetalness = true;
-      matTransparent.useDynamicRefraction = true;
-      matTransparent.depthWrite = true;
-      matTransparent.refraction= 0.8;
-      matTransparent.refractionIndex = 1;
-      matTransparent.thickness = 0.02;
-      matTransparent.thicknessMap = thicknessTex;
-      matTransparent.opacityMap = opTex;
-      matTransparent.opacityMapChannel = "r";
-      matTransparent.opacity = 0.97;
-      matTransparent.emissive = new pc.Color(1, 1, 1);
-      matTransparent.emissiveMap = emitTex;
-      matTransparent.emissiveIntensity = 0.1;
-      matTransparent.update();
-
-
-
-
-            //mat opaque
-      matOpaque = new pc.StandardMaterial();
-      matOpaque.blendType = pc.BLEND_NORMAL;
-      matOpaque.diffuse = new pc.Color(0.7, 0.05, 0.05);
-      matOpaque.specular = new pc.Color(0.01, 0.01, 0.01);
-      matOpaque.specularityFactor = 1;
-      matOpaque.gloss = 1;
-      matOpaque.metalness = 0;
-      matOpaque.opacityMap = opTex;
-      matOpaque.opacityMapChannel = "r";
-      matOpaque.opacity = 1;
-      matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
-      matOpaque.emissiveMap = emitTex;
-      matOpaque.emissiveIntensity = 2;
-      matOpaque.update();
-
-
-
-
-      //material for the tube
-        //transparent
-      tubeTransparent = new pc.StandardMaterial();
-      tubeTransparent.diffuse = new pc.Color(1, 1, 1);
-      tubeTransparent.blendType = pc.BLEND_NORMAL;
-      tubeTransparent.opacity = 0.15;                         
-      tubeTransparent.depthTest = false;
-      tubeTransparent.depthWrite = false;
-      tubeTransparent.useMetalness = true;
-      tubeTransparent.useDynamicRefraction = true;
-      tubeTransparent.thickness = 4;
-      tubeTransparent.update();
-      
-
-        //opaque
-      tubeOpaque = new pc.StandardMaterial();
-      tubeOpaque.diffuse = new pc.Color(1, 1, 1);
-      tubeOpaque.opacity = 0.9;                         
-      tubeOpaque.update();
-      
-      traverse(modelEntity, node => {
-        if (node.render && node.render.meshInstances) {
-          for (let mi of node.render.meshInstances) {
-            mi.material = matTransparent;
-          }
+        app.start();
+        if (progressDialog) progressDialog.style.display = 'none';
+
+        // Reorder depth layer for transmission
+        const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
+        app.scene.layers.remove(depthLayer);
+        app.scene.layers.insertOpaque(depthLayer, 2);
+
+        // Instantiate GLB entities
+        modelEntity = assets.model.resource.instantiateRenderEntity();
+        tubeEntity = assets.tube.resource.instantiateRenderEntity();
+        filtreEntity = assets.filtre.resource.instantiateRenderEntity();
+
+        app.root.addChild(modelEntity);
+        app.root.addChild(tubeEntity);
+        app.root.addChild(filtreEntity);
+
+        // ----- Materials Setup -----
+        // Transparent material (main model)
+        matTransparent = new pc.StandardMaterial();
+        matTransparent.blendType = pc.BLEND_NORMAL;
+        matTransparent.diffuse = new pc.Color(1, 1, 1);
+        matTransparent.specular = new pc.Color(0.01, 0.01, 0.01);
+        matTransparent.gloss = 1;
+        matTransparent.metalness = 0;
+        matTransparent.useMetalness = true;
+        matTransparent.useDynamicRefraction = true;
+        matTransparent.depthWrite = true;
+        matTransparent.refraction = 0.8;
+        matTransparent.refractionIndex = 1;
+        matTransparent.thickness = 0.02;
+        matTransparent.thicknessMap = thicknessTex;
+        matTransparent.opacityMap = opTex;
+        matTransparent.opacityMapChannel = "r";
+        matTransparent.opacity = 0.97;
+        matTransparent.emissive = new pc.Color(1, 1, 1);
+        matTransparent.emissiveMap = emitTex;
+        matTransparent.emissiveIntensity = 0.1;
+        matTransparent.update();
+
+        // Opaque material (main model)
+        matOpaque = new pc.StandardMaterial();
+        matOpaque.blendType = pc.BLEND_NORMAL;
+        matOpaque.diffuse = new pc.Color(0.7, 0.05, 0.05);
+        matOpaque.specular = new pc.Color(0.01, 0.01, 0.01);
+        matOpaque.specularityFactor = 1;
+        matOpaque.gloss = 1;
+        matOpaque.metalness = 0;
+        matOpaque.opacityMap = opTex;
+        matOpaque.opacityMapChannel = "r";
+        matOpaque.opacity = 1;
+        matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
+        matOpaque.emissiveMap = emitTex;
+        matOpaque.emissiveIntensity = 2;
+        matOpaque.update();
+
+        // Transparent material (tube)
+        tubeTransparent = new pc.StandardMaterial();
+        tubeTransparent.diffuse = new pc.Color(1, 1, 1);
+        tubeTransparent.blendType = pc.BLEND_NORMAL;
+        tubeTransparent.opacity = 0.15;                         
+        tubeTransparent.depthTest = false;
+        tubeTransparent.depthWrite = false;
+        tubeTransparent.useMetalness = true;
+        tubeTransparent.useDynamicRefraction = true;
+        tubeTransparent.thickness = 4;
+        tubeTransparent.update();
+
+        // Opaque material (tube)
+        tubeOpaque = new pc.StandardMaterial();
+        tubeOpaque.diffuse = new pc.Color(1, 1, 1);
+        tubeOpaque.opacity = 0.9;                         
+        tubeOpaque.update();
+
+        // iOS material compatibility tweaks
+        if (isIOS) {
+            matTransparent.useDynamicRefraction = false;
+            matTransparent.thickness = undefined;
+            tubeTransparent.useDynamicRefraction = false;
+            tubeTransparent.thickness = undefined;
         }
-      });
-      
-      
-      traverse(tubeEntity, node => {
-        if (node.render && node.render.meshInstances) {
-          for (let mi of node.render.meshInstances) {
-            mi.material = tubeOpaque;
-          }
-        }
-      });
-
-
-      // 3. Position/scale/orientation
-      modelEntity.setPosition(modelX, modelY, modelZ);
-      modelEntity.setLocalScale(modelScale, modelScale, modelScale);
-      modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-
-      tubeEntity.setPosition(modelX, modelY, modelZ);
-      tubeEntity.setLocalScale(modelScale, modelScale, modelScale);
-      tubeEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-
-      filtreEntity.setPosition(modelX, modelY, modelZ);
-      filtreEntity.setLocalScale(modelScale, modelScale, modelScale);
-      filtreEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-
-      // 4. Camera & orbit
-      
-      cameraEntity = new pc.Entity('camera');
-      cameraEntity.addComponent('camera', {
-        clearColor: new pc.Color(1, 1, 1, 1),
-        toneMapping: pc.TONEMAP_NEUTRAL
-      });
-      cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-      cameraEntity.lookAt(modelEntity.getPosition());
-      cameraEntity.addComponent('script');
-
-      // --- **CRITICAL** for KHR_materials_transmission! ---
-      cameraEntity.camera.requestSceneColorMap(true);
-
-      cameraEntity.script.create('orbitCamera', {
-        attributes: {
-          focusEntity: modelEntity,
-          inertiaFactor: 0.2,
-          distanceMax: maxZoom,
-          distanceMin: minZoom,
-          pitchAngleMax: maxAngle,
-          pitchAngleMin: minAngle,
-          yawAngleMax: maxAzimuth,
-          yawAngleMin: minAzimuth,
-          minY: minY,
-          frameOnStart: false
-        }
-      });
-      cameraEntity.script.create('orbitCameraInputMouse');
-      cameraEntity.script.create('orbitCameraInputTouch');
-      app.root.addChild(cameraEntity);
-
-      // Remove the Skybox layer from the camera
-      const skyboxLayer = app.scene.layers.getLayerByName("Skybox");
-      const camLayers = cameraEntity.camera.layers.slice();
-      const idx = camLayers.indexOf(skyboxLayer.id);
-      if (idx !== -1) {
-          camLayers.splice(idx, 1);
-          cameraEntity.camera.layers = camLayers;
-      }
-
-      // --- Add this block for a plane parented to the camera --
-      const bgPlane = new pc.Entity("Plane");
-      bgPlane.addComponent("model", { type: "plane" });
-      bgPlane.setLocalPosition(0, 0, -10);
-      bgPlane.setLocalScale(11, 1, 5.5);
-      bgPlane.setLocalEulerAngles(90, 0, 0);
-      
-      // Simple material for visibility
-      const mat = new pc.StandardMaterial();
-      mat.diffuse = new pc.Color(1, 1, 1);
-      mat.diffuseMap = bgTex;
-      mat.emissive = new pc.Color(1, 1, 1);
-      mat.emissiveMap = bgTex;
-      mat.emissiveIntensity = 1;
-      mat.useLighting = false;
-      mat.update();
-      bgPlane.model.material = mat;
-      
-      // Parent to the camera
-      cameraEntity.addChild(bgPlane);
-      
-      // 5. Light
-      const light = new pc.Entity("mainLight");
-      light.addComponent('light',{
-        type: "directional",
-        color: new pc.Color(1, 1, 1),
-        intensity: 1,
-      });
-      light.setPosition(1, 1, -1);
-      light.lookAt(0, 0, 0);
-      app.root.addChild(light);
-
-      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-
-      app.once('update', () => resetViewerCamera());
-
-      // Tooltips supported if tooltips_url set
-      try {
-        if (config.tooltips_url) {
-          import('./tooltips.js').then(tooltipsModule => {
-            tooltipsModule.initializeTooltips({
-              app,
-              cameraEntity,
-              modelEntity,
-              tooltipsUrl: config.tooltips_url,
-              defaultVisible: !!config.showTooltipsDefault,
-              moveDuration: config.tooltipMoveDuration || 0.6
-            });
-          }).catch(e => {
-            // Tooltips optional: fail silently if missing
-          });
+
+        // ----- Assign materials to meshes -----
+        traverse(modelEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = matTransparent;
+                }
+            }
+        });
+        traverse(tubeEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = tubeOpaque;
+                }
+            }
+        });
+
+        // ----- Model, Tube, Filtre transforms -----
+        modelEntity.setPosition(modelX, modelY, modelZ);
+        modelEntity.setLocalScale(modelScale, modelScale, modelScale);
+        modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+
+        tubeEntity.setPosition(modelX, modelY, modelZ);
+        tubeEntity.setLocalScale(modelScale, modelScale, modelScale);
+        tubeEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+
+        filtreEntity.setPosition(modelX, modelY, modelZ);
+        filtreEntity.setLocalScale(modelScale, modelScale, modelScale);
+        filtreEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+
+        // ----- Camera + Orbit Controls -----
+        cameraEntity = new pc.Entity('camera');
+        cameraEntity.addComponent('camera', {
+            clearColor: new pc.Color(1, 1, 1, 1),
+            toneMapping: pc.TONEMAP_NEUTRAL
+        });
+        cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+        cameraEntity.lookAt(modelEntity.getPosition());
+        cameraEntity.addComponent('script');
+        // KHR_materials_transmission support
+        cameraEntity.camera.requestSceneColorMap(true);
+        cameraEntity.script.create('orbitCamera', {
+            attributes: {
+                focusEntity: modelEntity,
+                inertiaFactor: 0.2,
+                distanceMax: maxZoom,
+                distanceMin: minZoom,
+                pitchAngleMax: maxAngle,
+                pitchAngleMin: minAngle,
+                yawAngleMax: maxAzimuth,
+                yawAngleMin: minAzimuth,
+                minY: minY,
+                frameOnStart: false
+            }
+        });
+        cameraEntity.script.create('orbitCameraInputMouse');
+        cameraEntity.script.create('orbitCameraInputTouch');
+        app.root.addChild(cameraEntity);
+
+        // Remove Skybox layer from camera
+        const skyboxLayer = app.scene.layers.getLayerByName("Skybox");
+        if (skyboxLayer) {
+            const camLayers = cameraEntity.camera.layers.slice();
+            const idx = camLayers.indexOf(skyboxLayer.id);
+            if (idx !== -1) {
+                camLayers.splice(idx, 1);
+                cameraEntity.camera.layers = camLayers;
+            }
         }
-      } catch (e) {
-        // Tooltips optional, fail silently
-      }
 
-      viewerInitialized = true;
+        // ----- Camera-attached background plane -----
+        const bgPlane = new pc.Entity("Plane");
+        bgPlane.addComponent("model", { type: "plane" });
+        bgPlane.setLocalPosition(0, 0, -10);
+        bgPlane.setLocalScale(11, 1, 5.5);
+        bgPlane.setLocalEulerAngles(90, 0, 0);
+        // Simple material for the banner
+        const mat = new pc.StandardMaterial();
+        mat.diffuse = new pc.Color(1, 1, 1);
+        mat.diffuseMap = bgTex;
+        mat.emissive = new pc.Color(1, 1, 1);
+        mat.emissiveMap = bgTex;
+        mat.emissiveIntensity = 1;
+        mat.useLighting = false;
+        mat.update();
+        bgPlane.model.material = mat;
+        cameraEntity.addChild(bgPlane);
+
+        // ----- Lighting -----
+        const light = new pc.Entity("mainLight");
+        light.addComponent('light', {
+            type: "directional",
+            color: new pc.Color(1, 1, 1),
+            intensity: 1,
+        });
+        light.setPosition(1, 1, -1);
+        light.lookAt(0, 0, 0);
+        app.root.addChild(light);
+
+        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+        app.once('update', () => resetViewerCamera());
+
+        // ----- Optional: Tooltips -----
+        try {
+            if (config.tooltips_url) {
+                import('./tooltips.js').then(tooltipsModule => {
+                    tooltipsModule.initializeTooltips({
+                        app,
+                        cameraEntity,
+                        modelEntity,
+                        tooltipsUrl: config.tooltips_url,
+                        defaultVisible: !!config.showTooltipsDefault,
+                        moveDuration: config.tooltipMoveDuration || 0.6
+                    });
+                }).catch(e => { /* fail silently */ });
+            }
+        } catch (e) { /* fail silently */ }
+
+        viewerInitialized = true;
     });
 }
 
+// ----- Camera Utility: Resets camera to default view -----
 export function resetViewerCamera() {
-  try {
-    if (!cameraEntity || !modelEntity || !app) return;
-    const orbitCam = cameraEntity.script.orbitCamera;
-    if (!orbitCam) return;
-
-    const modelPos = modelEntity.getPosition();
-    const tempEnt = new pc.Entity();
-    tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-    tempEnt.lookAt(modelPos);
-
-    const dist = new pc.Vec3().sub2(
-      new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
-      modelPos
-    ).length();
-
-    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-    cameraEntity.lookAt(modelPos);
-
-    orbitCam.pivotPoint = modelPos.clone();
-    orbitCam._targetDistance = dist;
-    orbitCam._distance       = dist;
-
-    const rot = tempEnt.getRotation();
-    const fwd = new pc.Vec3();
-    rot.transformVector(pc.Vec3.FORWARD, fwd);
-
-    const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG;
-    const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
-    const rotNoYaw = new pc.Quat().mul2(yawQuat, rot);
-    const fNoYaw = new pc.Vec3();
-    rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
-    const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
-
-    orbitCam._targetYaw   = yaw;
-    orbitCam._yaw         = yaw;
-    orbitCam._targetPitch = pitch;
-    orbitCam._pitch       = pitch;
-    if (orbitCam._updatePosition) orbitCam._updatePosition();
-
-    tempEnt.destroy();
-  } catch (e) {
-    // Silent fail
-  }
+    try {
+        if (!cameraEntity || !modelEntity || !app) return;
+        const orbitCam = cameraEntity.script.orbitCamera;
+        if (!orbitCam) return;
+
+        const modelPos = modelEntity.getPosition();
+        const tempEnt = new pc.Entity();
+        tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+        tempEnt.lookAt(modelPos);
+
+        const dist = new pc.Vec3().sub2(
+            new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
+            modelPos
+        ).length();
+
+        cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+        cameraEntity.lookAt(modelPos);
+
+        orbitCam.pivotPoint = modelPos.clone();
+        orbitCam._targetDistance = dist;
+        orbitCam._distance       = dist;
+
+        const rot = tempEnt.getRotation();
+        const fwd = new pc.Vec3();
+        rot.transformVector(pc.Vec3.FORWARD, fwd);
+
+        const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG;
+        const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
+        const rotNoYaw = new pc.Quat().mul2(yawQuat, rot);
+        const fNoYaw = new pc.Vec3();
+        rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
+        const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
+
+        orbitCam._targetYaw   = yaw;
+        orbitCam._yaw         = yaw;
+        orbitCam._targetPitch = pitch;
+        orbitCam._pitch       = pitch;
+        if (orbitCam._updatePosition) orbitCam._updatePosition();
+
+        tempEnt.destroy();
+    } catch (e) {
+        // Silent fail
+    }
 }
 
 /**
@@ -467,57 +431,49 @@ export function resetViewerCamera() {
  * r,g,b are floats [0,1]. This is a reusable function for new colors.
  */
 export function changeColor(dr, dg, db, er, eg, eb, ei, op, boolTrans) {
-  
-  //cameraEntity.camera.clearColor = new pc.Color(colorBgR, colorBgG, colorBgB);  
-  if(boolTrans){
-    if (!matTransparent) return;
-
-    matTransparent.diffuse.set(dr, dg, db);
-    matTransparent.emissive.set(er, eg, eb);
-    matTransparent.emissiveIntensity = ei;
-    matTransparent.opacity = op;
-    matTransparent.update();
-
-    tubeTransparent.diffuse.set(dr, dg, db);
-    tubeTransparent.update();
-
-    traverse(modelEntity, node => {
-        if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-                mi.material = matTransparent;
+    if (boolTrans) {
+        if (!matTransparent) return;
+        matTransparent.diffuse.set(dr, dg, db);
+        matTransparent.emissive.set(er, eg, eb);
+        matTransparent.emissiveIntensity = ei;
+        matTransparent.opacity = op;
+        matTransparent.update();
+        tubeTransparent.diffuse.set(dr, dg, db);
+        tubeTransparent.update();
+
+        traverse(modelEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = matTransparent;
+                }
             }
-        }
-    });
-
-    traverse(tubeEntity, node => {
-        if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-                mi.material = tubeTransparent;
+        });
+        traverse(tubeEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = tubeTransparent;
+                }
             }
-        }
-    });
-  }else{
-    if (!matOpaque) return;
-
-    matOpaque.diffuse.set(dr, dg, db);
-    matOpaque.emissive.set(er, eg, eb);
-    matOpaque.emissiveIntensity = ei;
-    matOpaque.update();
-
-    traverse(modelEntity, node => {
-        if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-                mi.material = matOpaque;
+        });
+    } else {
+        if (!matOpaque) return;
+        matOpaque.diffuse.set(dr, dg, db);
+        matOpaque.emissive.set(er, eg, eb);
+        matOpaque.emissiveIntensity = ei;
+        matOpaque.update();
+        traverse(modelEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = matOpaque;
+                }
             }
-        }
-    });
-
-    traverse(tubeEntity, node => {
-        if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-                mi.material = tubeOpaque;
+        });
+        traverse(tubeEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = tubeOpaque;
+                }
             }
-        }
-    });
-  }
+        });
+    }
 }