This project is a simple interactive 3D web application build for selfstudy purposes. My goal is to use 3D web technologies in combination with scroll-based animations to offer an immersive user experience. Click the link in the description, to see it live!

The application utilizes the following technologies:

• Vite & React: For fast development and optimized build management.
• react-three/fiber: Integration of Three.js with React for a reactive 3D rendering environment.
• react-three/drei: Extension of react-three/fiber with useful helper components (i.e.: , )
• Three.js: WebGL based library for 3D graphics on the web.
• CSS & Tailwind CSS: For styling and layout.
• GSAP: For animations.

• Scroll-Based Animations: Interactive 3D animations controlled by scrolling
• Including particles with a custom calculated Positions Array and 3D-Objects with scroll-based movements
• Overlay outside of the Canvas to display HTML in front of the Canvas
• Responsive Camera Behavior: The camera dynamically responds to mouse movements and scrolling (i.e. parallax effect)
• It works responsive on different sizes

• React Three Fiber Documentation - Pmndrs.docs
• Three.js-journey by Bruno Simon
• Wawa Sensei