Overview

This project involved creating interactive 3D models for a website, specifically a gift box containing a book, a notebook, and a pen. Users could explore these objects from multiple perspectives, enhancing engagement and providing an immersive visual experience. The goal was to integrate 3D elements seamlessly into the web experience to improve interactivity and storytelling.

Tools Used

To bring this concept to life, I used:

• Blender 3D for modeling and animation

• Spline 3D for interactive web-based rendering

• Webflow to embed the final 3D experience into the website

3D Modeling & Animation

The primary focus of the project was a 3D box model. The process involved:

• Modeling: Created the gift box from scratch in Blender

• Rigging: Added bones to each flap for controlled movement

• Animating: Designed a smooth and realistic box-opening sequence

Web Integration

After refining the 3D model in Blender, I imported it into Spline 3D, where I set up interactive controls. Users could:

• Click a button to open the gift box

• Rotate the object using mouse movements

These interactions enhanced user engagement and provided a dynamic experience. The finalized Spline project was then embedded into Webflow, allowing users to manipulate the 3D object directly within the website.

Key Challenges

One of the main challenges in this project was optimizing the 3D models to ensure fast loading times without sacrificing visual quality. To address this, I:

• Reduced polygon counts while maintaining smooth geometry

• Used efficient texture mapping to minimize file size

• Optimized lighting setups to enhance realism without excessive computational load

Additionally, integrating interactive elements seamlessly into Webflow required careful embedding of the Spline project to ensure smooth performance across different devices and browsers.

Conclusion

This project successfully combined 3D modeling, animation, and web integration. One of the key challenges was optimizing each object to ensure fast loading times while maintaining high-quality, realistic rendering. This was achieved through polygon reduction, efficient texture mapping, and optimized lighting setups.

The result was a visually compelling, interactive experience that provided users with an intuitive way to explore the product in real-time, improving their understanding and engagement.