Skip to content
Level 05

HOLOGRAMA — 3D/AR Viewer

Scan a card. Your work appears on the table.

A hand-built three.js 3D/AR viewer — not a <model-viewer> embed. Loads a solitaire diamond ring by default, accepts drag-and-drop of any .glb/.gltf with a real client-side glTF-Transform inspection panel, and launches native AR on both iOS (Quick Look) and Android (Scene Viewer). A printable business card carries a QR straight into the AR experience, plus an experimental camera-based marker mode.

The problem

Seeing a .glb file properly means installing software. Online viewers upload your model to an opaque server. And a business card proves nothing about the work behind it. HOLOGRAMA answers a narrower question: what if the card itself launched the work — in 3D, on your actual table, in under five seconds?

Built with

three.jsReact Three FiberWebXRglTFAR

What went into this

  • Built from scratch on three.js and React Three Fiber — a real renderer, not a <model-viewer> embed or a hosted viewer service
  • Drop in any .glb or .gltf and get a real client-side inspection — triangles, materials, textures, and detected extensions via gltf-transform, with nothing ever uploaded
  • Native AR on both platforms from one glTF pipeline — Android Scene Viewer and iOS Quick Look, with a pre-generated USDZ for the gallery model and a runtime-generated one for dropped files
  • Real ray-traced diamond refraction in the live viewer at true diamond IOR, plus a separate reflection-based material tuned for what native AR export can actually render
  • A printable business card whose QR opens the AR experience directly, plus an experimental camera marker mode that anchors the model to the card itself

How it fits together

One glTF pipeline feeds four features, not four separate assets: the same .glb that renders in the three.js viewer is what gltf-transform inspects client-side, what a pre-generated USDZ was exported from for Quick Look, and what a MindAR target was compiled from for the card's marker mode. Android's Scene Viewer and iOS's Quick Look are genuinely different systems — one wants a public URL, the other only opens USDZ — so AR alone branches into two real, separately-tested paths instead of one that half-works everywhere.

How it works