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

BY Jason 13 Nov,2020

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.