Update viewer.js

viewer.js

@@ -80,58 +80,27 @@ export async function initializeViewer(config, instanceId) {
     window.pc = pc;
   }
 
-  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(document.body);
-  opts.touch = new pc.TouchDevice(document.body);
-  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);
-
-  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());
-
+  // --- ADD HDR ASSET ---
   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" }),
+    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 loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+  const loader = new pc.AssetListLoader(Object.values(assets), app ? app.assets : []);
   loader.load(() => {
     app.start();
     progressDialog.style.display = 'none';
 
+    // --- INITIALIZE HDR ENVIRONMENT ---
+    if (assets.hdr && assets.hdr.resource) {
+      app.scene.envAtlas = assets.hdr.resource;
+    }
+
     modelEntity = new pc.Entity('model');
     modelEntity.addComponent('gsplat', { asset: assets.model });
     modelEntity.setLocalPosition(modelX, modelY, modelZ);