HTML5 Canvas 3D Celestial Body Running Animation

HTML5 Canvas 3D Celestial Body Running Animation: BY Kenneth12 Jan,2021; Tags:
HTML5 3D HTML5 Canvas

Introduction

Today we want to share with you a 3D planet celestial running animation based on HTML5 Canvas, here we draw a larger planet on Canvas canvas, then there is a small circle of meteorite area around the large planet, these meteorites will be rotating around the planet, and with the black background with a very strong 3D visual effect.

HTML5 Canvas 3D Celestial Body Running Animation

Instructions

HTML Body Code

for (var p = 0; p < Math.PI * 2; p = p + Math.random() * 0.15) {
  var asteroid = new THREE.Mesh(
    new THREE.IcosahedronGeometry(8, 0),
    material
  );

  var size = Math.random() * 0.5;
  for (var i = 0; i < asteroid.geometry.vertices.length; i++)
    asteroid.geometry.vertices[i].multiplyScalar(
      Math.random() * 0.5 + size
    );

  rand = Math.random() * 60 - 30;
  asteroid.position.set(200 * Math.sin(p) + rand, rand, 200 * Math.cos(p) + rand);

  asteroid.geometry.computeFlatVertexNormals();
  asteroids.add(asteroid);
}

Css Code

* {
  margin: 0;
  padding: 0;
  outline: 0;
}
html, body {
  width: 100%;
  height: 100%;
  background:#000;
}
#container {
  width: 100%;
  height: 100%;
}

VIEW NOW