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

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: "Inter", sans-serif !important;
}

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

// Check the Documentation and Manual Here: https://webgi.xyz/docs
const viewer = new CoreViewerApp({
  canvas: document.getElementById("mcanvas")
});

viewer
  .initialize({
    caching: true,
    ground: true,
    bloom: true,
    enableDrop: false
  })
  .then((viewer) => {
    /// Set the quality based on display
    viewer.renderManager.displayCanvasScaling = window.devicePixelRatio;

    const loadingScreen = viewer.getPlugin(LoadingScreenPlugin);
    loadingScreen.loadingTextHeader = "Loading Custom 3D Experience";
    loadingScreen.showFileNames = false;

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