From Blender to Browser: Making 3D Work on the Web

Integrating 3D animations into websites is super popular right now—and for good reason. They create engaging, visually rich experiences that really draw users in. But when I tried to bring 3D models into a real project, I quickly realized something: making them look good and keeping them lightweight (especially with transparent backgrounds) is no easy task.

In this post, I aim to share my experience tackling this specific challenge during my work on the BITS Pilani website. I worked closely with developers to incorporate three 3D animations into a single page. This process involved a significant amount of trial, error, and learning. Here’s how it unfolded.

The Project Goal

We needed to place three separate 3D elements in different sections of one webpage:

• A wireframe lamp

• A 3D card animation

• A 3D ampersand symbol overlapping text/strokes

All of these needed to loop smoothly, and two of them required transparent backgrounds to blend seamlessly into the design.

Attempt 1: Spline 3D

Naturally, I started with Spline. It’s a great tool for adding interactive 3D elements to the web. Since I had built all the models in Blender, importing them into Spline was pretty straightforward.

Things were looking promising—until I got to exporting. That’s when the problems started:

• The lighting and textures didn’t carry over well

• And more importantly, each model ended up being 7MB+

Even after heavy optimization, the files were still around 3–5MB each. That was just too much. I didn’t want to hand over bloated assets to the dev team, so I scrapped the Spline idea entirely.

For the lamp, since it sat on a white background, I got away with using a simple MP4. That solved one part of the puzzle, but I still needed a better solution for the other two animations.

https://spline.design/

Attempt 2: Transparent Videos (WebM + HEVC (H.265))

After some deep-diving on YouTube, Reddit, and forums, I found a trick using transparent videos for the web:

• WebM = Best for Chrome, Firefox, Edge

• HEVC (H.265) (with alpha channel) = Works for Safari

 Shutter Encoder 

To make it happen, I exported my 3D animations as .mov files with alpha and then used Shutter Encoder to convert them into optimized WebM files. And it worked great... almost.

Here’s what went wrong: Safari wouldn’t loop the video correctly. It added a weird 1-second pause at the end of each loop, which totally broke the experience. No matter what I tried, the pause stayed. That was the dealbreaker.

Final Fix: Lottie to the Rescue

With video formats failing me, I pivoted to something I had used before for 2D animations: Lottie.

Here’s what I did:

1. Exported the animations as PNG sequences (with transparent backgrounds)

2. Imported them into After Effects

3. Used the Lottie plugin to export JSON files

4. Optimized the PNGs to keep the size low

The result? Smooth, looped, transparent animations that were only 500KB to 1MB each.

And they worked beautifully across all browsers, no glitches, no delays.

Honestly, it felt like magic.

Conclusion

After multiple failed attempts, Lottie files turned out to be the best way to integrate lightweight, transparent 3D animations into the website. If you're facing similar challenges, give Lottie a try—it worked like a charm for me!