<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, 
  GLTFAnimationPlugin,

  addBasePlugins,
  timeout,
} 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)
  const gltfAnim = viewer.getPlugin(GLTFAnimationPlugin)

  viewer.renderer.refreshPipeline()

  await viewer.load("https://dist.pixotronics.com/webgi/assets/gltf/gltf_animation_sample.glb")

  await timeout(1000) // wait 1 sec
  
  gltfAnim.animationSpeed = 1.
  gltfAnim.loopAnimations = false
  
  await gltfAnim.playAnimation() // Play all animations and for them to finish

  console.log(gltfAnim.animations[0].clips.map(c=>c.name)) // Print all Clip names
  
  

  gltfAnim.loopAnimations = false
  gltfAnim.animationSpeed = 2.
  
  await gltfAnim.playClips(['Ico', 'Torus', 'Cube']) // play multiple and wait for all animations to finish
    
  gltfAnim.animationSpeed = 1.
  await gltfAnim.playClip('Torus') // play a single animation
  
  gltfAnim.loopAnimations = true
  gltfAnim.loopRepetitions = 2 // Default = Infinity
  gltfAnim.animationSpeed = 3.
  
  await gltfAnim.playClip('Cube') // wait for animation to finish
    
  gltfAnim.loopAnimations = true
  gltfAnim.loopRepetitions = Infinity

  await gltfAnim.playAnimation() // Play all animations indefinitely

  await timeout(5000) // wait 5 secs

  gltfAnim.stopAnimation() // Stops all animations
  
  
}

setupViewer()