Clemson 3D

▶ realworldbuilder.github.io/clemson

A browser-native model of the Clemson University campus, built with three.js. No build step, no asset pipeline — every texture is drawn to a <canvas> at load time and every building is assembled from primitives, so the whole thing is a handful of ES modules and an index.html.

Run it

ES modules need to be served over HTTP (opening index.html from disk will not work).

python3 -m http.server 5173

Then open http://localhost:5173.

What's in it

Landmarks — click any of them for a card of context:

Tillman Hall	the clock tower, with faces showing the real local time
Memorial Stadium	"Death Valley", ~14,000 instanced spectators, lit at night
The Hill / Howard's Rock	the grass bank at the open east end, rock on its pedestal
Bowman Field	the historic drill-field lawn
Cooper Library · Sikes Hall · Fort Hill · Hendrix · Watt Center · Littlejohn
Reflection Pond · The Amphitheater · Carillon Garden · the Tiger Paw

Controls

• Orbit (default): drag to rotate, scroll to zoom, click a landmark to fly to it
• Walk: pointer-lock first person — W A S D, Shift to sprint, Space/C for up and down, Esc to release. Buildings are solid below roof height; fly over one and you pass clean above it.
• Time of day: a full 24-hour lighting model — sun arc, sky gradient, a drifting FBM cloud deck that colours with the light, stars, window lights, lamp pools and stadium floods, all keyed off the clock. Auto Sky cycles it.
• Run Down The Hill (or press H): a 22-second cinematic — letterboxed flyover of Death Valley, close-up on Howard's Rock, cannon fire, and a 24-man squad pouring past the rock and down the bank into the balloon release, with the camera dropping in beside them. Click or Esc to skip.
• Crowd Wave (or press B for balloons only)

Performance

Buildings are authored as dozens of small boxes, then batched: mergeStatic() merges everything in a group that shares a material into one mesh per material, skipping anything flagged userData.dynamic (the clock hands, the carillon bell). That takes the scene from ~995 draw calls to ~380 at the same triangle count. Trees, hedges, lamps, banners, students and the 14,000-strong crowd are all instanced; the crowd's idle bob and wave run in a vertex shader.

Layout

src/
  main.js       scene assembly, controls, picking, UI wiring, render loop
  assets.js     procedural canvas textures + shared materials
  sky.js        sky dome shader, sun/moon rig, day-night keyframes
  terrain.js    ground heightfield, site plan (roads + walks), water shader
  buildings.js  primitives (box/hip roof/columns/windows) and each building
  stadium.js    seating-bowl generator, crowd instancing, The Hill
  props.js      trees, lamps, benches, flags, students, traffic, balloons
  landmarks.js  landmark copy and tour camera framing

window.clemson is exposed in the console (camera, scene, flyTo, applyTime, …) if you want to poke at it.

Ideas worth stealing

Pull requests welcome — this is meant to be picked apart. Some obvious gaps:

• Buildings that aren't here yet — Brackett, Riggs, Godfrey, Sirrine, Lee, the Watt's neighbours, Bowman's east side, most of the residence halls. genericHall() in buildings.js gets you a plausible brick block in one line; a real one is a couple of dozen.
• Better trees. They're icosahedron blobs and cones. Instanced billboards or proper LODs would let the count go up an order of magnitude.
• The Hill now has its gate, rails, bank fans and cannon — but it deserves the tunnel under the east stands, real signage, and a marching band.
• Sound — the carillon, the cannon, "Tiger Rag".
• Mobile — touch works via OrbitControls but nothing is tuned for it, and the crowd count should scale down.
• Accuracy. Distances are eyeballed. Anyone with the real campus GIS could rebuild main.js's site plan against actual coordinates.
• A proper Tiger. There is no tiger anywhere in this. That's a bug.

If you want a feel for how the pieces fit, main.js is the whole assembly in one readable file — every building is place(B.something(mats), x, z).

Notes on the model

Geometry is approximate and stylised — this is a recognisable campus, not a survey. Where a landmark carries history worth stating plainly (the Tillman name, the Fort Hill plantation), the landmark card says so rather than skipping it.