The Problem

Developers need a ready‑made, browser‑based 3D anatomy viewer that can be dropped into a Next.js (or Cloudflare Vinext) site. Building the Three.js scene, loading GLB models, and wiring optional ChatGPT‑based authentication from scratch is time‑consuming and error‑prone.

What This Does

The repository delivers a full‑stack starter that renders interactive human organs with Three.js. Core assets live under public/models/ (GLB files) and public/anatomy/ (preview images). The viewer logic lives in app/lib/three/viewer.ts, which builds the scene, loads models, and manages hotspots (app/lib/three/hotspots.ts). UI components app/components/AnatomyApp.tsx and app/components/OrganViewer.tsx expose a React interface that selects an organ, shows a learning modal, and forwards user actions to the viewer.

Optional ChatGPT sign‑in helpers reside in app/chatgpt-auth.ts, providing getChatGPTUser, requireChatGPTUser, and safe redirect utilities. A Cloudflare Worker (worker/index.ts) offers an API surface that makes a single outbound network request (used by the examples).

How It Is Wired

Execution starts when Next.js serves a request (npm run dev or npm run build → Vercel/Vinext). The root layout (app/layout.tsx) loads AnatomyApp which imports viewer.ts.

  1. viewer.ts (26 functions, 2 classes) – constructs the Three.js renderer, calls buildEnvironment, buildEnvironmentMap, and prefetch to load GLB assets. It is the hub: 3 other files import it, and it imports two helpers (dispose.ts, loaders.ts).
  2. loaders.ts (12 functions) – defines load and parse; called by viewer.ts and hotspots.ts to decode model data.
  3. hotspots.ts (14 functions) – creates hotspot textures (rgba, dotTexture, ringTexture) used by the viewer to annotate organs.
  4. OrganViewer.tsx – renders the canvas, forwards UI events (handleTool) to viewer methods like zoom and toggleIsolate.
  5. AnatomyApp.tsx – orchestrates organ selection (selectOrgan), prefetches data (prefetchOrgan), and shows the LearningModal.
  6. chatgpt-auth.ts – supplies auth helpers; requireChatGPTUser calls getChatGPTUser → safeDecodeURIComponent.
  7. worker/index.ts – runs as a Cloudflare Worker; its single exported fetch handler performs a network request (the only outbound call).

The internal call graph shows the most‑used functions: select (6 callers), busy (5), tween (4). No circular imports were detected, so module changes are isolated. The only code with high branching density is public/draco/draco_wasm_wrapper.js (456 branches/117 lines), which is a third‑party WASM loader and not part of the core viewer.

How To Use It

# clone
git clone https://github.com/moses-y/anatomy
cd anatomy

# install
npm install

# start dev server
npm run dev      # launches Next.js on localhost

# build for production
npm run build    # creates a Vercel/Vinext‑compatible bundle

# run tests
npm test

No additional environment variables are required; the optional ChatGPT auth reads request headers injected by the hosting platform. To enable D1 or R2 bindings, edit .openai/hosting.json as described in the README.

Real‑World Use

A medical‑education site can embed <AnatomyApp /> in any page. When a user selects “Heart”, selectOrgan triggers viewer.setOrgan('heart'), which loads public/models/heart.glb via loaders.ts. If the site requires user tracking, requireChatGPTUser('/dashboard') redirects unauthenticated visitors through the ChatGPT OAuth flow and returns them to the protected page.

Code Health & Issues

  • High – No LICENSE – repository root lacks a license file; reuse is legally blocked.
  • High – No CI – no .github/workflows; automated build/test never runs.
  • High – No deploy build gate – vercel.json exists but no workflow validates the artifact.
  • Medium – No Dependabot – package.json present, but no auto‑update config.
  • Medium – Large binary – public/models/skin.glb (5.5 MB) should be stored in Git LFS or external storage.
  • Low – Missing convention files – no .editorconfig, .gitattributes, or formatter config.
  • Medium – Empty catch block – public/draco/draco_wasm_wrapper.js silently swallows errors.
  • Medium – High branching density – same wrapper file has 456 branches; consider refactoring.

The Bottom Line

The repo provides a functional, well‑structured 3D anatomy viewer built on Next.js and Three.js, with clear entry points and limited coupling. It is usable out‑of‑the‑box for web developers needing an interactive anatomy component, but it lacks basic production hygiene (license, CI, dependency automation) and contains a few maintainability concerns in the DRACO WASM wrapper. Addressing the health issues will make it safe for commercial integration.