De fleste som har prøvd å ta en Blender-scene ut på web har kjent på frustrasjonen:
Masse små ting må på plass før det fungerer i Three.js. Du trenger eksport, import maps, shaders, HDRI… og alt må konfigureres riktig.

Det finnes andre løsninger, men de koster som regel penger og krever ekstra setup.
Jeg ønsket et enklere alternativ. Derfor har jeg laget en gratis Blender add-on som eksporterer alt du trenger rett ut i en ferdig web-pakke.

👉 På under 30 sekunder kan du åpne scenen din i nettleseren.

✨ Hva add-onen gjør

Når du trykker Export Three.js Project i Blender får du:

  • scene.glb — 3D-scenen din i glTF-format
  • index.html — ferdig HTML med import map og kontroller
  • main.js — moderne ES-modul med renderer, kamera, lys, HDRI osv.
  • README.txt — enkel oppskrift på hvordan du kjører lokalt

I tillegg kan du velge i eksportpanelet:

  • ✅ Include HDRI (IBL) – miljølys for å unngå «kullsvart» PBR
  • ✅ Add debug helpers – grid og akser for enkel feilsøking
  • ✅ Use active viewport camera – startkamera = det du ser i Blender
  • ✅ Lar deg starte med collection hide skjult i viewer

Og viktigst av alt: Eksporten respekterer Hide in Viewport (øye-ikonet i Outliner).
Skjuler du et objekt i Blender, blir det ikke med til web. Enkelt, visuelt og logisk.

🛠️ Hvordan komme i gang

  1. Last ned threejs_exporter_lite
  2. Blender → Edit → Preferences → Add-ons → Install… → velg fila → aktiver.
  3. I Scene-panelet finner du seksjonen Three.js Exporter (Lite).
  4. Huk av de valgene du vil ha → trykk Export Three.js Project → velg en mappe.
  5. Åpne terminalen i den mappa og kjør:
python3 -m http.server 8080

Gå til http://localhost:8080 — ferdig! 🎉

Vil du dele prosjektet? Bare last opp hele mappa til en server (Caddy, Nginx, Netlify, Vercel osv.).

threejs_exporter_lite
Last ned plug in
threejs_exporter_lite.zip
6 KB
download-circle

🌟 Hvorfor dette er kult

  • 🔥 Du slipper alt boilerplate-arbeid — du kan fokusere på scenen og interaksjonen
  • 🌍 Du kan vise 3D direkte i nettleseren, uten plugins
  • ⚡ Du kan bygge videre i main.js med interaktivitet, fargebytte, raycasting eller GUI
  • 🆓 Alt er gratis, åpent og kjører rett på moderne web-teknologi

🚧 Veien videre

Dette er bare startpunktet. Nå kan du bygge videre med:

  • interaktive knapper og fargevalg
  • konfigurasjonsverktøy (endre materialer, toggles, animasjoner)
  • integrasjon mot databaser eller CMS

Mulighetene er enorme — og alt starter med én enkel eksport fra Blender.