How to Implement a 3D Crystal Sphere Based on Three.js and HTML5 Canvas

How to Implement a 3D Crystal Sphere Based on Three.js and HTML5 Canvas: BY Jason13 Nov,2020; Tags:
HTML5 Animation 3D Animation HTML5 Canvas Three.js

Introduction

Today I will share with you a cool HTML5 Canvas 3D animation, which is also an animation special effect based on Three.js. On Canvas, there is a sphere composed of many crystal cylinders of different lengths. We can also drag the sphere with the mouse to observe the sphere from different angles, and use the mouse wheel to zoom the sphere. Another feature is that double-clicking on the spherical surface can change the color of the crystal surface, and at the same time, the crystal surface will appear bright with the angle of rotation, which highlights its 3D stereoscopic visual effect.

How to Implement a 3D Crystal Sphere Based on Three.js and HTML5 Canvas

Instructions

Css Code

html,body{
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#info{
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgba(80,80,80,0.7);
  color: #fff;
  padding: 8px;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
}
#info:hover{
  cursor: default;
}

Js Code

var container, stats, camera, controls, scene, renderer, cross;

cols = [
  [0x00bfff, 0x444444, 0xffffff, 0x00ffe9],
  [0xf4ce42, 0xffec1c, 0x84ff2b, 0x2affc6],
  [0xc4316e, 0x7c025a, 0xa40ace, 0x6d26c9],
  [0xff2e00, 0xe56b00, 0xffae00, 0x2d1000],
  [0xf2999b, 0xd54d87, 0x7b2a95, 0x461865],
  [0xc5e2f6, 0x86e7e1, 0xfcb5bb, 0xfac6ff],
  [0xF44336, 0x1E88E5, 0xFDD835, 0xffffff]
];
specs = [
  [0x94e2fc, 0x666666, 0xffffff, 0xa3fff7],
  [0xf9e69f, 0xfcf6b3, 0xd1fcb2, 0xb5ffeb],
  [0xc6658d, 0xaf3f90, 0xbe5fd8, 0xbf8eff],
  [0xff9077, 0xf7a45b, 0xffcc60, 0x2d211b],
  [0xffbfc0, 0xce7da0, 0xb780c9, 0x755689],
  [0xdeeef9, 0xaef2ee, 0xf7c5ca, 0xf6d4f9],
  [0xF44336, 0x1E88E5, 0xFDD835, 0xffffff]
];
alpha = [
  [0.8, 1.0, 0.3, 0.7],
  [0.5, 0.4, 0.6, 0.7],
  [0.4, 0.6, 0.8, 0.9],
  [0.8, 0.7, 0.4, 1.0],
  [0.4, 0.6, 0.8, 1.0],
  [0.7, 0.5, 0.6, 0.7],
  [0.6, 0.6, 0.6, 0.4]
];

count = 200;
offmax = 50;
offmin = -50;
xWi = 10; nWi = 2;
xLe = 10; nLe = 2;
colRow = 0;

init();
animate();

VIEW NOW