https://github.com/laironcosta1994/three.js-for-dynamic-3d-models-of-the-iphone-15

It showcases advanced web techniques using GSAP for smooth animations and Three.js for dynamic 3D models of the iPhone 15 Pro in various colors and shapes.
https://github.com/laironcosta1994/three.js-for-dynamic-3d-models-of-the-iphone-15

Last synced: about 1 month ago
JSON representation

It showcases advanced web techniques using GSAP for smooth animations and Three.js for dynamic 3D models of the iPhone 15 Pro in various colors and shapes.

• Host: GitHub
• URL: https://github.com/laironcosta1994/three.js-for-dynamic-3d-models-of-the-iphone-15
• Owner: laironcosta1994
• Created: 2024-09-09T17:43:33.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-09-09T17:55:31.000Z (8 months ago)
• Last Synced: 2025-01-21T20:09:30.476Z (3 months ago)
• Language: JavaScript
• Homepage: https://threejs-for-dynamic-3d-models-of-the-iphone-15.vercel.app
• Size: 37.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NotIphone: iPhone 15 Pro Clone

![NotIphone - Landing Page](https://media.licdn.com/dms/image/v2/D4E22AQHUCdVz8RLQcA/feedshare-shrink_2048_1536/feedshare-shrink_2048_1536/0/1725028844545?e=1727913600&v=beta&t=Fth-ANG6e551zjAR7dagKOh4ezfRLJ_Bh2k7hISZAkk)

## Introduction

NotIphone is a sophisticated clone of Apple's iPhone 15 Pro website, crafted to demonstrate advanced frontend development techniques using React.js and TailwindCSS. This project showcases the seamless integration of GSAP for dynamic animations and Three.js for rendering 3D models of the iPhone 15 Pro in various colors and shapes. The project is a testament to the power of modern web technologies, delivering an immersive and interactive user experience.

## Languages, Frameworks, and Libraries

- ![React.js](https://img.shields.io/badge/React.js-61DAFB?style=for-the-badge&logo=react&logoColor=black) **React.js**: A JavaScript library for building user interfaces.

- ![Three.js](https://img.shields.io/badge/Three.js-000000?style=for-the-badge&logo=three.js&logoColor=white) **Three.js**: A powerful 3D library for creating 3D animations and visualizations in the browser.

- ![React Three Fiber](https://img.shields.io/badge/React%20Three%20Fiber-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) **React Three Fiber**: A React renderer for Three.js.

- ![React Three Drei](https://img.shields.io/badge/React%20Three%20Drei-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) **React Three Drei**: A collection of useful helpers for React Three Fiber.

- ![GSAP](https://img.shields.io/badge/GSAP-88CE02?style=for-the-badge&logo=greensock&logoColor=white) **GSAP (Greensock)**: A JavaScript library for creating high-performance animations.

- ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) **Vite**: A fast build tool and development server.

- ![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white) **Tailwind CSS**: A utility-first CSS framework for creating custom designs.

## Screenshots

### 3D Model Display

![3D Model](https://media.licdn.com/dms/image/v2/D4E22AQFxaeU5-KHQjQ/feedshare-shrink_2048_1536/feedshare-shrink_2048_1536/0/1725028843783?e=1727913600&v=beta&t=bCPTVqqAXU2RJzaFJQdS5aUOu-widN6emUvUiXVUiaM)

![3D Model02](https://media.licdn.com/dms/image/v2/D4E22AQGiV1Kfdxb6Xw/feedshare-shrink_2048_1536/feedshare-shrink_2048_1536/0/1725028843848?e=1727913600&v=beta&t=Slz47B-8PywMlSLNm6iVqOYAoLm-jx8dMenN5aRT1bo)

### GSAP Animations

![GSAP Animation](https://media.licdn.com/dms/image/v2/D4E22AQHk5VeDqHu_7w/feedshare-shrink_2048_1536/feedshare-shrink_2048_1536/0/1725028845353?e=1727913600&v=beta&t=_bvirgOn6HT7qLWAeqFR_KgCDce5lrZu6EU9OVcmdO0)

![GSAP Animation02](https://media.licdn.com/dms/image/v2/D4E22AQGgxXau5YDaTA/feedshare-shrink_2048_1536/feedshare-shrink_2048_1536/0/1725028845507?e=1727913600&v=beta&t=Wj5kGCOiZct6JRG23HGUa7GB3iU0EP1FyE4HT7wuwVo)

### Responsive Design

![Responsive Design](https://media.licdn.com/dms/image/v2/D4E22AQFxO57oq8tGgA/feedshare-shrink_800/feedshare-shrink_800/0/1725028843181?e=1727913600&v=beta&t=UBvRz_HvUHcn41V44YQt2oT5fWHLmCBnp3ARPIakVV0)

![Responsive Design02](https://media.licdn.com/dms/image/v2/D4E22AQFo4Xj4ecrJFg/feedshare-shrink_800/feedshare-shrink_800/0/1725028843071?e=1727913600&v=beta&t=h7bYMK2aDJrxMIQ595T8hGGqEytzsW9N72Put9yv5Hc)

![Responsive Design03](https://media.licdn.com/dms/image/v2/D4E22AQETXUqvtbtzDA/feedshare-shrink_800/feedshare-shrink_800/0/1725028844888?e=1727913600&v=beta&t=3nsSGf7vHN1PiKSE5zNQqUdvILEOPBe76ZxnCHne8zU)

![Responsive Design04](https://media.licdn.com/dms/image/v2/D4E22AQHQeU9v6-4FrA/feedshare-shrink_800/feedshare-shrink_800/0/1725028843549?e=1727913600&v=beta&t=U9Qycq3cCB79rKquZlebNbnmfxsInQZ9OxIUl4WeBOY)

## Features

- **Realistic 3D Models**: Display and interact with 3D models of the iPhone 15 Pro in various colors and shapes using Three.js.

- **Advanced Animations**: Leverage GSAP to create smooth and captivating animations throughout the site.

- **Responsive Layout**: Ensure a seamless experience across all devices with a mobile-first design approach.

- **Optimized Performance**: Built with Vite for fast development and production builds.

---

## Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve the project.