beops
all projects

explanator

interactive 3D car explorer — click a part, get a live LLM-generated explanation of what it is and why it matters.
draft ainextjsthreejs
year
2026
role
engineer
stack
next.js · three.js · glm (openai-compatible)
link

an interactive 3d explorer for how a car works. six major systems — engine, transmission, brakes, suspension, cooling, electrical — each rendered as a labeled, clickable 3d model. click a part and a server route asks an llm to explain what it is and why it matters, right there in the viewer.

what it does

  1. 6 car systems — each a 3d model with labeled hotspots you can click to inspect.
  2. live explanations — clicking a hotspot calls /api/explain, which asks an llm (glm, via an openai-compatible endpoint) to generate a plain-language explanation of that part.
  3. works without a key — the viewer and 3d models run standalone; only the live explanation feature needs an api key.
  4. parametric placeholder models — ships with low-poly cc0 stand-ins for all six systems so the viewer always renders, with a documented path to drop in realistic .glb models.

why it matters for interviews

another example of the same adapter-boundary shape used across the portfolio (llm-batcher, imaginator, aissist) — a swappable, openai-compatible llm endpoint sitting behind a clean interface — this time wired into a 3d, click-to-explain interface rather than a chat or batch pipeline.