How to implement HTML5 Canvas 3D beating Loading loading animation

How to implement HTML5 Canvas 3D beating Loading loading animation: BY Gerald23 Nov,2020; Tags:
HTML5 Canvas Loading Animation

Introduction

What I want to share this time is a 3D jumping Loading animation based on HTML5 Canvas. Another feature of it is that it can dynamically adjust the animation parameters.

Instructions

Css Code

body {
  background: #6a2bff;
  color: #fff;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

canvas {
  width: 100%;
  height: 100%;
}

Js Code

var backgroundGUI = this.gui.addFolder('Background');
      backgroundGUI.addColor(this, 'backgroundColor').onChange(function (color) {
        document.body.style.backgroundColor = color;
      });

      var obj = {
        color: '#ffffff',
        emissive: '#e07cff',
        reflectivity: 1,
        metalness: .2,
        roughness: 0 };


      var material = new THREE.MeshPhysicalMaterial(obj);
      var geometry = new THREE.SphereGeometry(.5, 32, 32);

      var tileTop = { color: '#fa3fce' };
      var tileTopMaterial = new THREE.MeshBasicMaterial(tileTop);

      var tileInside = { color: '#671c87' };
      var tileInsideMaterial = new THREE.MeshBasicMaterial(tileInside);

      var materials = [tileTopMaterial, tileInsideMaterial];
      var props = {
        steps: 1,
        depth: 1,
        bevelEnabled: false };

VIEW NOW