🌍 ArkTree

Description

This project is an interactive experience designed to raise awareness about the importance of taking care of our planet. Using Vue.js and Three.js, it creates an immersive visualization of the environment, exploring issues related to nature conservation and the environmental impacts we face.

Through particle animation and interactivity, we aim to convey the message that small actions can make a big difference for the future of our planet.

Features

• Particle Animations: 3D animated particles simulate air and nature movement, symbolizing the need to preserve the environment.
• Mouse Interactivity: The project responds to mouse movement, creating an immersive sense of control over the scene.
• Background Image and GIF: A background layer with an image and an animated butterfly GIF, representing wildlife and the importance of biodiversity.

Technologies Used

• Vue.js: A progressive JavaScript framework for building user interfaces.
• Three.js: A JavaScript library for creating 3D graphics in the browser.
• CSS: Interface styling focused on responsiveness and interaction.

How to Run the Project

1. Clone the repository:

   git clone https://github.com/yourusername/environment-project.git

2. Install dependencies: Navigate to the project directory and install dependencies using npm or yarn:

   cd environment-project
   npm install

   or

   yarn install

3. Run the development server: After installing the dependencies, start the development server with the command:

   npm run serve

   or

   yarn serve

4. Access the project: The project will be available at http://localhost:8080/.

Project Structure

• src/components: Contains the Vue.js components used in the project.
  • AppForest.vue: Component responsible for rendering the background and animated particles.
• src/assets: Images and files used in the project.
• public: Public files, such as index.html.

How It Works

1. Vue.js manages the project structure and user interaction.
2. Three.js renders the 3D particles in the scene and enables their dynamic movement.
3. Particle animation is based on mouse movement, providing an immersive experience for the user.
4. The project is also responsive, adapting to different screen sizes, with the background adjusting to the window size.

Contributing

If you’d like to contribute to the project, please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/new-feature).
3. Make your changes.
4. Commit your changes (git commit -am 'Add new feature').
5. Push to the branch (git push origin feature/new-feature).
6. Open a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

We thank everyone involved in developing and creating solutions to raise awareness about environmental preservation!

Contact

If you have any questions or suggestions about this project, feel free to contact me:

• GitHub: @yourusername
• Email: [email protected]