Blender Add-on: Standalone HTML exporter for Blender (Three.js)

Hi everyone,

I’d like to share a Blender add-on I’ve been developing.

The goal is very simple:

Export a Blender scene as a single self-contained HTML file that anyone can open in a web browser.

No Blender installation.
No server.
No npm.
No external dependencies.

The generated HTML includes everything needed to display the 3D scene using Three.js.

Why I made it

I often need to send 3D models to people who don’t use Blender:

  • project managers
  • customers
  • engineers
  • colleagues
  • suppliers

Sending a .blend or even a .glb isn’t always convenient because the recipient still needs a viewer.

With this exporter, I can simply send one HTML file that opens directly in Chrome, Edge, Firefox or Safari.

Main features

  • One-click export
  • Standalone HTML
  • Uses Three.js
  • Orbit controls
  • Materials and textures
  • Lighting support
  • Works offline
  • Easy to share by email or USB
  • Perfect for presentations or technical reviews

The objective is not to replace Blender or professional viewers, but to make sharing 3D content as easy as sharing a PDF.

Website

You can find screenshots, documentation and download here:

I’d really appreciate your feedback and feature suggestions.

Thanks!

9 Likes

Export any Blender scene…

That’s a big claim. It obviously does not work as advertised.

Material nodes, geometry nodes, color management, animations, scripting, drivers… It cannot work. Please inform the LLM, it should do better.

Thanks for pointing that out.

You’re absolutely right that “any Blender scene” is an overstatement. A standalone HTML viewer based on Three.js cannot reproduce every Blender feature such as Geometry Nodes, Python scripting, drivers, compositor effects, or Blender’s complete rendering pipeline.

The goal of this add-on is much more practical: export the geometry, materials, textures and scene hierarchy into a single HTML file that can be opened directly in a web browser without requiring Blender or any additional software.

I’ll update the wording to make that clearer. Thanks for the feedback.

1 Like

This is brillant. I didn’t try on heavy scenes (yet) but it worked flawlessly to quickly share some low poly characters and spaceships. Can’t figure out how to get materials though. Maybe the addon name is a bit long (the “standalone” part seems redundant to me).
Anyway, excellent addon. Nice work, and thanks for sharing.

If you want to work with textures, your object absolutely needs a UV map.

Hi GTa,

great Add-on.

Do you plan to expand the add-on?

E.g.
Light export with shadows
Metallic materials
World (with Env texture)
Click actions (click on door opens it)

Hi N.V. ,

Thank you for your feedback and for the suggestions.

I may expand the add-on in the future, but the main goal is to keep it extremely simple: one button, one standalone HTML file, and no external installation or server required.

The 3D export itself is based on Blender’s native glTF/GLB exporter. This means that the Blender features supported by my add-on mainly depend on what the native glTF exporter can convert correctly.

The add-on does not recreate Blender’s rendering engine inside Three.js. It first asks Blender to generate a GLB file, then packages this GLB together with the HTML viewer and the required JavaScript libraries.

The general workflow is:

Blender scene
      │
      ▼
Blender native glTF/GLB exporter
      │
      ▼
Temporary GLB file
      │
      ▼
GLB converted to Base64
      │
      ├── Three.js scripts embedded in the HTML
      ├── Viewer code embedded in the HTML
      ├── Controls embedded in the HTML
      └── GLB data embedded as Base64
      │
      ▼
One standalone HTML file
      │
      ▼
Opened locally in a web browser

A simplified structure of the generated page looks like this:

<!DOCTYPE html>
<html>
<head>
    <!-- Embedded CSS -->
</head>

<body>
    <div id="viewer"></div>

    <!-- Embedded Three.js library -->
    <script>
        /* Three.js source code */
    </script>

    <!-- Embedded GLTFLoader -->
    <script>
        /* GLTFLoader source code */
    </script>

    <!-- Embedded OrbitControls -->
    <script>
        /* OrbitControls source code */
    </script>

    <script>
        const glbBase64 = "AAAB...";

        // Base64 -> binary data
        // binary data -> Blob
        // Blob -> local object URL
        // object URL -> GLTFLoader
    </script>
</body>
</html>

So the recipient only receives one file. The browser reconstructs the GLB directly from the Base64 data contained inside the page.

Regarding your examples:

  • Metallic materials should already work when they are compatible with the glTF PBR material model.
  • Lights and shadows may be possible, but they also require additional viewer-side configuration in Three.js.
  • World environment textures could potentially be added, provided they can be exported or embedded in a reliable way.
  • Click actions such as opening a door are different because they require interaction logic, object identification, and usually predefined animations or metadata.

Interactive actions are possible technically, but they would make the exporter more complex and would move it away from its original goal: producing a simple, portable 3D HTML file that anyone can open.

My priority is therefore to keep the basic exporter lightweight and easy to use. More advanced functions could eventually be added as optional features, without making the standard workflow more complicated.

1 Like

Someone please do a test with fully baked GI! I’d love to see a demo of that! I’m in the middle of a hot project or I’d do it and share it. I haven’t done a three.js project in a couple years, but I have worked in it extensively and hope to be doing some more in the future. This would be a huge time saver for sure, even if it would only get me halfway there and I’d need to tweak my js and html a bunch. So really, someone please do a high-quality demo fully baked with at least 2k textures (complex product, character, whatever) with the full texture stack (albedo, normal, ORM) and put a link here if you can. That simple demo with the industrial tanks is so effing lo-fi and uninspiring… But this is pretty exciting news! I know that three/webgl supports displacements, but presumably the addon can’t do displacement and that would need to be added manually in js, right?

Hi,

First of all, thank you for your detailed feedback. Reading comments like yours is exactly why I wanted to share this project here.

A bit of background about me.

I’m not a 3D artist. I’m an industrial CAD designer working in a sugar factory on Réunion Island. My daily work is designing industrial equipment, piping, steel structures and producing 2D manufacturing drawings.

My Blender knowledge is actually very limited. I started using Blender because it allowed me to create simple keyframe animations of my industrial projects and send them to my clients.

Programming is also quite new to me. I’m not a software engineer. This add-on was born simply because I encountered a practical problem and wanted a better way to share my work.

That’s why the philosophy of the add-on is to stay extremely simple: export once, obtain a single HTML file, and send it to anyone.

I completely understand that artists have very different expectations. Reading the discussions here is actually helping me discover problems I hadn’t even considered before.

Regarding the features you mentioned (baked GI, PBR workflow, world environment, shadows, displacement, interactions…), I believe many of them are technically achievable with Three.js/WebGL. My current limitation is simply my knowledge of Blender’s internal systems and how all these features are represented before export.

I don’t think anything is impossible, but before adding support for a feature I first need to understand how Blender stores it, how the native glTF exporter handles it, and finally how it can be recreated in Three.js.

About the demo on my website… you’re absolutely right, it’s very “low-fi”. :grinning_face_with_smiling_eyes:

The reason is actually quite simple: I live on Réunion Island, where internet speed is… let’s say… not ideal. The website is hosted on a small server in my house, so I intentionally keep the demo models extremely lightweight to avoid long loading times for visitors.

I actually considered using Blender’s famous “Littlest Tokyo” demo, but at around 13 MB I was afraid it would slow down the page too much.

For anyone interested, here’s the model:

Littlest Tokyo: https://nexdata.tarn.us/downloads/little_tokyo.html

Finally, I’d genuinely love to continue improving this exporter. But with my limited knowledge, doing it alone will be difficult.

So if experienced Blender or Three.js users have ideas, suggestions, or even want to contribute, I’d be more than happy to learn from the community and evolve the project together.

Thanks again for taking the time to share your thoughts!

3 Likes

Hi G! Wow, you’re near Madagascar! And on such a small island! Very cool!

Sorry, I was under the impression that your addon was already capable of exporting all PBR textures. If it is indeed not doing that, then don’t worry about it. When I get a chance, I will grab a copy and see if I can push it to its limits and see what it is truly capable of. I’m assuming AI wrote this addon for you since you are not a programmer. I actually am (though JS is my native tongue, not Python), so maybe for shits-n-giggles I will see if this can be easily improved upon. We’ll see, it’s always tough for me to find spare time for stuff…

As for for global illumination baking, that is something that Blender (or various addons) can do quite wonderfully, so you don’t need to worry about that. Definitely do a little research on that if you have a couple. The gist is that one can totally bake the lighting, shadows, etc, right onto new UV textures, so that you can take those and slap them on your versions that you’re exporting to glTF/GLB and have them look freakin’ incredible when you bring them into three.js (et al). This doesn’t work so great if one is trying to do dynamic lighting in three.js (having the highlights change with moving lights etc), but otherwise the results are pretty stunning, when done well.

I’ll really try to bust away from my work asap and play around with it, since this truly is something I am very much interested it. And btw, thanks a bunch just for making it, no matter what its limitations are!

Ciao G!

Hi Norka,

I gave your suggestion a try.

I tested Bake UV → Rendered Appearance in Blender and then ran the result through the exporter.

It works to some extent, but it’s not there yet. The HTML result is noticeably darker than the rendered appearance in Blender, and the colors don’t match exactly.

blender

export

So there is definitely something to investigate here. I suspect color management / color space somewhere in the Blender → glTF → Three.js pipeline, but I’m still learning this part of Blender.

I thought I’d share the result anyway since you specifically asked about baked scenes. Maybe someone here will immediately recognize what’s going on with the darker output.

Hi G! I applaud your efforts, but you must have misunderstood the whole global illumination part… You would want to light the scene with an HDRI and have Principled BSDF materials on your meshes. Then and only then would you be in the photo-real realm and have something worthy of doing a proper PBR three.js export test. I swear I would bang out a test if I wasn’t juggling two giant gigs concurrently. Hopefully someone with some PBR chops and some free time will step up and jump on this… Guys?..