Update viewer.js

viewer.js

@@ -1,7 +1,7 @@
 // viewer.js
 // ==============================
 
-let pc;            
+let pc;
 export let app = null;
 let cameraEntity = null;
 let modelEntity = null;
@@ -13,6 +13,60 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let sogsUrl, glbUrl;
 
+// --- Log user agent and page location ---
+console.log("%c[VIEWER DEBUG] User Agent:", "color: #0074D9;", navigator.userAgent);
+console.log("%c[VIEWER DEBUG] Page:", "color: #0074D9;", location.href);
+
+// --- Monkeypatch Image to log src and crossOrigin ---
+(function() {
+  const OriginalImage = window.Image;
+  window.Image = function(...args) {
+    const img = new OriginalImage(...args);
+    const origSetAttribute = img.setAttribute;
+    img.setAttribute = function(name, value) {
+      if (name === "crossOrigin") {
+        console.log("%c[VIEWER DEBUG] setAttribute crossOrigin:", "color: orange;", value, img.src);
+      }
+      return origSetAttribute.apply(this, arguments);
+    };
+    Object.defineProperty(img, "src", {
+      set(value) {
+        console.log("%c[VIEWER DEBUG] Setting img.src:", "color: orange;", value, "crossOrigin:", img.crossOrigin);
+        origSetAttribute.call(img, "src", value);
+      }
+    });
+    img.onload = function() {
+      console.log("%c[VIEWER DEBUG] Image loaded:", "color: orange;", img.src, "crossOrigin:", img.crossOrigin);
+    };
+    img.onerror = function(e) {
+      console.error("%c[VIEWER DEBUG] Image load error:", "color: orange;", img.src, e);
+    };
+    return img;
+  };
+})();
+
+// --- Monkeypatch WebGL texImage2D for detailed logging ---
+(function() {
+  const orig = WebGLRenderingContext.prototype.texImage2D;
+  WebGLRenderingContext.prototype.texImage2D = function() {
+    try {
+      console.log("%c[VIEWER DEBUG] texImage2D called with:", "color: #FF4136;", arguments);
+      return orig.apply(this, arguments);
+    } catch (e) {
+      console.error("%c[VIEWER DEBUG] texImage2D ERROR:", "color: #FF4136;", e, arguments);
+      throw e;
+    }
+  };
+})();
+
+// --- Global error logging ---
+window.addEventListener("error", function(e) {
+  if (e.message && /insecure|taint|cross-origin/i.test(e.message)) {
+    alert("[VIEWER] WebGL/CORS error: " + e.message);
+    console.error("%c[VIEWER DEBUG] Global error:", "color: #FF4136;", e);
+  }
+});
+
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
 
@@ -72,11 +126,7 @@ export async function initializeViewer(config, instanceId) {
   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 });
+  canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
 
   progressDialog.style.display = 'block';
 
@@ -96,7 +146,6 @@ export async function initializeViewer(config, instanceId) {
 
   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 = [
@@ -136,20 +185,35 @@ export async function initializeViewer(config, instanceId) {
     glb: new pc.Asset('glb', 'container', { url: glbUrl }),
   };
 
-  console.log("Viewer.js: About to load assets:", assets);
-  Object.values(assets).forEach(asset => {
+  // --- LOG: asset list and all URLs
+  console.log("%c[VIEWER DEBUG] About to load assets:", "color: #39CCCC;", JSON.stringify(
+    Object.fromEntries(Object.entries(assets).map(([k, v]) => [k, v && v.url]))
+  , null, 2));
+  Object.entries(assets).forEach(([name, asset]) => {
     if (asset && asset.url) {
-      console.log(`[DEBUG] Asset "${asset.name}" loading from:`, asset.url);
+      console.log(`[VIEWER DEBUG] Asset "${name}" loading from: ${asset.url}`);
     }
   });
+
   for (const key in assets) app.assets.add(assets[key]);
 
+  // --- LOG: asset load or error events
+  Object.entries(assets).forEach(([name, asset]) => {
+    if (!asset) return;
+    asset.once('load', function(resource) {
+      console.log(`%c[VIEWER DEBUG] Asset loaded: "${name}"`, "color: #2ECC40;", asset.url, resource);
+    });
+    asset.once('error', function(err) {
+      console.error(`%c[VIEWER DEBUG] Asset failed to load: "${name}"`, "color: #FF4136;", asset.url, err);
+    });
+  });
+
   const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
   loader.load(() => {
+    console.log("%c[VIEWER DEBUG] All assets loaded, starting app", "color: #2ECC40;");
     app.start();
     progressDialog.style.display = 'none';
 
-    // Add PLY/GSplat model
     modelEntity = new pc.Entity('model');
     modelEntity.addComponent('gsplat', { asset: assets.sogs });
     modelEntity.setLocalPosition(modelX, modelY, modelZ);
@@ -157,20 +221,16 @@ export async function initializeViewer(config, instanceId) {
     modelEntity.setLocalScale(modelScale, modelScale, modelScale);
     app.root.addChild(modelEntity);
 
-    // --- Add the GLB entity ---
     if (assets.glb && assets.glb.resource && assets.glb.resource.instantiateRenderEntity) {
       const glbEntity = assets.glb.resource.instantiateRenderEntity();
       app.root.addChild(glbEntity);
     }
 
     cameraEntity = new pc.Entity('camera');
-    // PURE WHITE BACKGROUND
-    cameraEntity.addComponent('camera', { clearColor: new pc.Color(1, 1, 1, 1) }); // White RGBA
+    cameraEntity.addComponent('camera', { clearColor: new pc.Color(1, 1, 1, 1) });
     cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
     cameraEntity.lookAt(modelEntity.getPosition());
     cameraEntity.addComponent('script');
-
-    // === MAIN FIX: Pass ALL relevant attributes including minY ===
     cameraEntity.script.create('orbitCamera', {
       attributes: {
         focusEntity: modelEntity,
@@ -190,7 +250,6 @@ export async function initializeViewer(config, instanceId) {
     app.root.addChild(cameraEntity);
 
     app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-
     app.once('update', () => resetViewerCamera());
 
     // Tooltips supported if tooltips_url set
@@ -238,7 +297,7 @@ export function resetViewerCamera() {
 
     orbitCam.pivotPoint = modelPos.clone();
     orbitCam._targetDistance = dist;
-    orbitCam._distance       = dist;
+    orbitCam._distance = dist;
 
     const rot = tempEnt.getRotation();
     const fwd = new pc.Vec3();
@@ -251,14 +310,14 @@ export function resetViewerCamera() {
     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._targetYaw = yaw;
+    orbitCam._yaw = yaw;
     orbitCam._targetPitch = pitch;
-    orbitCam._pitch       = pitch;
+    orbitCam._pitch = pitch;
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
   } catch (e) {
-    // Silent fail
+    console.error("[VIEWER DEBUG] resetViewerCamera error", e);
   }
 }