Update viewer.js

viewer.js

@@ -10,7 +10,6 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let sogsUrl, glbUrl, canvasBg;
 
-// ---- Utility: hex color to RGBA ----
 function hexToRgbaArray(hex) {
   try {
     hex = hex.replace("#", "");
@@ -24,23 +23,24 @@ function hexToRgbaArray(hex) {
       (num & 0xFF) / 255
     ];
   } catch (e) {
-    console.error("hexToRgbaArray error: " + e);
+    alert("hexToRgbaArray error: " + e);
     return [1, 1, 1, 1];
   }
 }
 
 export async function initializeViewer(config, instanceId) {
+  alert("initializeViewer: start");
+
   if (viewerInitialized) {
-    console.warn("Already initialized!");
+    alert("Already initialized!");
     return;
   }
 
-  // ---- Platform Detection ----
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
   try {
-    // ---- Parse Config ----
+    // Parse config
     sogsUrl   = config.sogs_json_url;
     glbUrl    = config.glb_url;
     canvasBg  = config.canvas_background || "#ffffff";
@@ -77,59 +77,63 @@ export async function initializeViewer(config, instanceId) {
     const progressIndicator= document.getElementById('progress-indicator-' + instanceId);
     const viewerContainer  = document.getElementById('viewer-container-' + instanceId);
 
-    // Remove previous canvas if present
     let oldCanvas = document.getElementById(canvasId);
     if (oldCanvas) oldCanvas.remove();
 
-    // ---- Create and Insert Canvas ----
     const canvas = document.createElement('canvas');
     canvas.id = canvasId;
     canvas.className = 'ply-canvas';
-    // REMOVE width/height style: PlayCanvas handles with fillWindow mode
-    canvas.removeAttribute('style'); // very important on iOS
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
     canvas.setAttribute('tabindex', '0');
+    viewerContainer.insertBefore(canvas, progressDialog);
+
+    // Apply background color from config if present
     canvas.style.background = canvasBg;
+
     canvas.style.touchAction = "none";
     canvas.style.webkitTouchCallout = "none";
-    // Passive listeners for iOS: always passive false if calling preventDefault
-    canvas.addEventListener('gesturestart', e => e.preventDefault(), { passive: false });
-    canvas.addEventListener('gesturechange', e => e.preventDefault(), { passive: false });
-    canvas.addEventListener('gestureend', e => e.preventDefault(), { passive: false });
-    canvas.addEventListener('dblclick', e => e.preventDefault(), { passive: false });
+    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 });
-    // Mouse wheel suppression
-    canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
-    viewerContainer.insertBefore(canvas, progressDialog);
+
+    // --- Mouse wheel suppression
+    canvas.addEventListener('wheel', (e) => {
+      e.preventDefault(); // Only block page scroll if mouse is over viewer
+    }, { passive: false });
 
     if (progressDialog) progressDialog.style.display = 'block';
 
-    // ---- Load PlayCanvas ----
+    alert("Canvas created. Loading PlayCanvas...");
+
     if (!pc) {
       pc = await import("https://cdn.jsdelivr.net/npm/playcanvas@latest/+esm");
       window.pc = pc;
+      alert("PlayCanvas imported.");
     }
 
-    // ---- Create Graphics Device and App ----
+    // Create app and graphics device
     let device;
     try {
-      // Robust: force pixel ratio to 1 on mobile to avoid Safari VRAM crash!
       device = await pc.createGraphicsDevice(canvas, {
-        deviceTypes: ["webgl2", "webgl1"], // Try WebGL2, fallback to WebGL1
+        deviceTypes: ["webgl2", "webgl1"],
         glslangUrl: "https://mikafil-viewer-sgos.static.hf.space/static/lib/glslang/glslang.js",
         twgslUrl:   "https://mikafil-viewer-sgos.static.hf.space/static/lib/twgsl/twgsl.js",
-        antialias: false // Must be false for splats, memory safety
+        antialias: false
       });
-      device.maxPixelRatio = isMobile ? 1 : Math.min(window.devicePixelRatio, 2); // <-- CRUCIAL!
+      device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+      alert("Graphics device created.");
     } catch (e) {
-      console.error("Graphics device error: " + e);
+      alert("Graphics device error: " + e);
       throw e;
     }
 
-    // --- APP OPTIONS: input target fix ---
     const opts = new pc.AppOptions();
     opts.graphicsDevice = device;
-    opts.mouse = new pc.Mouse(document.body);   // <--- NOTE: document.body, not canvas!
-    opts.touch = new pc.TouchDevice(document.body); // <--- document.body, matches PlayCanvas example
+    opts.mouse = new pc.Mouse(canvas);
+    opts.touch = new pc.TouchDevice(canvas);
     opts.componentSystems = [
       pc.RenderComponentSystem,
       pc.CameraComponentSystem,
@@ -146,82 +150,63 @@ export async function initializeViewer(config, instanceId) {
       pc.GSplatHandler
     ];
 
-    // The PlayCanvas Vercel demo uses AppBase, but we can keep using Application
     app = new pc.Application(canvas, opts);
-
-    // ---- iOS/Fill Mode handling ----
-    if (isIOS) {
-      app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW); // always fill window on iOS
-    } else {
-      app.setCanvasFillMode(pc.FILLMODE_NONE); // your original behavior for desktop/Android
-    }
+    app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    // ---- Resize Handling ----
-    // iOS: Always fill window. Desktop: use div resizeObserver.
-    if (isIOS) {
-      // Remove manual style sizes on the canvas
-      canvas.style.width = "";
-      canvas.style.height = "";
-      // Fill window
-      const resizeCanvasToWindow = () => {
-        app.resizeCanvas(window.innerWidth, window.innerHeight);
-      };
-      window.addEventListener('resize', resizeCanvasToWindow);
-      app.on('destroy', () => {
-        window.removeEventListener('resize', resizeCanvasToWindow);
-      });
-      resizeCanvasToWindow();
-    } else {
-      // Desktop: use ResizeObserver on the container div
-      resizeObserver = new ResizeObserver(entries => {
-        entries.forEach(entry => {
-          try {
-            app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
-          } catch (e) { console.error("resizeCanvas error: " + e); }
-        });
-      });
-      resizeObserver.observe(viewerContainer);
+    alert("App created.");
 
-      window.addEventListener('resize', () => {
+    // Resizing
+    resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
         try {
-          app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-        } catch (e) { console.error("resizeCanvas error: " + e); }
+          app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
+        } catch (e) { alert("resizeCanvas error: " + e); }
       });
-      app.on('destroy', () => resizeObserver.disconnect());
-    }
+    });
+    resizeObserver.observe(viewerContainer);
+
+    window.addEventListener('resize', () => {
+      try {
+        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+      } catch (e) { alert("resizeCanvas error: " + e); }
+    });
+    app.on('destroy', () => resizeObserver.disconnect());
 
-    // ---- Assets Setup ----
+    // Prepare asset loading (SOGS as 'gsplat')
     const assets = {
       sogs: new pc.Asset('gsplat', 'gsplat', { url: sogsUrl }),
       orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-sgos.static.hf.space/orbit-camera.js" }),
-      glb: glbUrl ? new pc.Asset('glb', 'container', { url: glbUrl }) : null,
+      glb: new pc.Asset('glb', 'container', { url: glbUrl }),
     };
-    for (const key in assets) if (assets[key]) app.assets.add(assets[key]);
+    for (const key in assets) app.assets.add(assets[key]);
+
+    // Individual asset error listeners
+    assets.sogs.on('error', (err) => { alert("SOGS asset error: " + err); });
+    assets.orbit.on('error', (err) => { alert("Orbit-camera.js asset error: " + err); });
+    if (assets.glb) assets.glb.on('error', (err) => { alert("GLB asset error: " + err); });
 
-    assets.sogs.on('error', (err) => { console.error("SOGS asset error: " + err); });
-    assets.orbit.on('error', (err) => { console.error("Orbit-camera.js asset error: " + err); });
-    if (assets.glb) assets.glb.on('error', (err) => { console.error("GLB asset error: " + err); });
+    assets.sogs.ready(() => { alert("SOGS asset ready."); });
+    assets.orbit.ready(() => { alert("orbit-camera.js asset ready."); });
+    if (assets.glb) assets.glb.ready(() => { alert("GLB asset ready."); });
 
-    // ---- Loader ----
-    const loader = new pc.AssetListLoader(
-      Object.values(assets).filter(Boolean),
-      app.assets
-    );
+    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
 
-    loader.on('error', (err) => { console.error("Asset loader error: " + err); });
+    loader.on('error', (err) => { alert("Asset loader error: " + err); });
 
     loader.load(() => {
+      alert("All assets loaded. Starting app...");
+
       try {
         app.start();
       } catch (e) {
-        console.error("app.start() error: " + e);
+        alert("app.start() error: " + e);
         throw e;
       }
 
       if (progressDialog) progressDialog.style.display = 'none';
 
-      // ---- Add SOGS Model ----
+      // Add SOGS model
       try {
         modelEntity = new pc.Entity('model');
         modelEntity.addComponent('gsplat', { asset: assets.sogs });
@@ -229,22 +214,24 @@ export async function initializeViewer(config, instanceId) {
         modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
         modelEntity.setLocalScale(modelScale, modelScale, modelScale);
         app.root.addChild(modelEntity);
+        alert("Model entity added!");
       } catch (e) {
-        console.error("Model entity error: " + e);
+        alert("Model entity error: " + e);
         throw e;
       }
 
-      // ---- Add GLB if provided ----
+      // Add the GLB entity if provided
       try {
         if (assets.glb && assets.glb.resource && assets.glb.resource.instantiateRenderEntity) {
           const glbEntity = assets.glb.resource.instantiateRenderEntity();
           app.root.addChild(glbEntity);
+          alert("GLB entity added.");
         }
       } catch (e) {
-        console.error("GLB entity error: " + e);
+        alert("GLB entity error: " + e);
       }
 
-      // ---- Camera Setup ----
+      // CAMERA
       try {
         cameraEntity = new pc.Entity('camera');
         // Support background color
@@ -257,7 +244,7 @@ export async function initializeViewer(config, instanceId) {
         cameraEntity.lookAt(modelEntity.getPosition());
         cameraEntity.addComponent('script');
 
-        // Orbit camera script attributes
+        // Pass all attributes to Orbit Camera script
         cameraEntity.script.create('orbitCamera', {
           attributes: {
             focusEntity: modelEntity,
@@ -275,23 +262,27 @@ export async function initializeViewer(config, instanceId) {
         cameraEntity.script.create('orbitCameraInputMouse');
         cameraEntity.script.create('orbitCameraInputTouch');
         app.root.addChild(cameraEntity);
+
+        alert("Camera added.");
       } catch (e) {
-        console.error("Camera error: " + e);
+        alert("Camera error: " + e);
       }
 
       try {
         app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+        alert("resizeCanvas called.");
       } catch (e) {
-        console.error("resizeCanvas error: " + e);
+        alert("resizeCanvas error: " + e);
       }
 
       try {
         app.once('update', () => resetViewerCamera());
+        alert("resetViewerCamera scheduled.");
       } catch (e) {
-        console.error("resetViewerCamera schedule error: " + e);
+        alert("resetViewerCamera schedule error: " + e);
       }
 
-      // ---- Tooltips (Optional) ----
+      // Tooltips support (optional)
       try {
         if (config.tooltips_url) {
           import('https://mikafil-viewer-sgos.static.hf.space/tooltips.js').then(tooltipsModule => {
@@ -303,33 +294,35 @@ export async function initializeViewer(config, instanceId) {
               defaultVisible: !!config.showTooltipsDefault,
               moveDuration: config.tooltipMoveDuration || 0.6
             });
-          }).catch(e => { console.error("Tooltips module error: " + e); });
+            alert("Tooltips loaded.");
+          }).catch(e => { alert("Tooltips module error: " + e); });
         }
       } catch (e) {
-        console.error("Tooltips try-catch error: " + e);
+        alert("Tooltips try-catch error: " + e);
       }
 
       viewerInitialized = true;
-      console.log("Viewer initialized success!");
+      alert("Viewer initialized success!");
     });
 
-    console.log("Asset loader started.");
+    alert("Asset loader started.");
   } catch (e) {
-    console.error("Main try-catch error: " + e);
+    alert("Main try-catch error: " + e);
     throw e;
   }
 }
 
 // Resets the viewer camera (as in your PLY example)
 export function resetViewerCamera() {
+  alert("resetViewerCamera called.");
   try {
     if (!cameraEntity || !modelEntity || !app) {
-      console.warn("resetViewerCamera: cameraEntity/modelEntity/app not ready");
+      alert("resetViewerCamera: cameraEntity/modelEntity/app not ready");
       return;
     }
     const orbitCam = cameraEntity.script.orbitCamera;
     if (!orbitCam) {
-      console.warn("resetViewerCamera: orbitCam missing");
+      alert("resetViewerCamera: orbitCam missing");
       return;
     }
 
@@ -368,7 +361,8 @@ export function resetViewerCamera() {
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
+    alert("resetViewerCamera: success");
   } catch (e) {
-    console.error("resetViewerCamera: error: " + e);
+    alert("resetViewerCamera: error: " + e);
   }
 }