This project is a fully responsive and interactive website focused on promoting environmental awareness and the importance of protecting nature from human impact. Built using HTML, CSS, JavaScript, Bootstrap 5, and Three.js, it features a rotating 3D Earth model that visually represents the natural world. The site guides users through an engaging flow—from introducing environmental issues caused by humans to showcasing how we can save the planet. It's an educational and visually impactful experience optimized for all devices.

A 3D Interactive Website to Raise Awareness About Nature Preservation

• 3D rotating Earth model
• Interactive flow
• Environmental awareness sections
• Fully responsive design
• Educational storytelling
• Smooth transitions
• Mobile compatibility

Integrating Three.js for a smooth and realistic 3D Earth rotation while maintaining responsiveness and performance on different devices was a major challenge. Additionally, balancing design aesthetics with an informative narrative required careful planning.

I optimized the 3D model using lightweight assets and implemented performance tweaks for Three.js to ensure smooth animation. Using Bootstrap 5's grid and utility classes, I made the layout adaptive across screen sizes. To enhance storytelling, I designed a scroll-based interactive flow that naturally guides users through the content.