screencast.mp4
An interactive 3D experience built using React Three Fiber (R3F) and Three.js. The project showcases dynamic animations, smooth transitions, and responsive layouts optimized for various screen sizes.
When manipulating hundreds of objects in 3D space, libraries (eg GSAP, React-Spring) create long tasks up to 1000 ms. I solved the issue by using native Three.js methods, reserving spring animations for smaller tasks. This reduced performance bottlenecks and ensured smooth, responsive interactions.
- Navigate 3d gallery
- Multiple sorting algorithms with lerp animations
- Drag & Drop elements
- Hires images available by clicking
- React
- TypeScript
- Three.js
- React Three Fiber (R3F)
- React-Spring