Update viewer.js

viewer.js

@@ -1,7 +1,6 @@
 // viewer.js
 // ==============================
 
-let pc;
 export let app = null;
 let cameraEntity = null;
 let modelEntity = null;
@@ -14,10 +13,9 @@ let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRot
 let sogsUrl, glbUrl, canvasBg;
 
 function getDeviceTypes() {
-    // From PlayCanvas example
     const ua = navigator.userAgent;
     if (/iPad|iPhone|iPod/.test(ua) || (ua.includes("Macintosh") && "ontouchend" in document)) {
-        return ['webgl2', 'webgl1']; // On iOS, sometimes WebGL2 fails, fallback to WebGL1
+        return ['webgl2', 'webgl1']; // Try both on iOS
     }
     return ['webgl2', 'webgl1'];
 }
@@ -64,7 +62,6 @@ export async function initializeViewer(config, instanceId) {
 
         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);
@@ -78,10 +75,7 @@ export async function initializeViewer(config, instanceId) {
         canvas.setAttribute('tabindex', '0');
         viewerContainer.insertBefore(canvas, progressDialog);
 
-        // Apply background color from config if present
         canvas.style.background = canvasBg;
-
-        // iOS quirks: allow all gestures, prevent double tap zoom etc.
         canvas.style.touchAction = "none";
         canvas.style.webkitTouchCallout = "none";
         canvas.addEventListener('gesturestart', e => e.preventDefault());
@@ -89,23 +83,19 @@ 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 });
-
-        // Mouse wheel suppression
-        canvas.addEventListener('wheel', (e) => {
-            e.preventDefault();
-        }, { passive: false });
+        canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
 
         progressDialog.style.display = 'block';
         alert("Canvas created. Loading PlayCanvas...");
 
-        if (!pc) {
-            // USE JSDELIVR CDN! THIS IS WHAT THE PLAYCANVAS SOGS DEMO USES!
-            pc = await import("https://cdn.jsdelivr.net/npm/playcanvas@2.8.0/+esm");
-            window.pc = pc;
-        }
+        // 1. Import PlayCanvas
+        const pcMod = await import("https://cdn.jsdelivr.net/npm/playcanvas@2.8.0/+esm");
         alert("PlayCanvas imported.");
+        window.pc = pcMod; // ensures global for script-based scripts
+        // 2. Now all use window.pc from here
+        const pc = window.pc;
 
-        // Device type logic for iOS fallback
+        // 3. Graphics Device
         const gfxOptions = {
             deviceTypes: getDeviceTypes(),
             glslangUrl: "https://mikafil-viewer-sgos.static.hf.space/static/lib/glslang/glslang.js",
@@ -116,47 +106,43 @@ export async function initializeViewer(config, instanceId) {
         device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
         alert("Graphics device created.");
 
-        // Use AppBase (as example) instead of Application
-        app = new pc.AppBase(canvas);
-        // Use PlayCanvas-style AppOptions
-        const createOptions = new pc.AppOptions();
-        createOptions.graphicsDevice = device;
-        createOptions.mouse = new pc.Mouse(document.body); // this is crucial for iOS
-        createOptions.touch = new pc.TouchDevice(document.body);
-        createOptions.componentSystems = [
-            pc.RenderComponentSystem,
-            pc.CameraComponentSystem,
-            pc.LightComponentSystem,
-            pc.ScriptComponentSystem,
-            pc.GSplatComponentSystem,
-            pc.CollisionComponentSystem,
-            pc.RigidbodyComponentSystem
-        ];
-        createOptions.resourceHandlers = [
-            pc.TextureHandler,
-            pc.ContainerHandler,
-            pc.ScriptHandler,
-            pc.GSplatHandler
-        ];
-
-        app.init(createOptions);
+        // 4. App creation (Application, not AppBase for max compatibility)
+        app = new pc.Application(canvas, {
+            graphicsDevice: device,
+            mouse: new pc.Mouse(canvas),
+            touch: new pc.TouchDevice(canvas),
+            componentSystems: [
+                pc.RenderComponentSystem,
+                pc.CameraComponentSystem,
+                pc.LightComponentSystem,
+                pc.ScriptComponentSystem,
+                pc.GSplatComponentSystem,
+                pc.CollisionComponentSystem,
+                pc.RigidbodyComponentSystem
+            ],
+            resourceHandlers: [
+                pc.TextureHandler,
+                pc.ContainerHandler,
+                pc.ScriptHandler,
+                pc.GSplatHandler
+            ]
+        });
         alert("App created.");
 
-        // Fill mode and resize logic
         app.setCanvasFillMode(pc.FILLMODE_NONE);
         app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
+        // Resize observer logic
         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());
 
-        // Prepare asset loading (SOGS as 'gsplat')
+        // Asset loading
         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" }),
@@ -169,8 +155,6 @@ export async function initializeViewer(config, instanceId) {
 
         assetListLoader.load(() => {
             alert("Asset loader started.");
-
-            // SOGS
             if (!assets.sogs.resource) {
                 alert("SOGS asset failed to load.");
                 return;
@@ -182,14 +166,12 @@ export async function initializeViewer(config, instanceId) {
             modelEntity.setLocalScale(modelScale, modelScale, modelScale);
             app.root.addChild(modelEntity);
 
-            // Orbit camera
             if (!assets.orbit.resource) {
                 alert("orbit-camera.js asset failed to load!");
                 return;
             }
             alert("orbit-camera.js asset ready.");
 
-            // GLB
             if (assets.glb && assets.glb.resource && assets.glb.resource.instantiateRenderEntity) {
                 const glbEntity = assets.glb.resource.instantiateRenderEntity();
                 app.root.addChild(glbEntity);
@@ -198,7 +180,6 @@ export async function initializeViewer(config, instanceId) {
                 alert("GLB not provided or failed to load.");
             }
 
-            // CAMERA entity
             cameraEntity = new pc.Entity('camera');
             // Parse and apply background color
             let bg = [1, 1, 1, 1];
@@ -272,8 +253,6 @@ export async function initializeViewer(config, instanceId) {
     }
 }
 
-
-// Resets the viewer camera (as in your PLY example)
 export function resetViewerCamera() {
     try {
         if (!cameraEntity || !modelEntity || !app) return;
@@ -281,12 +260,12 @@ export function resetViewerCamera() {
         if (!orbitCam) return;
 
         const modelPos = modelEntity.getPosition();
-        const tempEnt = new pc.Entity();
+        const tempEnt = new window.pc.Entity();
         tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
         tempEnt.lookAt(modelPos);
 
-        const dist = new pc.Vec3().sub2(
-            new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
+        const dist = new window.pc.Vec3().sub2(
+            new window.pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
             modelPos
         ).length();
 
@@ -298,15 +277,15 @@ export function resetViewerCamera() {
         orbitCam._distance       = dist;
 
         const rot = tempEnt.getRotation();
-        const fwd = new pc.Vec3();
-        rot.transformVector(pc.Vec3.FORWARD, fwd);
-
-        const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG;
-        const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
-        const rotNoYaw = new pc.Quat().mul2(yawQuat, rot);
-        const fNoYaw = new pc.Vec3();
-        rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
-        const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
+        const fwd = new window.pc.Vec3();
+        rot.transformVector(window.pc.Vec3.FORWARD, fwd);
+
+        const yaw = Math.atan2(-fwd.x, -fwd.z) * window.pc.math.RAD_TO_DEG;
+        const yawQuat = new window.pc.Quat().setFromEulerAngles(0, -yaw, 0);
+        const rotNoYaw = new window.pc.Quat().mul2(yawQuat, rot);
+        const fNoYaw = new window.pc.Vec3();
+        rotNoYaw.transformVector(window.pc.Vec3.FORWARD, fNoYaw);
+        const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * window.pc.math.RAD_TO_DEG;
 
         orbitCam._targetYaw   = yaw;
         orbitCam._yaw         = yaw;