Camp Mylar

Visit Site

Project Highlights

Timeline

May - July 2023

Tasks

3D Modeling | Web Design | UV Unwrapping

Technologies

Three.js | React | Vercel | Blender | GLSL

Background

An interactive 3D experience crafted with Three.js, immersing viewers in the rugged world of wilderness survival through innovative uses of Mylar thermal blankets sold by Wynn Depot. The scene showcases campers facing real-life survival challenges, using Mylar blankets in unique and unexpected ways, from heat insulation to shelter construction, and water collection. Each use case is designed to highlight the essential role of Mylar blankets in providing security and comfort, enhancing the product’s value for outdoor enthusiasts and survivalists alike.

Process

Design

All models were in made in Blender, below are some initial designs:

UV Unwrapping

The process of UV unwrapping 3D models is time-intensive, but the payoff in performance is well worth it when bringing these assets to the web. UV unwrapping involves carefully mapping each part of the model’s surface to a 2D plane, allowing textures to be applied precisely without stretching or distortion. This optimization step not only reduces file size but also improves rendering efficiency, ensuring smoother interactions and faster load times for users.

Transitions and Audio

To enhance user engagement, I integrated Camera Controls from the react-drei library, enabling smooth transitions from the loading screen and seamless movement across the scene with interactive UI buttons. This feature allows users to explore the environment fluidly, maintaining immersion and reducing jarring movements.

Additionally, I implemented audio triggers that activate on startup, further enriching the experience. By combining intuitive transitions with ambient sound, the result is an immersive, cohesive experience that invites users to explore and interact with the scene on a deeper level. This approach leverages both visuals and sound to create a captivating, multi-sensory journey.

Learning Outcome

1. UV unwrapping significantly enhances application performance by pre-baking lights, shadows, and textures directly into the model. This approach minimizes runtime processing demands and accelerates load times, especially in web-based applications. However, the trade-off is reduced dynamic flexibility, as lighting and effects become fixed, limiting real-time scene adjustments and reducing adaptability in changing environments.

2. Using 3D animation tools like Mixamo drastically reduces the time required to rig and animate models.

3. Combining pre-baked textures with selectively dynamic elements allows for a balance between performance and flexibility. This hybrid approach maintains fast load times while enabling scene elements to respond to user interactions or environmental changes.