Update viewer.js

viewer.js

@@ -1,7 +1,7 @@
 // viewer.js
 // ==============================
 
-let pc;            // will hold the PlayCanvas module once imported
+let pc;            // PlayCanvas module (will be loaded dynamically)
 export let app = null;
 let cameraEntity   = null;
 let modelEntity    = null;
@@ -14,13 +14,9 @@ let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRot
 let plyUrl, glbUrl;
 
 export async function initializeViewer(config, instanceId) {
-  alert("[viewer.js] initializeViewer called");
-
-  if (viewerInitialized) {
-    alert("[viewer.js] Already initialized, skipping.");
-    return;
-  }
+  if (viewerInitialized) return;
 
+  // Device detection
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
@@ -61,8 +57,6 @@ export async function initializeViewer(config, instanceId) {
   const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   const viewerContainer   = document.getElementById('viewer-container-' + instanceId);
 
-  alert("[viewer.js] DOM elements grabbed");
-
   // 3. Create <canvas>
   let oldCanvas = document.getElementById(canvasId);
   if (oldCanvas) oldCanvas.remove();
@@ -70,26 +64,24 @@ export async function initializeViewer(config, instanceId) {
   canvas.id = canvasId;
   canvas.className = 'ply-canvas';
   canvas.style.zIndex = "1";
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.setAttribute('tabindex', '0');
   viewerContainer.insertBefore(canvas, progressDialog);
-  alert("[viewer.js] Canvas inserted");
 
-  // Prevent iOS Safari from zooming the whole page via gestures on canvas
+  // Prevent iOS Safari zoom gesture conflicts
+  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', function(e) {
     if (e.touches.length > 1) e.preventDefault();
   }, { passive: false });
-  canvas.addEventListener('gesturestart', function(e) {
-    e.preventDefault();
-  });
-  canvas.addEventListener('gesturechange', function(e) {
-    e.preventDefault();
-  });
-  canvas.addEventListener('gestureend', function(e) {
-    e.preventDefault();
-  });
 
-  // 4. Wheel listener
+  // 4. Wheel/zoom listener (desktop)
   canvas.addEventListener('wheel', e => {
-    alert("[viewer.js] Wheel event on canvas");
     if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
       const orbitCam = cameraEntity.script.orbitCamera;
       const sens = (cameraEntity.script.orbitCameraInputMouse?.distanceSensitivity) || 0.4;
@@ -103,218 +95,196 @@ export async function initializeViewer(config, instanceId) {
     }
   }, { passive: false });
 
+  // Show loading
   progressDialog.style.display = 'block';
-  alert("[viewer.js] Canvas ready, loading PlayCanvas...");
 
-  // 5. Import PlayCanvas
+  // 5. Import PlayCanvas if not present
   if (!pc) {
-    try {
-      pc = await import("https://esm.run/playcanvas");
-      window.pc = pc;
-      alert("[viewer.js] PlayCanvas loaded");
-    } catch (err) {
-      alert("[viewer.js] ERROR loading PlayCanvas: " + err);
-      return;
-    }
+    pc = await import("https://esm.run/playcanvas");
+    window.pc = pc;
   }
 
-  try {
-    // 6. Setup device & app
-    const device = await pc.createGraphicsDevice(canvas, {
-      deviceTypes: ["webgl2"],
-      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);
-
-    // Attach ResizeObserver to keep canvas in sync with container size
-    resizeObserver = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        if (app) {
-          app.resizeCanvas(width, height);
-        }
+  // 6. Setup device & app
+  const device = await pc.createGraphicsDevice(canvas, {
+    deviceTypes: ["webgl2"],
+    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);
+
+  // Attach ResizeObserver to keep canvas in sync with container size
+  resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      const { width, height } = entry.contentRect;
+      if (app) {
+        app.resizeCanvas(width, height);
       }
-    });
-    resizeObserver.observe(viewerContainer);
+    }
+  });
+  resizeObserver.observe(viewerContainer);
 
-    window.addEventListener('resize', () => {
-      if (app) app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-    });
+  window.addEventListener('resize', () => {
+    if (app) app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+  });
 
-    app.on('destroy', () => {
-      window.removeEventListener('resize', resizeCanvas);
-    });
+  app.on('destroy', () => {
+    if (resizeObserver) resizeObserver.disconnect();
+    resizeObserver = null;
+  });
 
-    alert("[viewer.js] PlayCanvas app initialized");
+  // 7. Asset loading (progress bar)
+  const assets = {
+    model: new pc.Asset('gsplat', 'gsplat', { url: plyUrl }),
+    orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
+    galerie: new pc.Asset('galerie', 'container', { url: glbUrl }),
+    hdr: new pc.Asset('hdr', 'texture', {
+      url: "https://huggingface.co/datasets/bilca/ply_files/resolve/main/galeries/blanc.png"
+    }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
+  };
+
+  let lastProg = 0;
+  assets.model.on('load', () => { progressDialog.style.display = 'none'; });
+  assets.model.on('error', err => {
+    progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
+  });
 
-    // 7. Assets
-    const assets = {
-      model: new pc.Asset('gsplat', 'gsplat', { url: plyUrl }),
-      orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
-      galerie: new pc.Asset('galerie', 'container', { url: glbUrl }),
-      hdr: new pc.Asset('hdr', 'texture', {
-        url: "https://huggingface.co/datasets/bilca/ply_files/resolve/main/galeries/blanc.png"
-      }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
-    };
+  const progCheck = setInterval(() => {
+    if (assets.model.resource) {
+      progressIndicator.value = 100;
+      clearInterval(progCheck);
+      progressDialog.style.display = 'none';
+    } else if (assets.model.loading) {
+      lastProg = Math.min(lastProg + 2, 90);
+      progressIndicator.value = lastProg;
+    }
+  }, 100);
+
+  const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+  loader.load(async () => {
+    app.start();
+    app.scene.envAtlas = assets.hdr.resource;
+
+    // Main model entity
+    modelEntity = new pc.Entity('model');
+    modelEntity.addComponent('gsplat', { asset: assets.model });
+    modelEntity.setLocalPosition(modelX, modelY, modelZ);
+    modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+    modelEntity.setLocalScale(modelScale, modelScale, modelScale);
+    app.root.addChild(modelEntity);
+
+    // Light
+    const dirLight = new pc.Entity('Cascaded Light');
+    dirLight.addComponent('light', {
+      type: 'directional',
+      color: pc.Color.WHITE,
+      shadowBias: 0.3,
+      normalOffsetBias: 0.2,
+      intensity: 1.0,
+      soft: true,
+      shadowResolution: 4096,
+      penumbraSize: 7,
+      penumbraFalloff: 1.5,
+      shadowSamples: 128,
+      shadowBlockerSamples: 16,
+      castShadows: true,
+      shadowType: pc.SHADOW_PCSS_32F,
+      shadowDistance: 1000
+    });
+    dirLight.setLocalEulerAngles(0, 0, 0);
+    app.root.addChild(dirLight);
 
-    alert("[viewer.js] Assets declared");
+    // Gallery GLB (optional)
+    if (assets.galerie && assets.galerie.resource && assets.galerie.resource.instantiateRenderEntity) {
+      const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
+      app.root.addChild(galleryEntity);
+    }
 
-    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
-    let lastProg = 0;
-    assets.model.on('load', () => {
-      progressDialog.style.display = 'none';
-      alert("[viewer.js] Main model loaded");
+    // Camera setup
+    cameraEntity = new pc.Entity('camera');
+    cameraEntity.addComponent('camera', {
+      clearColor: config.canvas_background
+        ? new pc.Color(
+            parseInt(config.canvas_background.substr(1, 2), 16) / 255,
+            parseInt(config.canvas_background.substr(3, 2), 16) / 255,
+            parseInt(config.canvas_background.substr(5, 2), 16) / 255,
+            1
+          )
+        : new pc.Color(0.2, 0.2, 0.2, 1)
     });
-    assets.model.on('error', err => {
-      progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
-      alert("[viewer.js] ERROR loading main model: " + err);
+    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+    cameraEntity.lookAt(modelEntity.getPosition());
+
+    cameraEntity.addComponent('script');
+    cameraEntity.script.create('orbitCamera', {
+      attributes: {
+        inertiaFactor: 0.2,
+        focusEntity: modelEntity,
+        distanceMax: maxZoom,
+        distanceMin: minZoom,
+        pitchAngleMax: maxAngle,
+        pitchAngleMin: minAngle,
+        yawAngleMax: maxAzimuth,
+        yawAngleMin: minAzimuth,
+        minPivotY: minPivotY,
+        minY: minY,
+        frameOnStart: false
+      }
     });
-
-    const progCheck = setInterval(() => {
-      if (assets.model.resource) {
-        progressIndicator.value = 100;
-        clearInterval(progCheck);
-        progressDialog.style.display = 'none';
-      } else if (assets.model.loading) {
-        lastProg = Math.min(lastProg + 2, 90);
-        progressIndicator.value = lastProg;
+    cameraEntity.script.create('orbitCameraInputMouse', {
+      attributes: {
+        orbitSensitivity: isMobile ? 0.6 : 0.3,
+        distanceSensitivity: isMobile ? 0.5 : 0.4
       }
-    }, 100);
-
-    loader.load(async () => {
-      alert("[viewer.js] Asset loader complete. Starting app...");
-      app.start();
-      app.scene.envAtlas = assets.hdr.resource;
-      alert("[viewer.js] Scene envAtlas set");
-
-      // Model entity
-      modelEntity = new pc.Entity('model');
-      modelEntity.addComponent('gsplat', { asset: assets.model });
-      modelEntity.setLocalPosition(modelX, modelY, modelZ);
-      modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-      modelEntity.setLocalScale(modelScale, modelScale, modelScale);
-      app.root.addChild(modelEntity);
-      alert("[viewer.js] Main model entity added");
-
-      // Light
-      const dirLight = new pc.Entity('Cascaded Light');
-      dirLight.addComponent('light', {
-        type: 'directional',
-        color: pc.Color.WHITE,
-        shadowBias: 0.3,
-        normalOffsetBias: 0.2,
-        intensity: 1.0,
-        soft: true,
-        shadowResolution: 4096,
-        penumbraSize: 7,
-        penumbraFalloff: 1.5,
-        shadowSamples: 128,
-        shadowBlockerSamples: 16,
-        castShadows: true,
-        shadowType: pc.SHADOW_PCSS_32F,
-        shadowDistance: 1000
-      });
-      dirLight.setLocalEulerAngles(0, 0, 0);
-      app.root.addChild(dirLight);
-      alert("[viewer.js] Directional light entity added");
-
-      // Gallery GLB
-      if (assets.galerie && assets.galerie.resource && assets.galerie.resource.instantiateRenderEntity) {
-        const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
-        app.root.addChild(galleryEntity);
-        alert("[viewer.js] Gallery GLB entity added");
+    });
+    cameraEntity.script.create('orbitCameraInputTouch', {
+      attributes: {
+        orbitSensitivity: 0.6,
+        distanceSensitivity: 0.5
       }
+    });
+    app.root.addChild(cameraEntity);
+
+    // On first update, reset camera to proper config
+    app.once('update', () => { resetViewerCamera(); });
 
-      // Camera setup
-      cameraEntity = new pc.Entity('camera');
-      cameraEntity.addComponent('camera', {
-        clearColor: config.canvas_background
-          ? parseInt(config.canvas_background.substr(1, 2), 16) / 255
-          : 0
-      });
-      cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-      cameraEntity.lookAt(modelEntity.getPosition());
-
-      cameraEntity.addComponent('script');
-      cameraEntity.script.create('orbitCamera', {
-        attributes: {
-          inertiaFactor: 0.2,
-          focusEntity: modelEntity,
-          distanceMax: maxZoom,
-          distanceMin: minZoom,
-          pitchAngleMax: maxAngle,
-          pitchAngleMin: minAngle,
-          yawAngleMax: maxAzimuth,
-          yawAngleMin: minAzimuth,
-          minPivotY: minPivotY,
-          frameOnStart: false
-        }
-      });
-      cameraEntity.script.create('orbitCameraInputMouse', {
-        attributes: {
-          orbitSensitivity: isMobile ? 0.6 : 0.3,
-          distanceSensitivity: isMobile ? 0.5 : 0.4
-        }
-      });
-      if (cameraEntity.script.orbitCameraInputMouse) {
-        cameraEntity.script.orbitCameraInputMouse.onMouseWheel = function() {
-          alert("[viewer.js] onMouseWheel (custom suppressed)");
-        };
+    // Clamp Y so camera never goes below floor
+    app.on('update', dt => {
+      if (cameraEntity) {
+        const pos = cameraEntity.getPosition();
+        if (pos.y < minY) cameraEntity.setPosition(pos.x, minY, pos.z);
       }
-      cameraEntity.script.create('orbitCameraInputTouch', {
-        attributes: {
-          orbitSensitivity: 0.6,
-          distanceSensitivity: 0.5
-        }
-      });
-      app.root.addChild(cameraEntity);
-      alert("[viewer.js] Camera entity added and set up");
-
-      // Reset & constrain updates
-      app.once('update', () => {
-        alert("[viewer.js] First app update (reset camera)");
-        resetViewerCamera();
-      });
-      app.on('update', dt => {
-        if (cameraEntity) {
-          const pos = cameraEntity.getPosition();
-          if (pos.y < minY) {
-            cameraEntity.setPosition(pos.x, minY, pos.z);
-          }
-        }
-      });
-
-      // Final resize
-      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-      alert("[viewer.js] Canvas resized to viewer container");
-
-      // Tooltips
+    });
+
+    // Final resize
+    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+
+    // Tooltips
+    if (config.tooltips_url) {
       try {
         const tooltipsModule = await import('./tooltips.js');
         await tooltipsModule.initializeTooltips({
@@ -325,24 +295,15 @@ export async function initializeViewer(config, instanceId) {
           defaultVisible: !!config.showTooltipsDefault,
           moveDuration: config.tooltipMoveDuration || 0.6
         });
-        alert("[viewer.js] Tooltips initialized");
-      } catch (e) {
-        alert("[viewer.js] Tooltips.js import/init failed: " + e);
-      }
-
-      progressDialog.style.display = 'none';
-      alert("[viewer.js] App fully loaded!");
-      viewerInitialized = true;
-    });
+      } catch (e) {/* Fail quietly */}
+    }
 
-  } catch (error) {
-    progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error && error.message ? error.message : error}</p>`;
-    alert("[viewer.js] ERROR in PlayCanvas app setup: " + (error && error.message ? error.message : error));
-  }
+    // Ready!
+    viewerInitialized = true;
+  });
 }
 
 export function resetViewerCamera() {
-  alert("[viewer.js] resetViewerCamera called");
   try {
     if (!cameraEntity || !modelEntity || !app) return;
     const orbitCam = cameraEntity.script.orbitCamera;
@@ -383,14 +344,10 @@ export function resetViewerCamera() {
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
-    alert("[viewer.js] resetViewerCamera completed");
-  } catch (e) {
-    alert("[viewer.js] ERROR in resetViewerCamera: " + e);
-  }
+  } catch (e) {/* Fail quietly */}
 }
 
 export function cleanupViewer() {
-  alert("[viewer.js] cleanupViewer called");
   if (app) {
     try {
       app.destroy();
@@ -400,10 +357,8 @@ export function cleanupViewer() {
   cameraEntity = null;
   modelEntity  = null;
   viewerInitialized = false;
-
   if (resizeObserver) {
     resizeObserver.disconnect();
     resizeObserver = null;
   }
-  alert("[viewer.js] cleanupViewer completed");
 }