three.js

Web / portefølje-infrastruktur

En demohylde, der passer sig selv: femogtyve builds fra 2019 til 2026, én PHP-fil og et sitemap, der følger med

demo.grn.dk er der, eksperimenterne bor: femogtyve af dem, fra en solopgangsberegner for Silkeborg fra XHTML-tiden til procedural WebGL, et Blender-planetarium, en krystalsal, en AI-receptionist, en britisk regnskabsautopilot og en dansk ERP-dag. Mange af casene på denne side åbner på en post på hylden. Hylden selv er én PHP-fil, der lister demoerne, grupperer dem i Featured og Tools, filtrerer, mens man skriver, og afleder sitemappet fra den samme liste — så en demo, der lander i webroden, er på hylden og i sitemappet, før nogen har skrevet om den.

GrN.dk — demo.grn.dk

3D på nettet / Blender-pipeline

Et messing-planetarium bygget af ét Python-script i Blender, som drejer live i browseren

The Orrery er et messing-planetarium modelleret, tekstureret, rigget og animeret i Blender 4.5, eksporteret som glTF og afspillet live med three.js: et tandhjulstræk, der griber ind i hinanden under dækket, fire planeter og deres måner i heltalsbaner, en lysende sol med bloom, wireframe- og hastighedsknapper, træk for at kredse. Nedenunder den samme scene renderet som et sømløst Cycles-drejebordsloop — og .blend-filen, .glb-filen og det ene Python-script, der bygger det hele fra en tom scene.

GrN.dk — demohylde (demo.grn.dk)

3D på nettet / produktkonfiguratorer

Briller modelleret i Blender, konfigurerbare i browseren — helt ned til styrken i glasset

Optik №1 er et par acetatbriller bygget fra ende til anden i Blender 4.5 — modelleret, tekstureret, rigget og animeret — og derefter eksporteret som glTF og afspillet live med three.js. I browseren vælger man stel og glas, drejer en styrke ind på linser med ægte refraktion og træder ud i sollys for at se fotokromisk glas mørkne. En Cycles-renderet film og kildefilerne følger med den levende scene.

GrN.dk — demohylde (demo.grn.dk)

AI-governance / databeskyttelse

Et AI-kontrollag støbt i glas: se persondata blive til tokens undervejs

Kontrollaget gør usynlig AI-infrastruktur synlig. Det er en demo i tre akter for danske organisationer, på dansk og engelsk: skriv en prompt med persondata i, og se den flyve som tokens gennem et glasrør — PII-scanner, policy-gate, model-router — hvor hvert skridt skriver sig selv ind i en audit-log; gennemlev en amerikansk udbyders nedlukningsdag med og uden kontrollag; og prøv til sidst selv at slå anonymisereren i en live legeplads.

GrN.dk — demohylde (demo.grn.dk)

3D på nettet / produktpræsentation

En krystalsal renderet live i browseren — og profileret, til den kørte overalt

Kristallsaal er en smykkesal, man går igennem, og som kører helt i browseren: seks vitriner med slebne krystalstykker under museumsbelysning, et spejlblankt gulv og lys, der faktisk spaltes i farver inde i stenene. Der er ingen engine-download og ingen build-pipeline — én HTML-fil, ét JavaScript-modul og Three.js, serveret som statiske filer. Den findes for at besvare et kundespørgsmål med en demo i stedet for et slide: hvordan føles »3D-produktpræsentation på nettet« i den høje ende?

GrN.dk — demohylde (demo.grn.dk)

Browserspil og sprogindlæring

Et 3D-browserspil, hvor hvert monster er et japansk ord

fantasy.grn.dk er コトバモン KotobaMon — et 3D-monsterfangerspil, der kører i en helt almindelig browserfane, og hvor hvert monster er et japansk ord. ヒバナ hibana er en gnist, コダマ kodama er en træånd, og at fange et er måden, ordet bliver lært på. Spillet har en procedureelt genereret ø med fem biomer, tolv arter, turbaserede kampe med et typeskema og fuld japansk voice-over med undertekster på japansk, romaji og engelsk på samme tid. Der er intet download, ingen konto, intet build-step og ingen backend: hele spillet er 2.821 linjer vanilla JavaScript plus en vendoret kopi af Three.js, serveret som statiske filer.

GrN.dk — internt projekt