This project is a hands-on exploration of Three.js (for 3D rendering) and GSAP (GreenSock Animation Platform) through a partial recreation of Apple's iPhone 15 Pro website. The goal was to practice and deepen my understanding of these powerful web technologies.
- Smooth 3D Interactions: Experience the iPhone 15 Pro in 3D with intuitive mouse-based controls.
- Dynamic Animations: GSAP powers subtle and engaging animations that enhance the user experience.
- Color and Size Variations: Explore different models with realistic color options and size scaling.
- Custom Carousel (GSAP): A unique video carousel showcases the device's features with smooth scrolling.
- Responsive Design: The website adapts to various screen sizes, ensuring a consistent experience.
- Core Libraries:
- Three.js: 3D graphics
- GSAP: Animations
- React Three Fiber: React renderer for Three.js
- React Three Drei: Utility library for React Three Fiber
- Frontend:
- React.js: Component-based UI library
- Vite: Fast development server
- Tailwind CSS: Utility-first CSS framework
-
Prerequisites:
- Git
- Node.js
- pnpm (preferred, but
npmwill also work)
-
Clone the Repository:
git clone https://github.com/Starklord17/Three.js-GSAP cd Three.js-GSAP -
Install Dependencies:
pnpm install
-
Run the Development Server:
pnpm run dev
-
Open your browser and navigate to: http://localhost:5173
You can see a live version of this project here:
This project was heavily inspired and guided by the following resources:
- JavaScript Mastery (JSMastery): The core concepts and techniques were learned through their excellent tutorial.
- Three.js Documentation: Essential for understanding Three.js core concepts: https://threejs.org/docs/
- GSAP Documentation: A comprehensive guide to GSAP animations: GSAP
- Turns GLTFs into JSX components
Disclaimer: This project is a personal learning exercise and is not affiliated with Apple Inc.