Lab ·
A grid of cubes in three.js
A 3D grid of cubes in three.js that grows, shrinks and gets bent by a parametric function.
In early 2019 I was messing around with three.js and wanted to see what a plain 3D grid of cubes could do. It turned into a couple of small experiments, so they live together here.
The grid
Every cube sits on a point in a 3D grid and scales up and back down with a delay that depends on how far along the grid's diagonal it is. A bit of randomness on the delay keeps the wave from looking too clean. The camera is orthographic, which is why everything looks flat and isometric instead of in perspective.
Because I kept tweaking numbers, I wired up dat.GUI sliders for the gutter, maximum scale, delay randomness and cube size, and saved the state to localStorage so a good setting survived a reload. The orbit controls write to the same state.
Demo: A grid of cubes in three.js Github: JoostKiens/threejs-cubicles
Bending it with a vertex shader
Next I pushed the grid through a parametric curve, x = 5 cos t, y = 5 sin t, z = 5 cos 3t, in a vertex shader. A few thousand tiny cubes peel off the block and drift along the curve.
How I made the videos
The sketch runs on canvas-sketch. Press cmd+shift+s and it saves a PNG for every frame, 75 per loop. One ffmpeg command stitches them into an mp4 that loops 8 times. That's how the clips above were made.