Hi, this is Franky Hung. I’m a creative frontend developer from Hong Kong. In this tutorial, we’re going to build a minimalistic yet mesmerizing 3D wave grid background!

One day, I was scrolling on Pinterest looking for inspirations and I stumbled upon a very cool animation showcasing waves propagating across a grid of cubes with realistic shadows. I thought to myself, “that doesn’t seem too hard to recreate in Three.js, why not consider it a small challenge?”

Before diving right into the details, here’s a quick breakdown of this tutorial:

Project structure

Setting up the stage

Implementing the mouse trail

Propagate waves from the mouse trail

Postprocessing magic

Production-ready optimizations

Customize your wave grid!

Let’s get started!

Project Structure

root ├── src | ├── ThreeJS | | ├── Camera.js | | ├── Orchestrator.js | | ├── Renderer.js | | ├── Stage.js | | ├── Effects | | | ├── MouseTrail.js | | | └── VignetteRGBShiftShader.js | | └── Utils | | ├── Debug.js | | └── Sizes.js | ├──…