I'm really impressed by the interactive 3D graphics on the Waking Life festival website. It seems to use Three.js (I noticed it mentions "three.js r160" in the canvas) and has some amazing mouse interactions and animations. I've discovered that the site is built with Next.js, and while I can see the Three.js element, the JavaScript files are all minified, which makes it hard to decipher their code. I'm specifically looking for details on the actual Three.js implementation, how they manage mouse and pointer interactions, and insights into their 3D scene setup. I've tried using browser DevTools, but it hasn't helped much because of the minification. If anyone has found ways to reverse-engineer this or knows the developers, I'd greatly appreciate any guidance!
1 Answer
That site is stunning! From what I can gather, it's definitely built using Next.js along with a Three.js r160 canvas. To achieve those interactions, they likely use a raycaster combined with mouse position tracking, along with some smooth transitions for that nice fluidity. The minified files make it tricky to read, but if you prettify those files and look for keywords like `THREE.` or `raycaster`, you might find the core interaction code. Recreating the basic elements yourself might be the best learning approach—think of setting up a simple Three.js scene with a perspective camera and implementing raycasting for hover effects, plus using something like GSAP for smooth transitions. That should give you a solid start without needing to reverse-engineer everything!
Isn't it just beautiful? I totally agree, building from scratch sounds like a great way to learn. I'll definitely give it a try, even if I have to code a bit by feel since I'm a beginner.