ThreeJS Vectors from Image Spiritualized - LGM


This is one I've been waiting to do for a long time.

Coming from regular website development I havent had the skills needed to get into anything 3D. But, as the weeks have gone on I've learned a lot to get here.

The path has been:

How the effect works:

  1. Import a 300x300 image of the album cover into a 2D canvas element
  2. Create an array of each pixel in the image, recording x and y, and then record z as a decimal percentage of the average of the pixels RGB value / 255
  3. Create a 3D canvas element, pop the vertices into place

Improvements that could be made:

  • Camera controls
  • Lighting
  • Properly understand why x and y seem to be coming out sideways 🙈