Menu

Post image 1
Post image 2
Post image 3
Post image 4
Post image 5
Post image 6
Post image 7
Post image 8
1 / 8
0

Building an Interactive Wave Propagation Cube Grid with Three.js | Codrops

Codrops·Franky Hung·2 months ago
#kxq7PTQ3
Reading 0:00
15s threshold

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!…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More