three.js

Web / portfolio infrastructure

A demo shelf that keeps itself: twenty-five builds from 2019 to 2026, one PHP file and a sitemap that follows

demo.grn.dk is where the experiments live: twenty-five of them, from an XHTML-era sunrise calculator for Silkeborg to procedural WebGL, a Blender orrery, a crystal hall, an AI receptionist, a UK accounting autopilot and a Danish ERP day. Many of the cases on this page open on a shelf entry. The shelf itself is one PHP file that lists the demos, groups them into Featured and Tools, filters as you type and derives the sitemap from the same list — so a demo that lands in the web root is on the shelf and in the sitemap before anyone writes it up.

GrN.dk — demo.grn.dk

3D on the web / Blender pipeline

A brass orrery built by one Python script in Blender, turning live in the browser

The Orrery is a brass planetarium modelled, textured, rigged and animated in Blender 4.5, exported as glTF and played back live with three.js: a meshing gear train under the deck, four planets and their moons on whole-number orbits, a glowing sun with bloom, wireframe and speed controls, drag to orbit. Below it the same scene rendered as a seamless Cycles turntable loop — and the .blend, the .glb and the one Python script that builds all of it from an empty scene.

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

3D on the web / product configurators

Spectacles modelled in Blender, configurable in the browser — down to the prescription in the lens

Optik №1 is a pair of acetate spectacles built end-to-end in Blender 4.5 — modelled, textured, rigged and animated — then exported as glTF and played back live with three.js. In the browser you pick a frame finish and a lens, dial in a prescription on lenses with real refraction, and step into sunlight to watch photochromic glass darken. A Cycles-rendered film and the source files ship alongside the live scene.

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

AI governance / data protection

An AI control layer cast in glass: watch personal data become tokens mid-flight

Kontrollaget (“the control layer”) makes invisible AI infrastructure visible. It is a three-act demo for Danish organisations, in Danish and English: write a prompt containing personal data and watch it fly as tokens through a glass pipeline — PII scanner, policy gate, model router — with every step writing itself into an audit log; relive a US provider’s shutdown day with and without a control layer in place; then try to beat the anonymiser yourself in a live redaction playground.

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

3D on the web / product presentation

A crystal hall rendered live in the browser — then profiled until it ran everywhere

Kristallsaal is a walk-through jewellery hall that runs entirely in the browser: six vitrines of cut-crystal pieces under museum lighting, a mirror-polished floor, and light that actually splits into colour inside the stones. There is no engine download and no build pipeline — one HTML file, one JavaScript module and Three.js, served as static files. It exists to answer a client question with a demo instead of a slide: what does "3D product presentation on the web" feel like at the high end?

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

Browser games and language learning

A 3D browser game where every monster is a Japanese word

fantasy.grn.dk is コトバモン KotobaMon — a 3D monster-catching game that runs in an ordinary browser tab, where every monster is a Japanese word. ヒバナ hibana is a spark, コダマ kodama is a tree spirit, and catching one is how the word gets learned. It has a procedurally generated island with five biomes, twelve species, turn-based battles with a type chart, and full Japanese voice-over subtitled in Japanese, romaji and English at the same time. There is no download, no account, no build step and no backend: the whole game is 2,821 lines of vanilla JavaScript plus a vendored copy of Three.js, served as static files.

GrN.dk — internal build