Update viewer.js

viewer.js

@@ -85,16 +85,17 @@ export async function initializeViewer(config, instanceId) {
     const canvas = document.createElement('canvas');
     canvas.id = canvasId;
     canvas.className = 'ply-canvas';
-    canvas.style.width = "100%";
-    canvas.style.height = "100%";
+    // REMOVE width/height style: PlayCanvas handles with fillWindow mode
+    canvas.removeAttribute('style'); // very important on iOS
     canvas.setAttribute('tabindex', '0');
     canvas.style.background = canvasBg;
     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());
+    // 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('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
     // Mouse wheel suppression
     canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
@@ -124,10 +125,11 @@ export async function initializeViewer(config, instanceId) {
       throw e;
     }
 
+    // --- APP OPTIONS: input target fix ---
     const opts = new pc.AppOptions();
     opts.graphicsDevice = device;
-    opts.mouse = new pc.Mouse(canvas);
-    opts.touch = new pc.TouchDevice(canvas);
+    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.componentSystems = [
       pc.RenderComponentSystem,
       pc.CameraComponentSystem,
@@ -144,26 +146,50 @@ 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);
-    app.setCanvasFillMode(pc.FILLMODE_NONE);
+
+    // ---- 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.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    // ---- Resize Observer ----
-    resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
+    // ---- 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);
+
+      window.addEventListener('resize', () => {
         try {
-          app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
+          app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
         } catch (e) { console.error("resizeCanvas error: " + e); }
       });
-    });
-    resizeObserver.observe(viewerContainer);
-
-    window.addEventListener('resize', () => {
-      try {
-        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-      } catch (e) { console.error("resizeCanvas error: " + e); }
-    });
-    app.on('destroy', () => resizeObserver.disconnect());
+      app.on('destroy', () => resizeObserver.disconnect());
+    }
 
     // ---- Assets Setup ----
     const assets = {