Hello people.
This is my first week of trying anything 3D. I tried react-three-fiber, react-three-rapier and recreated this awesome effect from Next.js conference website. You can essentially drag and drop pictures onto the website and it turns them into the pixelated version rendered using 3D blocks. The blocks have physics and can be interacted with. It was quite challenging for me to make everything (mouse events, animations and physics) work on an instancedMesh.
My first version has N render calls because I was looping and rendering blocks individually and it was laggy at best. I was also not aware of techniques such as raycasting so I was employing my high-school trigonometry tricks to find the blocks my mouse cursor was on. But because everything was quite buggy, I decided to read the entire Three.js manual first. That’s how I learned about instancing and raycasting. I then optimized using these tricks. The final version turns out to be quite performant and I’m really happy with it.
It was really fun to learn about all this, and I can’t thank the community enough for such vast amount of available resources. The website’s deployed at voxel-ish.vercel.app, and I’m hoping to hear what other people think.