<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, 
  ContactShadowGroundPlugin,
  PopmotionPlugin,
  VelocityBufferPlugin,
  
  addBasePlugins,
  timeout,
  EasingFunctions,
  Mesh,
  SphereGeometry, 
  MeshStandardMaterial,
} from "https://dist.pixotronics.com/webgi/runtime/bundle-0.9.20.mjs";

// Check the Documentation and Manual Here: https://webgi.xyz/docs

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

  await addBasePlugins(viewer, {
    ground: false,
    interactionPrompt: false,
  })
  const ground = await viewer.addPlugin(ContactShadowGroundPlugin) // adding this instead of normal GroundPlugin
  const popmotion = await viewer.addPlugin(PopmotionPlugin)
  
  // This enables Temporal Antialiasing for moving objects with a slight performance cost.
  viewer.getPlugin(VelocityBufferPlugin).enabled = true

  viewer.renderer.refreshPipeline()

  const env = "https://dist.pixotronics.com/webgi/assets/hdr/gem_2.hdr.png";
  await viewer.setEnvironmentMap(env);
  await timeout(1000) // wait 1 sec
  
  const obj = await viewer.createObject3D()
  obj.modelObject.name = 'sphere'
  const model = new Mesh(
      // new BoxBufferGeometry(1, 1, 1, 32, 32, 32),
      new SphereGeometry(1, 32, 32),
      new MeshStandardMaterial({color: 0xffffff, roughness: 0.5, metalness: 1})
    )
  obj.modelObject.add(model)
  
  // Check Popmotion docs for information about options: https://popmotion.io/#quick-start-animation-animate
  const anim1 = popmotion.animate({
    from: 0,
    to: 2*Math.PI,
    duration: 3000, // ms
    repeat: 3, // optional
    repeatType: "mirror", // optional
    ease: EasingFunctions.circOut, // optional, default = linear
    onUpdate: (v)=>{
      obj.modelObject.position.x = Math.sin(v);
      obj.modelObject.position.z = Math.cos(v);
      viewer.setDirty();
      // or 
      // obj.modelObject.setDirty();
      
      // console.log(v);
    }
  })
  
  // anim1.stop() // to stop animation before completion

  // wait for animation to finish/stopped
  await anim1.promise 
  console.log('Animation done');
  
  // Directly get the promise to await instead of animation instance
  // await popmotion.animateAsync({...options})
  
}

setupViewer()