Update viewer_2.js

viewer_2.js

@@ -1,6 +1,46 @@
-// viewer_2.js
+/*(function(){
+  let logDiv = document.createElement('div');
+  logDiv.style.position = 'fixed';
+  logDiv.style.bottom = '0';
+  logDiv.style.left = '0';
+  logDiv.style.maxHeight = '40vh';
+  logDiv.style.width = '100vw';
+  logDiv.style.overflow = 'auto';
+  logDiv.style.background = 'rgba(0,0,0,0.85)';
+  logDiv.style.color = '#fff';
+  logDiv.style.fontSize = '12px';
+  logDiv.style.zIndex = '99999';
+  logDiv.style.pointerEvents = 'none';
+  logDiv.style.fontFamily = 'monospace';
+  document.body.appendChild(logDiv);
+
+  function printLog(msg, color) {
+    let el = document.createElement('div');
+    el.style.color = color || '#fff';
+    el.textContent = msg;
+    logDiv.appendChild(el);
+    logDiv.scrollTop = logDiv.scrollHeight;
+  }
 
-let pc;
+  let origLog = console.log;
+  console.log = function(...args){
+    printLog('[LOG] ' + args.map(String).join(' '), '#0f0');
+    origLog.apply(console, args);
+  };
+  let origErr = console.error;
+  console.error = function(...args){
+    printLog('[ERR] ' + args.map(String).join(' '), '#f55');
+    origErr.apply(console, args);
+  };
+  window.onerror = function(msg, src, lineno, colno, error){
+    printLog('[ERR] ' + msg + ' at ' + src + ':' + lineno, '#f55');
+  };
+})();*/
+
+// viewer.js
+// ==============================
+
+let pc;            
 export let app = null;
 let cameraEntity = null;
 let glbEntity = null;
@@ -14,7 +54,7 @@ let glbUrl;
 
 let matTransparent = null;
 
-// Utility: Recursive entity traversal
+// RECURSIVE ENTITY TRAVERSAL
 function traverse(entity, callback) {
   callback(entity);
   if (entity.children) {
@@ -23,313 +63,265 @@ function traverse(entity, callback) {
 }
 
 export async function initializeViewer(config, instanceId) {
-  if (viewerInitialized) {
-    console.log("Viewer already initialized.");
-    return;
+  if (viewerInitialized) return;
+
+  glbUrl = config.glb_url;
+  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;
+
+  chosenCameraX = 0;
+  chosenCameraY = 0;
+  chosenCameraZ = 1;
+
+  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');
+  viewerContainer.insertBefore(canvas, progressDialog);
+
+  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 });
+
+  // --- The following line attaches mouse wheel suppression to canvas only ---
+  canvas.addEventListener('wheel', (e) => {
+    e.preventDefault(); // Only block page scroll if mouse is over viewer
+  }, { passive: false });
+
+  progressDialog.style.display = 'block';
+
+  if (!pc) {
+    pc = await import("https://esm.run/playcanvas");
+    window.pc = pc;
   }
-  try {
-    console.log("Initializing viewer for instance:", instanceId, config);
-
-    glbUrl = config.glb_url;
-    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;
-
-    chosenCameraX = 0;
-    chosenCameraY = 0;
-    chosenCameraZ = 1;
-
-    // ---- DOM Elements ----
-    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);
-
-    if (!viewerContainer) {
-      console.error("viewerContainer not found!", 'viewer-container-' + instanceId);
-      return;
-    }
-    if (!progressDialog) {
-      console.error("progressDialog not found!", 'progress-dialog-' + instanceId);
-    }
-
-    let oldCanvas = document.getElementById(canvasId);
-    if (oldCanvas) {
-      oldCanvas.remove();
-      console.log("Old canvas removed");
-    }
 
-    const canvas = document.createElement('canvas');
-    canvas.id = canvasId;
-    canvas.className = 'ply-canvas';
-    canvas.style.width = "100%";
-    canvas.style.height = "100%";
-    canvas.setAttribute('tabindex', '0');
-    viewerContainer.insertBefore(canvas, progressDialog);
-
-    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) {
-      try {
-        pc = await import("https://esm.run/playcanvas");
-        window.pc = pc;
-        console.log("PlayCanvas loaded:", pc.version || pc);
-      } catch (err) {
-        console.error("Failed to import PlayCanvas:", err);
-        return;
+  // 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;
+  // Attach input only to canvas
+  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 comme dans exemple ///////
+  ////////////////////////////////////////
+  app = new pc.Application(canvas, opts);
+  //app = new pc.AppBase(canvas);
+  //app.init(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);
+    });
+  });
+  resizeObserver.observe(viewerContainer);
+
+  window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
+  app.on('destroy', () => resizeObserver.disconnect());
+
+  // Assets after app exists
+  const assets = {
+    orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-glb.static.hf.space/orbit-camera.js" }),
+    glb: new pc.Asset('glb', 'container', { url: glbUrl }),
+    hdr: new pc.Asset(
+        'hdr-env-atlas', 'texture', 
+        {url: 'https://playcanvas.vercel.app/static/assets/cubemaps/helipad-env-atlas.png'},
+        { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
+    ),
+    ao_map: new pc.Asset('color', 'texture', { url: 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/emit_map_2k.png' }),
+    op_map: new pc.Asset('color', 'texture', { url: 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/op_map_2k.png' }),
+    thickness_map: new pc.Asset('color', 'texture', { url: 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/thickness_map_2k.png' })
+  };
+
+  for (const key in assets) app.assets.add(assets[key]);
+
+
+  const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+  loader.load(() => {
+    app.start();
+    progressDialog.style.display = 'none';
+
+    app.scene.envAtlas = assets.hdr.resource;
+    app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, -90, 0);
+    app.scene.skyboxIntensity = 4;
+    app.scene.skyboxMip = 0;
+
+    // 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);
+
+
+    // --- Add the GLB entity ---
+    glbEntity = assets.glb.resource.instantiateRenderEntity();
+    app.root.addChild(glbEntity);
+
+    // 2. Materials for main model & tube
+    const ao = assets.ao_map.resource;
+    //const op = assets.op_map.resource;
+    //const thickness = assets.thickness_map.resource;
+
+    // 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 = thickness;
+    //matTransparent.opacityMap = op;
+    //matTransparent.opacityMapChannel = "r";
+    matTransparent.opacity = 0.97;
+    matTransparent.emissive = new pc.Color(1, 1, 1);
+    matTransparent.emissiveMap = ao;
+    matTransparent.emissiveIntensity = 0.1;
+    matTransparent.update();
+
+    traverse(glbEntity, node => {
+      if (node.render && node.render.meshInstances) {
+        for (let mi of node.render.meshInstances) {
+          mi.material = matTransparent;
+        }
       }
-    }
-
-    // ---- Create Graphics Device ----
-    let device;
-    try {
-      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);
-      console.log("Graphics device created:", device);
-    } catch (err) {
-      console.error("Failed to create graphics device:", err);
-      return;
-    }
-
-    // ---- Create AppOptions ----
-    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
-    ];
-
-    // ---- Initialize AppBase ----
-    try {
-      app = new pc.AppBase(canvas);
-      await app.init(opts);
-      console.log("AppBase initialized");
-    } catch (err) {
-      console.error("Failed to initialize AppBase:", err);
-      return;
-    }
+    });
 
-    app.setCanvasFillMode(pc.FILLMODE_NONE);
-    app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    // ---- Resize observer ----
-    try {
-      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());
-      console.log("Resize observer set");
-    } catch (err) {
-      console.error("Resize observer error:", err);
-    }
+    glbEntity.setPosition(modelX, modelY, modelZ);
+    glbEntity.setLocalScale(modelScale, modelScale, modelScale);
+    glbEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
 
-    // ---- ASSET LOADING ----
-    const assets = {
-      orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-glb.static.hf.space/orbit-camera.js" }),
-      glb: new pc.Asset('glb', 'container', { url: glbUrl }),
-      hdr: new pc.Asset(
-        'hdr-env-atlas', 'texture',
-        { url: 'https://playcanvas.vercel.app/static/assets/cubemaps/helipad-env-atlas.png' },
-        { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
-      ),
-      ao_map: new pc.Asset('color', 'texture', { url: 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/emit_map_2k.png' }),
-      op_map: new pc.Asset('color', 'texture', { url: 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/op_map_2k.png' }),
-      thickness_map: new pc.Asset('color', 'texture', { url: 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/thickness_map_2k.png' })
-    };
-
-    for (const key in assets) app.assets.add(assets[key]);
-    console.log("Assets added to app.assets");
-
-    // ---- ASSET LOADER ----
-    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
-
-    loader.load(() => {
-      try {
-        app.start();
-        if (progressDialog) progressDialog.style.display = 'none';
-        console.log("Assets loaded, app started");
-
-        app.scene.envAtlas = assets.hdr.resource;
-        app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, -90, 0);
-        app.scene.skyboxIntensity = 4;
-        app.scene.skyboxMip = 0;
-
-        // Reorder depth layer
-        const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
-        app.scene.layers.remove(depthLayer);
-        app.scene.layers.insertOpaque(depthLayer, 2);
-
-        // Add GLB entity
-        glbEntity = assets.glb.resource.instantiateRenderEntity();
-        app.root.addChild(glbEntity);
-        console.log("GLB entity added:", glbEntity);
-
-        // Prepare transparent material
-        const ao = assets.ao_map.resource;
-        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 = thickness; // Add as needed
-        // matTransparent.opacityMap = op; // Add as needed
-        matTransparent.opacity = 0.97;
-        matTransparent.emissive = new pc.Color(1, 1, 1);
-        matTransparent.emissiveMap = ao;
-        matTransparent.emissiveIntensity = 0.1;
-        matTransparent.update();
-
-        traverse(glbEntity, node => {
-          if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-              mi.material = matTransparent;
-            }
-          }
-        });
+    cameraEntity = new pc.Entity('camera');
+    // PURE WHITE BACKGROUND
+    cameraEntity.addComponent('camera'); // White RGBA
+    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+    cameraEntity.lookAt(glbEntity.getPosition());
+    cameraEntity.addComponent('script');
+
+    cameraEntity.camera.requestSceneColorMap(true);
+
+    // === MAIN FIX: Pass ALL relevant attributes including minY ===
+    cameraEntity.script.create('orbitCamera', {
+      attributes: {
+        focusEntity: glbEntity,
+        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);
 
-        glbEntity.setPosition(modelX, modelY, modelZ);
-        glbEntity.setLocalScale(modelScale, modelScale, modelScale);
-        glbEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-
-        // Camera setup
-        cameraEntity = new pc.Entity('camera');
-        cameraEntity.addComponent('camera');
-        cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-        cameraEntity.lookAt(glbEntity.getPosition());
-        cameraEntity.addComponent('script');
-        cameraEntity.camera.requestSceneColorMap(true);
-
-        cameraEntity.script.create('orbitCamera', {
-          attributes: {
-            focusEntity: glbEntity,
-            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);
+    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
 
-        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+    app.once('update', () => resetViewerCamera());
 
-        app.once('update', () => {
-          console.log("First update: calling resetViewerCamera()");
-          resetViewerCamera();
+    // Tooltips supported if tooltips_url set
+    try {
+      if (config.tooltips_url) {
+        import('./tooltips.js').then(tooltipsModule => {
+          tooltipsModule.initializeTooltips({
+            app,
+            cameraEntity,
+            glbEntity,
+            tooltipsUrl: config.tooltips_url,
+            defaultVisible: !!config.showTooltipsDefault,
+            moveDuration: config.tooltipMoveDuration || 0.6
+          });
+        }).catch(e => {
+          // Tooltips optional: fail silently if missing
         });
-
-        // Tooltips support
-        try {
-          if (config.tooltips_url) {
-            import('./tooltips.js').then(tooltipsModule => {
-              tooltipsModule.initializeTooltips({
-                app,
-                cameraEntity,
-                glbEntity,
-                tooltipsUrl: config.tooltips_url,
-                defaultVisible: !!config.showTooltipsDefault,
-                moveDuration: config.tooltipMoveDuration || 0.6
-              });
-              console.log("Tooltips loaded");
-            }).catch(e => {
-              console.error("Tooltips import error:", e);
-            });
-          }
-        } catch (e) {
-          console.error("Tooltips setup error:", e);
-        }
-
-        viewerInitialized = true;
-        console.log("Viewer fully initialized");
-      } catch (e) {
-        console.error("Error during asset loader callback:", e);
       }
-    });
+    } catch (e) {
+      // Tooltips optional, fail silently
+    }
+
+    viewerInitialized = true;
+  });
 
-  } catch (e) {
-    console.error("Error in initializeViewer (outer):", e);
-  }
 }
 
 export function resetViewerCamera() {
+console.log(glbEntity.getPosition());
   try {
-    if (!cameraEntity || !glbEntity || !app) {
-      console.warn("resetViewerCamera: missing cameraEntity, glbEntity, or app", { cameraEntity, glbEntity, app });
-      return;
-    }
+    if (!cameraEntity || !glbEntity || !app) return;
     const orbitCam = cameraEntity.script.orbitCamera;
-    if (!orbitCam) {
-      console.warn("resetViewerCamera: orbitCamera script missing");
-      return;
-    }
+    if (!orbitCam) return;
 
     const modelPos = glbEntity.getPosition();
-    console.log("Resetting camera. Model position:", modelPos);
+    console.log(modelPos);
     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),
+      new pc.Vec3(chosenCamearaX, chosenCameraY, chosenCameraZ),
       modelPos
     ).length();
 
@@ -358,8 +350,8 @@ export function resetViewerCamera() {
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
-    console.log("Camera reset complete.");
   } catch (e) {
-    console.error("resetViewerCamera error:", e);
+    // Silent fail
   }
 }
+