<div id="canvasContainer">
  <canvas id="mcanvas"></canvas>
</div>

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
}

#mcanvas {
  width: 100%;
  height: 100%;
  z-index: -1;
}
#canvasContainer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 5;
}

import {
  ViewerApp,
  addBasePlugins, 
} from "https://dist.pixotronics.com/webgi/runtime/bundle-0.9.2.mjs";

async function setupViewer() {
  // Initialize the viewer
  const viewer = new ViewerApp({
    canvas: document.getElementById("mcanvas"),
    useGBufferDepth: false,
  });

  // Add all the plugins at once
  await addBasePlugins(viewer);

  // Load a 3d model.
  const model = await viewer.load("https://demo-assets.pixotronics.com/pixo/gltf/earringScene2.glb");

  // Load an environment map (not needed with this model)
  // await viewer.setEnvironmentMap("https://dist.pixotronics.com/webgi/assets/hdr/gem_2.hdr");
  
}

setupViewer();