Welcome to our Three.js Vite React project that brings to life a realistic 3D computer with an iFrame embedded on its screen! 🖥️💻 Immerse yourself in the world of 3D graphics and explore the seamless integration of web content in a captivating visual experience.
Follow these simple steps to get the project up and running on your local machine:
- Clone the Repository: Start by cloning this repository to your local environment.
git clone https://github.com/gonchihernandez/computer.git
cd computer- Install Dependencies: Install the necessary dependencies using npm or yarn.
npm install
# or
yarn install- Run the Development Server: Launch the development server and preview the computer with the iFrame in your browser.
npm run dev
# or
yarn dev- Explore and Customize: With the development server running, navigate to
http://localhost:5173in your browser. Interact with the 3D computer, rotate it, and see how the embedded iFrame interacts seamlessly within the scene.
The project is structured as follows:
computer/
├── public/
│ └── index.html
├── src/
│ ├── components/
│ │ └── Experience.jsx
│ ├── index.html
│ ├── index.jsx
│ └── styles.css
├── .gitignore
├── package.json
├── vite.config.js
└── README.md
- Three.js: A powerful 3D graphics library that makes it easy to create and display 3D computer models.
- Vite: A fast and lightweight development build tool for creating React applications.
- React: A popular JavaScript library for building user interfaces.
- CSS: Styling the components for an enhanced visual experience.
- Three.js Documentation: https://threejs.org/docs/
- React Documentation: https://reactjs.org/docs/getting-started.html
- Vite Documentation: https://vitejs.dev/guide/
Special thanks to market for providing excelent free 3D models
This project is licensed under the MIT License - see the LICENSE file for details.
- Author - Gonzalo hernandez