Ocean3D 🌊

Live preview 🔴

https://the-ocean-cleanup-ashy.vercel.app/

Overview

Our project, "Ocean3D," aims to raise awareness and support for The Ocean Cleanup's mission. Ocean3D will revolutionize the online presence of The Ocean Cleanup by transforming their existing 2D website into an immersive 3D experience. By incorporating interactive storytelling, we not only address the urgent issue of ocean plastic pollution but also provide a unique and engaging platform for users to explore, learn, and contribute to the cause.

Note

This project is not made in collaboration with The Ocean Cleanup.

Features

• Feature 1: Navigate with boat using controls or joystick (mobile and tablet)
• Feature 2: Play minigame
• Feature 3: Login and register

Dependencies

• @react-spring/web: Version 9.7.3
• @react-three/drei: Version 9.92.1
• @react-three/fiber: Version 8.15.12
• @react-three/rapier: Version 1.2.1

Scripts

• start: Concurrently runs backend and frontend servers.
• start-backend: Starts the backend server.
• start-frontend: Starts the frontend using react-scripts.
• build: Builds the project.
• test: Runs tests using react-scripts.
• eject: Ejects from react-scripts.

Development Setup

1. Clone the repository.
2. Install dependencies using npm install.
3. Start the project using npm start.

Additional Information

• TailwindCSS is used for styling.

Contributors

• Mouise Bashir
• Jefta Alberts
• Jimmy De Wit
• Rand Al Radi
• Furqan Chaud-ry

© 2023 All rights reserved.

Commisioned by: