Update viewer.js

viewer.js

@@ -1,111 +1,122 @@
 let pc;
 export let app = null;
+let cameraEntity = null;
+let bouchonEntity = null;
+let viewerInitialized = false;
+let resizeObserver = null;
 
 export async function initializeViewer(config, instanceId) {
-    if (app) return;
-
-    const glbUrl = config.glb_url;
-    const envAtlasUrl = config.envAtlas_url || "https://playcanvas.github.io/static/assets/cubemaps/helipad-env-atlas.png"; // Default PlayCanvas envAtlas
-
-    const viewerContainer = document.getElementById('viewer-container-' + instanceId);
-
-    let oldCanvas = document.getElementById('canvas-' + instanceId);
-    if (oldCanvas) oldCanvas.remove();
-
-    const canvas = document.createElement('canvas');
-    canvas.id = 'canvas-' + instanceId;
-    canvas.style.width = "100%";
-    canvas.style.height = "100%";
-    viewerContainer.appendChild(canvas);
-
-    if (!pc) {
-        pc = await import("https://esm.run/playcanvas");
-        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"
+  if (viewerInitialized) return;
+
+  const glbUrl3 = config.glb_url_3;
+  const envAtlasUrl = "https://playcanvas.github.io/static/assets/cubemaps/helipad-env-atlas.png"; // official PlayCanvas env
+
+  const canvasId = 'canvas-' + instanceId;
+  const viewerContainer = document.getElementById('viewer-container-' + instanceId);
+
+  let oldCanvas = document.getElementById(canvasId);
+  if (oldCanvas) oldCanvas.remove();
+
+  const canvas = document.createElement('canvas');
+  canvas.id = canvasId;
+  canvas.className = 'ply-canvas';
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  viewerContainer.appendChild(canvas);
+
+  if (!pc) {
+    pc = await import("https://esm.run/playcanvas");
+    window.pc = pc;
+  }
+
+  // Create app first
+  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(canvas);
+  opts.touch = new pc.TouchDevice(canvas);
+  opts.componentSystems = [
+    pc.RenderComponentSystem,
+    pc.CameraComponentSystem,
+    pc.LightComponentSystem,
+    pc.ScriptComponentSystem
+  ];
+  opts.resourceHandlers = [
+    pc.TextureHandler,
+    pc.ContainerHandler,
+    pc.ScriptHandler
+  ];
+
+  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);
     });
-
-    device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-
-    const opts = new pc.AppOptions();
-    opts.graphicsDevice = device;
-    opts.mouse = new pc.Mouse(canvas);
-    opts.touch = new pc.TouchDevice(canvas);
-    opts.componentSystems = [
-        pc.RenderComponentSystem,
-        pc.CameraComponentSystem,
-        pc.LightComponentSystem,
-        pc.ScriptComponentSystem
-    ];
-    opts.resourceHandlers = [
-        pc.TextureHandler,
-        pc.ContainerHandler,
-        pc.ScriptHandler
-    ];
-
-    app = new pc.Application(canvas, opts);
-    app.setCanvasFillMode(pc.FILLMODE_NONE);
-    app.setCanvasResolution(pc.RESOLUTION_AUTO);
-
-    // Set up assets (GLB and envAtlas)
-    const glbAsset = new pc.Asset('model', 'container', { url: glbUrl });
-    const envAtlasAsset = new pc.Asset('helipad-env-atlas', 'texture', { url: envAtlasUrl }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false });
-
-    app.assets.add(glbAsset);
-    app.assets.add(envAtlasAsset);
-
-    // KHR extensions (usually not necessary, but included for completeness)
-    const containerHandler = app.loader.getHandler('container');
-    if (containerHandler) {
-        containerHandler.pcMaterialOptions = {
-            processTransmission: true,
-            processVolume: true,
-            processIOR: true,
-            processSheen: true,
-            processClearCoat: true,
-            processVariants: true
-        };
-    }
-
-    // Load both assets before continuing
-    const loader = new pc.AssetListLoader([glbAsset, envAtlasAsset], app.assets);
-    loader.load(() => {
-        // Environment map
-        app.scene.envAtlas = envAtlasAsset.resource;
-        app.scene.skyboxMip = 1;
-        app.scene.skyboxIntensity = 1.8;
-        app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, 70, 0);
-
-        // Add model
-        const entity = glbAsset.resource.instantiateRenderEntity();
-        app.root.addChild(entity);
-
-        // Add a camera
-        const camera = new pc.Entity('camera');
-        camera.addComponent('camera', { clearColor: new pc.Color(0.93, 0.93, 0.93, 1) });
-        camera.setPosition(0, 1, 6);
-        camera.lookAt(0, 0.5, 0);
-        app.root.addChild(camera);
-
-        // Add a light (for diffuse shading)
-        const light = new pc.Entity('mainLight');
-        light.addComponent('light', {
-            type: "directional",
-            color: new pc.Color(1, 1, 1),
-            intensity: 1.1
-        });
-        light.setPosition(0, 2, 2);
-        light.lookAt(0, 0, 0);
-        app.root.addChild(light);
-
-        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-        window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
+  });
+  resizeObserver.observe(viewerContainer);
+
+  window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
+  app.on('destroy', () => resizeObserver.disconnect());
+
+  // --- ASSETS
+  const assets = {
+    bouchon: new pc.Asset('bouchon', 'container', {url: glbUrl3}),
+    helipad: new pc.Asset(
+      'helipad-env-atlas',
+      'texture',
+      { url: envAtlasUrl },
+      { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
+    )
+  };
+  for (const key in assets) app.assets.add(assets[key]);
+
+  const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+  loader.load(() => {
+    app.start();
+
+    // --- Instantiate GLB as-is (NO material changes)
+    bouchonEntity = assets.bouchon.resource.instantiateRenderEntity();
+    bouchonEntity.setLocalPosition(0, 0, 0);
+    bouchonEntity.setLocalScale(1, 1, 1);
+    app.root.addChild(bouchonEntity);
+
+    // --- Camera
+    cameraEntity = new pc.Entity('camera');
+    cameraEntity.addComponent('camera', { clearColor: new pc.Color(0.95, 0.95, 0.95, 1) });
+    cameraEntity.setPosition(0, 1, 5.5);
+    cameraEntity.lookAt(0, 0.5, 0);
+    app.root.addChild(cameraEntity);
+
+    // --- Directional light
+    const light = new pc.Entity("mainLight");
+    light.addComponent('light',{
+      type: "directional",
+      color: new pc.Color(1, 1, 1),
+      intensity:1.5,
+      castShadows: false
     });
+    light.setPosition(1, 3, 2);
+    light.lookAt(0, 0, 0);
+    app.root.addChild(light);
+
+    // --- HDR environment/skybox
+    app.scene.envAtlas = assets.helipad.resource;
+    app.scene.skyboxMip = 1;
+    app.scene.skyboxIntensity = 2.0;
+    app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, 70, 0);
+
+    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
 
-    app.assets.load(glbAsset);
-    app.assets.load(envAtlasAsset);
+    viewerInitialized = true;
+  });
 }