Three.js – Repetition
Make a sketch with a lot of repetition, more than you want to hand-code. Can you make your sketch responsive to mouse behavior or key presses?
Ideas & Process
I wanted to use this weeks project to experiment with react-three-fiber, a library that lets you build three.js projects declaratively with re-usable, self-contained components. Their documentation got me started with a pair of slowly spinning cubes. With a couple of loops, I was able to create a screen of cubes. This screen of cubes could then be used to render text.
My lovely wife, Raven, had the idea to build something representing the embodying the quote oft misattributed to Einstein: "Insanity is doing the same thing over and over again and expecting different results."
This gave me the idea to create a game whereby the users actions often did nothing...until they suddenly did. I really liked the parallel between the users repeated actions and the repetition of the cubes.
Once the text has been revealed, I wanted to interpolate between the two states so the change from small to large cubes wasn’t so sudden. One of my favorite animation libraries
react-spring, has support for
three.js built in. After reacclimating to the library, I was able to get some really neat results.
I really wanted the pointed light to follow the users mouse but kept running into performance issues. I learned quickly that you never want to tie any animations to react state in
three.js. You end up re-rendering way more than you need or intended causing everything to come to a crawl. This is discussed in depth in the
react-three-fiber performance pitfalls documentation.
I learned a lot about
three.js and performance. In the next assignment, I’d like to experiment more with moving the camera and loading external resources for objects.