ThreeJs Scene :: Lab :: Carter Ogunsola

A vanilla Three.js scene, pared to the basis: a renderer on a canvas, a camera, orbit controls, a render loop. On the stage, a loaded glTF model or a superformula that morphs between four shapes, each drawn as surface, mesh or vertices, in one of four finishes baked from a lit sphere.

Dependencies

three.jsr0.185 :: renderer, GLTFLoader, OrbitControls

A model in a room you can turn

Drag anywhere and the model swings around; let go and it keeps drifting on its own. It’s floating in a plain monochrome studio with no visible lights, just a model catching a soft key from the upper left. Nothing here is doing much, and that’s the point. This is the smallest honest Three.js scene, the one you’d start any project from, with a little interaction bolted on so it isn’t a still life.

The parts every scene needs

Strip a Three.js scene to its frame and it’s always the same short list, and this experiment is just those parts wired together:

a renderer that owns a <canvas> (here transparent, so the stage shows through), pixel ratio capped at 2 so retina screens don’t render 4× the pixels;
a scene to hold things and a camera to look through;
a light, or in our case a matcap standing in for one (more below);
a loader that pulls a .glb off a CDN and drops it in;
controls so you can orbit;
a loop that reads the controls and re-renders each frame.

The load does one extra courtesy: it measures the model’s bounding box, scales the longest side to a fixed size, and recenters it on the origin, so any model you point it at arrives framed instead of tiny or off in a corner.

The same geometry, three ways

The Shaded / Wire / Points switch draws one geometry three different ways, which is the quickest way to see what a loaded model actually is:

Shaded is the surface, lit by the matcap.
Wire is a MeshBasicMaterial with wireframe: true, so you see the triangles the surface is built from.
Points is a THREE.Points cloud sampled evenly across that surface (via MeshSurfaceSampler), so it stays dense even on the big flat faces where the raw vertices are miles apart.

One equation, four shapes

The subject switch is where this stops being a loader demo. Lantern is the model. The other four are the same eleven lines of math with different numbers in them: Gielis’s superformula, a superellipse swept around another superellipse. Feed it m=4, n=2 and you get a sphere. Push n1 under 1 and the lobes pinch into a star. Split the two rings apart and you get a vessel.

Each shape is sampled on a 120 by 72 grid, which is 8,833 vertices, coarse enough that Wire reads as a mesh instead of a gray wash, fine enough that Shaded has no facets. The radius goes to infinity wherever a lobe pinches to nothing, so it is clamped at 6 before it can blow the bounding box apart, and every subject is normalized to the same size on the way out. A morph between two shapes of different scale reads as a zoom, not a change of shape.

One hack worth naming: where the lobe count is not a multiple of four the radius at -PI and +PI genuinely differ, which leaves a crack down one side. The last column of the grid is copied from the first to close it. That trades a hair of asymmetry for a watertight surface, and nobody has ever spotted the asymmetry.

The morph, and the swap it can’t do

Because every shape rides the same grid, with the same vertex count and the same winding, a switch is a lerp: hold the shape you left in one buffer, the shape you asked for in another, and walk the position attribute between them over 0.9s on an expo.out curve. The mesh, the wireframe and the point cloud share that one buffer, so all three morph at once, whichever is on screen.

Normals are recomputed every frame of the morph. That’s the expensive part, and it is unavoidable: the surface really is new each frame, and a matcap reads normals. At this vertex count it costs about a millisecond, which is fine for the second it lasts. The bounding sphere gets recomputed with them, or the frustum cull clips a shape that just grew.

The model is the exception. A lantern has nothing in common with an equation, vertex for vertex, so there is no honest morph between them. Instead the outgoing subject scales down to a point over 0.35s and the incoming one blooms out of it.

Four finishes, baked at boot

A matcap is a photograph of a lit sphere, sampled by view-space normal. One 256px image carries a whole light rig, and the price is that the light never moves with the camera. So rather than download one, take the photograph: at boot a unit sphere sits in a unit ortho frustum under RoomEnvironment and two lights, gets rendered once into a 256px target, and that target is the matcap. It behaves exactly like a downloaded one.

Two things come free. Roughness and metalness become dials instead of pixels, so Polish can re-bake the finish in a frame. And the finishes are ours. The big public matcap libraries on GitHub carry no license file at all.

Studio is the default: roughness 0.52, no metal, the key up and to the left.
Chrome is roughness 0.06 at full metal, so the room does the work.
Wax is roughness 0.95 with sheen, which kills every highlight.
Ink paints the sphere near-black at roughness 0.22, so the body goes dark and the edge stays bright. On the spiked shapes it is the best of the four.

The bake writes into a render target whose texture is tagged sRGB. Miss that and the matcap comes back linear, which reads as a flat, muddy gray, and it takes a while to work out why.

Monochrome on purpose

The model ships with full PBR materials, and we throw them away. Every mesh gets its material replaced with a MeshMatcapMaterial reading a small grayscale sphere drawn on a 2D canvas, so the whole thing renders in soft monochrome with no light rig at all and stays on brand no matter what the source textures were. It’s also the cheapest possible shading. Want the real thing back? Delete the override and give the meshes a MeshStandardMaterial under an environment map, and the model’s own materials return.

Make it yours

MODEL — the glTF URL. Any single-file .glb on a CORS-friendly host drops straight in; the fit-to-box handles the rest.
Accent — defaults to --ink. The wireframe and the point cloud take it as their ink, and the shaded pass multiplies its matcap by it, so one swatch recolors all three modes.
FINISHES — a row per finish: a label plus the sphere’s material. Add a row and it joins the switch; there is no texture to ship.
Polish — shifts the loaded finish, rougher below 0 and smoother and more metallic above it. Each nudge re-bakes the sphere, which costs one frame.
SUBJECTS — one row per subject: a label, and the eight superformula numbers (or null for the loaded model). Add a row and it appears in the switch.
SEG_U / SEG_V — the sampling grid, 120 by 72. Raising it smooths Shaded and turns Wire into a wash; every subject shares it, which is what makes the morph possible.
Lobes — adds to the loaded subject’s own lobe count, live in the config panel, neutral at 0. It holds across a switch, so a shape you dial in survives the next subject.
Sharp — scales the two exponents that decide how hard each lobe pinches. Under 1 the lobes bite; over 1 they swell back toward a ball.

Reduced-motion callers get the scene without the drift: no auto-rotate, no idle loop, just a frame rendered on load and again whenever you orbit it yourself.

Credits

Lantern :: CC0 (Khronos glTF samples)Johan Gielis :: the superformula (1997)

Setup

1
<!-- Three.js via import map (ES modules) -->
2
<script type="importmap">
3
{
4
  "imports": {
5
    "three": "https://cdn.jsdelivr.net/npm/three@0.185.1/build/three.module.js",
6
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.185.1/examples/jsm/"
7
  }
8
}
9
</script>
10

11
<!-- Site tokens the styles use — swap freely -->
12
<style>
13
  :root {
14
    --font-sans: "Oracle", "Geist", system-ui, sans-serif;
15
    --font-mono: "PP Neue Montreal Mono", "Geist Mono", ui-monospace, monospace;
16
    --fs-mono-meta: 0.75rem;
17
    --paper: #d6d6d5;
18
    --ink: #1e1e1e;
19
    --ink-muted: rgba(30, 30, 30, 0.7);
20
    --surface: #fdfcfb;
21
    --fill: rgba(30, 30, 30, 0.08);
22
    --line: rgba(30, 30, 30, 0.06);
23
    --shadow-control: 0 0 0 1px rgba(30, 30, 30, 0.06), 0 2px 6px -2px rgba(30, 30, 30, 0.14);
24
    --shadow-seg: 0 0 0 1px rgba(30, 30, 30, 0.04), 0 1px 2px rgba(30, 30, 30, 0.02);
25
    --r-sm: 4px;
26
    --r-md: 6px;
27
    --s-2: 2px;
28
    --s-4: 4px;
29
    --s-8: 8px;
30
    --s-12: 12px;
31
    --s-16: 16px;
32
    --s-32: 32px;
33
    --s-40: 40px;
34
    --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
35
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
36
  }
37
</style>
38

39
<!-- Sized stage — the script fills it -->
40
<div class="stage" style="position: relative; height: 100vh; background: var(--paper);"></div>
41

42
<!-- Then the Script, inside <script type="module"> (CodePen's JS panel does this for you) -->

Style

1
.tj {
2
  position: absolute;
3
  inset: 0;
4
  overflow: hidden;
5
  font-family: var(--font-sans);
6
  --three-accent: var(--ink);
7
  cursor: grab;
8
  touch-action: none;
9
}
10

11
.tj:active {
12
  cursor: grabbing;
13
}
14

15
.tj canvas {
16
  position: absolute;
17
  inset: 0;
18
  display: block;
19
  width: 100%;
20
  height: 100%;
21
}
22

23
.tj__loading {
24
  position: absolute;
25
  left: 50%;
26
  top: 50%;
27
  translate: -50% -50%;
28
  display: flex;
29
  flex-direction: column;
30
  align-items: center;
31
  gap: var(--s-12,0.75rem);
32
  font-family: var(--font-mono);
33
  font-size: var(--fs-mono-meta,0.75rem);
34
  text-transform: uppercase;
35
  letter-spacing: 0.06em;
36
  color: var(--ink-muted);
37
  transition: opacity 0.4s ease;
38
  pointer-events: none;
39
}
40

41
.tj__loading .spin {
42
  --spin-size: 1.75rem;
43
}
44

45
.tj[data-ready] .tj__loading {
46
  opacity: 0;
47
}
48

49
.tj__bars {
50
  position: absolute;
51
  inset-block-start: var(--s-16,1rem);
52
  inset-inline-start: 50%;
53
  translate: -50% 0;
54
  z-index: 2;
55
  display: flex;
56
  flex-direction: column;
57
  align-items: center;
58
  gap: var(--s-8,0.5rem);
59
  max-inline-size: calc(100% - var(--s-32,2rem));
60
}
61

62
.tj__modes {
63
  position: relative;
64
  isolation: isolate;
65
  display: inline-flex;
66
  align-items: center;
67
  padding: var(--s-2,2px);
68
  height: var(--s-40,2.5rem);
69
  max-inline-size: 100%;
70
  background: var(--surface);
71
  border: 1px solid var(--line);
72
  border-radius: var(--r-md,6px);
73
  box-shadow: var(--shadow-control,0 1px 3px rgba(30,30,30,0.06));
74
}
75

76
.tj__pill {
77
  position: absolute;
78
  inset-block: var(--s-2,2px);
79
  inset-inline-start: var(--s-2,2px);
80
  width: 0;
81
  border-radius: var(--r-sm,4px);
82
  background: var(--fill);
83
  box-shadow: var(--shadow-seg,0 1px 2px rgba(30,30,30,0.05));
84
  transition: transform 0.4s var(--ease-out-expo,cubic-bezier(0.16,1,0.3,1)), width 0.4s var(--ease-out-expo,cubic-bezier(0.16,1,0.3,1));
85
}
86

87
.tj__seg {
88
  position: relative;
89
  z-index: 1;
90
  display: inline-flex;
91
  align-items: center;
92
  justify-content: center;
93
  min-width: 4.4rem;
94
  height: 100%;
95
  padding-inline: var(--s-12,0.75rem);
96
  border: 0;
97
  background: transparent;
98
  font-family: var(--font-mono);
99
  font-size: var(--fs-mono-meta,0.75rem);
100
  text-transform: uppercase;
101
  letter-spacing: 0.04em;
102
  color: var(--ink-muted);
103
  cursor: pointer;
104
  transition: color 0.3s var(--ease-out-quad,cubic-bezier(0.5,1,0.89,1)),scale 0.15s ease;
105
}
106

107
.tj__seg[aria-pressed="true"] {
108
  color: var(--ink);
109
}
110

111
.tj__seg:hover {
112
  color: var(--ink);
113
}
114

115
.tj__seg:active {
116
  scale: 0.94;
117
}
118

119
.tj__seg:focus-visible {
120
  outline: 2px solid var(--ink);
121
  outline-offset: -2px;
122
  border-radius: var(--r-sm,4px);
123
}
124

125
@media (max-width: 40rem) {
126
  .tj__seg {
127
    min-width: 0;
128
    padding-inline: var(--s-8,0.5rem);
129
  }
130
}
131

132
@media (prefers-reduced-motion: reduce) {
133
  .tj__pill {
134
    transition: none;
135
  }
136
}

Script

1
import * as THREE from "three";
2
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
3
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
4
import { MeshSurfaceSampler } from "three/addons/math/MeshSurfaceSampler.js";
5
import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
6
const MODEL = "https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@2bac6f8c57bf471df0d2a1e8a8ec023c7801dddf/Models/Lantern/glTF-Binary/Lantern.glb";
7
const FIT = 2.4;
8
const SEG_U = 120;
9
const SEG_V = 72;
10
const SUBJECTS = [
11
  { id: "lantern", label: "Lantern", sf: null },
12

13
  { id: "orb", label: "Orb", sf: { m1: 6, n11: 2.4, n12: 1.1, n13: 1.1, m2: 6, n21: 2.4, n22: 1.1, n23: 1.1 } },
14
  { id: "bloom", label: "Bloom", sf: { m1: 8, n11: 0.5, n12: 1.7, n13: 1.7, m2: 8, n21: 0.5, n22: 1.7, n23: 1.7 } },
15
  { id: "shell", label: "Shell", sf: { m1: 3, n11: 0.7, n12: 0.6, n13: 3.2, m2: 6, n21: 1.6, n22: 0.8, n23: 0.8 } },
16
  { id: "spike", label: "Spike", sf: { m1: 12, n11: 0.3, n12: 1, n13: 1, m2: 12, n21: 0.3, n22: 1, n23: 1 } }
17
];
18
const sfRadius = (angle, m, n1, n2, n3) => {
19
  const t = m * angle / 4;
20
  const r = Math.abs(Math.cos(t)) ** n2 + Math.abs(Math.sin(t)) ** n3;
21
  const out = r === 0 ? 0 : r ** (-1 / n1);
22
  return Number.isFinite(out) ? Math.min(out, 6) : 0;
23
};
24
function sfPositions(sf, out) {
25
  let i = 0;
26
  let max = 0;
27
  for (let v = 0; v <= SEG_V; v++) {
28
    const lat = -Math.PI / 2 + Math.PI * v / SEG_V;
29
    const r2 = sfRadius(lat, sf.m2, sf.n21, sf.n22, sf.n23);
30
    const cy = Math.cos(lat);
31
    for (let u = 0; u <= SEG_U; u++) {
32
      const lon = -Math.PI + 2 * Math.PI * u / SEG_U;
33
      const r1 = sfRadius(lon, sf.m1, sf.n11, sf.n12, sf.n13);
34
      const x = r1 * Math.cos(lon) * r2 * cy;
35
      const y = r2 * Math.sin(lat);
36
      const z = r1 * Math.sin(lon) * r2 * cy;
37
      out[i++] = x;
38
      out[i++] = y;
39
      out[i++] = z;
40
      max = Math.max(max, Math.abs(x), Math.abs(y), Math.abs(z));
41
    }
42
  }
43
  const row = (SEG_U + 1) * 3;
44
  for (let v = 0; v <= SEG_V; v++) {
45
    const a = v * row;
46
    const b = a + SEG_U * 3;
47
    out[b] = out[a];
48
    out[b + 1] = out[a + 1];
49
    out[b + 2] = out[a + 2];
50
  }
51
  const k = max > 0 ? FIT / 2.9 / max : 1;
52
  for (let j = 0; j < out.length; j++) out[j] *= k;
53
}
54
function sfIndex() {
55
  const idx = new Uint32Array(SEG_U * SEG_V * 6);
56
  let i = 0;
57
  for (let v = 0; v < SEG_V; v++) {
58
    for (let u = 0; u < SEG_U; u++) {
59
      const a = v * (SEG_U + 1) + u;
60
      const b = a + 1;
61
      const c = a + SEG_U + 1;
62
      const d = c + 1;
63
      idx[i++] = a;
64
      idx[i++] = c;
65
      idx[i++] = b;
66
      idx[i++] = b;
67
      idx[i++] = c;
68
      idx[i++] = d;
69
    }
70
  }
71
  return idx;
72
}
73
const expoOut = (t) => t >= 1 ? 1 : 1 - 2 ** (-10 * t);
74
const MODES = [
75
  { id: "shaded", label: "Shaded" },
76
  { id: "wire", label: "Wire" },
77
  { id: "points", label: "Points" }
78
];
79
const FINISHES = [
80
  { id: "studio", label: "Studio", mat: { color: 15921906, roughness: 0.52, metalness: 0.05 } },
81
  { id: "chrome", label: "Chrome", mat: { color: 16777215, roughness: 0.06, metalness: 1 } },
82
  { id: "wax", label: "Wax", mat: { color: 15263976, roughness: 0.95, metalness: 0, sheen: 1 } },
83

84
  { id: "ink", label: "Ink", mat: { color: 1842204, roughness: 0.22, metalness: 0.55 } }
85
];
86
const BAKE = 256;
87
const STYLE_ID = "exp-three-style";
88
const CSS = `
89
.tj {
90
  position: absolute;
91
  inset: 0;
92
  overflow: hidden;
93
  font-family: var(--font-sans);
94
  --three-accent: var(--ink);
95
  cursor: grab;
96
  touch-action: none;
97
}
98

99
.tj:active {
100
  cursor: grabbing;
101
}
102

103
.tj canvas {
104
  position: absolute;
105
  inset: 0;
106
  display: block;
107
  width: 100%;
108
  height: 100%;
109
}
110

111
.tj__loading {
112
  position: absolute;
113
  left: 50%;
114
  top: 50%;
115
  translate: -50% -50%;
116
  display: flex;
117
  flex-direction: column;
118
  align-items: center;
119
  gap: var(--s-12,0.75rem);
120
  font-family: var(--font-mono);
121
  font-size: var(--fs-mono-meta,0.75rem);
122
  text-transform: uppercase;
123
  letter-spacing: 0.06em;
124
  color: var(--ink-muted);
125
  transition: opacity 0.4s ease;
126
  pointer-events: none;
127
}
128

129
.tj__loading .spin {
130
  --spin-size: 1.75rem;
131
}
132

133
.tj[data-ready] .tj__loading {
134
  opacity: 0;
135
}
136

137
.tj__bars {
138
  position: absolute;
139
  inset-block-start: var(--s-16,1rem);
140
  inset-inline-start: 50%;
141
  translate: -50% 0;
142
  z-index: 2;
143
  display: flex;
144
  flex-direction: column;
145
  align-items: center;
146
  gap: var(--s-8,0.5rem);
147
  max-inline-size: calc(100% - var(--s-32,2rem));
148
}
149

150
.tj__modes {
151
  position: relative;
152
  isolation: isolate;
153
  display: inline-flex;
154
  align-items: center;
155
  padding: var(--s-2,2px);
156
  height: var(--s-40,2.5rem);
157
  max-inline-size: 100%;
158
  background: var(--surface);
159
  border: 1px solid var(--line);
160
  border-radius: var(--r-md,6px);
161
  box-shadow: var(--shadow-control,0 1px 3px rgba(30,30,30,0.06));
162
}
163

164
.tj__pill {
165
  position: absolute;
166
  inset-block: var(--s-2,2px);
167
  inset-inline-start: var(--s-2,2px);
168
  width: 0;
169
  border-radius: var(--r-sm,4px);
170
  background: var(--fill);
171
  box-shadow: var(--shadow-seg,0 1px 2px rgba(30,30,30,0.05));
172
  transition: transform 0.4s var(--ease-out-expo,cubic-bezier(0.16,1,0.3,1)), width 0.4s var(--ease-out-expo,cubic-bezier(0.16,1,0.3,1));
173
}
174

175
.tj__seg {
176
  position: relative;
177
  z-index: 1;
178
  display: inline-flex;
179
  align-items: center;
180
  justify-content: center;
181
  min-width: 4.4rem;
182
  height: 100%;
183
  padding-inline: var(--s-12,0.75rem);
184
  border: 0;
185
  background: transparent;
186
  font-family: var(--font-mono);
187
  font-size: var(--fs-mono-meta,0.75rem);
188
  text-transform: uppercase;
189
  letter-spacing: 0.04em;
190
  color: var(--ink-muted);
191
  cursor: pointer;
192
  transition: color 0.3s var(--ease-out-quad,cubic-bezier(0.5,1,0.89,1)),scale 0.15s ease;
193
}
194

195
.tj__seg[aria-pressed="true"] {
196
  color: var(--ink);
197
}
198

199
.tj__seg:hover {
200
  color: var(--ink);
201
}
202

203
.tj__seg:active {
204
  scale: 0.94;
205
}
206

207
.tj__seg:focus-visible {
208
  outline: 2px solid var(--ink);
209
  outline-offset: -2px;
210
  border-radius: var(--r-sm,4px);
211
}
212

213
@media (max-width: 40rem) {
214
  .tj__seg {
215
    min-width: 0;
216
    padding-inline: var(--s-8,0.5rem);
217
  }
218
}
219

220
@media (prefers-reduced-motion: reduce) {
221
  .tj__pill {
222
    transition: none;
223
  }
224
}
225
`;
226
function injectStyle() {
227
  if (document.getElementById(STYLE_ID)) return;
228
  const el = document.createElement("style");
229
  el.id = STYLE_ID;
230
  el.textContent = CSS;
231
  document.head.appendChild(el);
232
}
233
function makeBaker(renderer) {
234
  const pmrem = new THREE.PMREMGenerator(renderer);
235
  const envRT = pmrem.fromScene(new RoomEnvironment(), 0.04);
236
  const scene = new THREE.Scene();
237
  scene.environment = envRT.texture;
238
  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.01, 10);
239
  camera.position.z = 3;
240
  const geo = new THREE.SphereGeometry(0.995, 128, 96);
241
  const mat = new THREE.MeshPhysicalMaterial({ envMapIntensity: 1.1 });
242
  scene.add(new THREE.Mesh(geo, mat));
243
  const key = new THREE.DirectionalLight(16777215, 2.4);
244
  key.position.set(-0.7, 0.85, 1);
245
  const fill = new THREE.DirectionalLight(16777215, 0.45);
246
  fill.position.set(0.9, -0.6, 0.7);
247
  scene.add(key, fill);
248
  const target = new THREE.WebGLRenderTarget(BAKE, BAKE, {
249
    depthBuffer: true,
250
    stencilBuffer: false
251
  });
252
  target.texture.colorSpace = THREE.SRGBColorSpace;
253
  target.texture.generateMipmaps = false;
254
  target.texture.minFilter = THREE.LinearFilter;
255
  const bake = (finish, polish = 0) => {
256
    mat.color.set(finish.color);
257
    mat.roughness = THREE.MathUtils.clamp(finish.roughness - polish * 0.45, 0.02, 1);
258
    mat.metalness = THREE.MathUtils.clamp(finish.metalness + Math.max(0, polish) * 0.6, 0, 1);
259
    mat.sheen = finish.sheen ?? 0;
260
    mat.needsUpdate = true;
261
    const prev = renderer.getRenderTarget();
262
    renderer.setRenderTarget(target);
263
    renderer.render(scene, camera);
264
    renderer.setRenderTarget(prev);
265
    return target.texture;
266
  };
267
  const dispose = () => {
268
    geo.dispose();
269
    mat.dispose();
270
    target.dispose();
271
    envRT.dispose();
272
    pmrem.dispose();
273
  };
274
  return { bake, texture: target.texture, dispose };
275
}
276
const experiment = {
277
  mount(root) {
278
    injectStyle();
279
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
280
    const P = { spin: 0.9, pointSize: 0.02 };
281
    let accentHex = null;
282
    const ac = new AbortController();
283
    const { signal } = ac;
284
    const wrap = document.createElement("div");
285
    wrap.className = "tj";
286
    wrap.innerHTML = `<p class="tj__loading"><span class="spin"></span>Loading model</p>
287
      <div class="tj__bars">
288
        <div class="tj__modes" role="group" aria-label="Subject" style="--segs:${SUBJECTS.length}">
289
          <span class="tj__pill" data-subject-pill aria-hidden="true"></span>
290
          ${SUBJECTS.map(
291
      (x, i) => `<button class="tj__seg" type="button" data-subject="${x.id}" aria-pressed="${i === 0}">${x.label}</button>`
292
    ).join("")}
293
        </div>
294
        <div class="tj__modes" role="group" aria-label="Render mode" style="--segs:${MODES.length}">
295
          <span class="tj__pill" data-mode-pill aria-hidden="true"></span>
296
          ${MODES.map(
297
      (m, i) => `<button class="tj__seg" type="button" data-mode="${m.id}" aria-pressed="${i === 0}">${m.label}</button>`
298
    ).join("")}
299
        </div>
300
      </div>`;
301
    root.appendChild(wrap);
302
    const pill = wrap.querySelector("[data-mode-pill]");
303
    const subjectPill = wrap.querySelector("[data-subject-pill]");
304
    const segs = [...wrap.querySelectorAll("[data-mode]")];
305
    const subjectSegs = [...wrap.querySelectorAll("[data-subject]")];
306
    let ink = 1973790;
307
    const resolveInk = () => {
308
      const probe = document.createElement("span");
309
      probe.style.cssText = "color:var(--ink);position:absolute;visibility:hidden";
310
      wrap.appendChild(probe);
311
      const m = getComputedStyle(probe).color.match(/\d+/g);
312
      probe.remove();
313
      if (m) ink = Number(m[0]) << 16 | Number(m[1]) << 8 | Number(m[2]);
314
    };
315
    resolveInk();
316
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
317
    renderer.setClearColor(0, 0);
318
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
319
    wrap.appendChild(renderer.domElement);
320
    const scene = new THREE.Scene();
321
    const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 100);
322
    camera.position.set(0, 0.15, FIT * 2.4);
323
    const controls = new OrbitControls(camera, renderer.domElement);
324
    controls.enablePan = false;
325
    controls.minDistance = FIT * 1.4;
326
    controls.maxDistance = FIT * 4.5;
327
    controls.minPolarAngle = 0.15;
328
    controls.maxPolarAngle = Math.PI * 0.9;
329
    controls.enableDamping = !reduced;
330
    controls.dampingFactor = 0.08;
331
    controls.autoRotate = !reduced;
332
    controls.autoRotateSpeed = P.spin;
333
    const baker = makeBaker(renderer);
334
    let finish = "studio";
335
    let polish = 0;
336
    const bakeFinish = () => baker.bake(FINISHES.find((f) => f.id === finish).mat, polish);
337
    bakeFinish();
338
    const shadedMat = new THREE.MeshMatcapMaterial({ matcap: baker.texture });
339
    const wireMat = new THREE.MeshBasicMaterial({
340
      color: ink,
341
      wireframe: true,
342
      transparent: true,
343
      opacity: 0.55
344
    });
345
    const pointsMat = new THREE.PointsMaterial({ color: ink, size: P.pointSize });
346
    const lanternRoot = new THREE.Group();
347
    const sfRoot = new THREE.Group();
348
    const SWAP_MIN = 0.02;
349
    const SWAP_DUR = 0.7;
350
    sfRoot.visible = false;
351
    sfRoot.scale.setScalar(SWAP_MIN);
352
    scene.add(lanternRoot, sfRoot);
353
    const geoms =  new Set();
354
    const sampledGeoms =  new Set();
355
    const reps = { shaded: null, wire: null, points: null };
356
    let mode = "shaded";
357
    let subject = SUBJECTS[0].id;
358
    let raf = 0;
359
    let disposed = false;
360
    const render = () => renderer.render(scene, camera);
361
    const sfCount = (SEG_U + 1) * (SEG_V + 1);
362
    const sfPos = new Float32Array(sfCount * 3);
363
    const sfFrom = new Float32Array(sfCount * 3);
364
    const sfTo = new Float32Array(sfCount * 3);
365
    const sfGeo = new THREE.BufferGeometry();
366
    sfGeo.setIndex(new THREE.BufferAttribute(sfIndex(), 1));
367
    sfGeo.setAttribute("position", new THREE.BufferAttribute(sfPos, 3));
368
    const dials = { lobes: 0, sharp: 1 };
369
    const resolve = (sf) => ({
370
      ...sf,
371
      m1: Math.max(1, sf.m1 + dials.lobes),
372
      m2: Math.max(1, sf.m2 + dials.lobes),
373
      n12: sf.n12 * dials.sharp,
374
      n13: sf.n13 * dials.sharp,
375
      n22: sf.n22 * dials.sharp,
376
      n23: sf.n23 * dials.sharp
377
    });
378
    let sfActive = SUBJECTS.find((x) => x.sf).sf;
379
    sfPositions(sfActive, sfPos);
380
    const sfMesh = new THREE.Mesh(sfGeo, shadedMat);
381
    const sfWire = new THREE.Mesh(sfGeo, wireMat);
382
    const sfPoints = new THREE.Points(sfGeo, pointsMat);
383
    sfRoot.add(sfMesh, sfWire, sfPoints);
384
    const sfReps = { shaded: sfMesh, wire: sfWire, points: sfPoints };
385
    const flush = () => {
386
      sfGeo.getAttribute("position").needsUpdate = true;
387
      sfGeo.computeVertexNormals();
388
      sfGeo.computeBoundingSphere();
389
    };
390
    flush();
391
    let morphT = 1;
392
    let morphDur = 0.9;
393
    const morphTo = (sf, dur = 0.9) => {
394
      sfActive = sf;
395
      sfPositions(sf, sfTo);
396
      if (reduced) {
397
        sfPos.set(sfTo);
398
        morphT = 1;
399
        flush();
400
        render();
401
        return;
402
      }
403
      sfFrom.set(sfPos);
404
      morphT = 0;
405
      morphDur = dur;
406
    };
407
    let swap = null;
408
    const swapNow = (out, into) => {
409
      out.visible = false;
410
      out.scale.setScalar(1);
411
      into.visible = true;
412
      into.scale.setScalar(1);
413
    };
414
    const place = (pill2, btn) => {
415
      if (!btn || !btn.offsetWidth) return;
416
      pill2.style.width = `${btn.offsetWidth}px`;
417
      pill2.style.transform = `translateX(${btn.offsetLeft - 2}px)`;
418
    };
419
    const sync = () => {
420
      Object.keys(sfReps).forEach((k) => {
421
        sfReps[k].visible = k === mode;
422
        if (reps[k]) reps[k].visible = k === mode;
423
      });
424
      segs.forEach((s) => s.setAttribute("aria-pressed", String(s.dataset.mode === mode)));
425
      subjectSegs.forEach(
426
        (s) => s.setAttribute("aria-pressed", String(s.dataset.subject === subject))
427
      );
428
      place(pill, segs.find((s) => s.dataset.mode === mode));
429
      place(subjectPill, subjectSegs.find((s) => s.dataset.subject === subject));
430
    };
431
    const applyMode = (next) => {
432
      mode = next;
433
      sync();
434
      if (reduced) render();
435
    };
436
    const applySubject = (id) => {
437
      const next = SUBJECTS.find((x) => x.id === id);
438
      if (!next || id === subject) return;
439
      const leavingModel = !SUBJECTS.find((x) => x.id === subject)?.sf;
440
      subject = id;
441
      sync();
442
      if (next.sf && !leavingModel) {
443
        morphTo(resolve(next.sf));
444
      } else if (next.sf) {
445
        sfPositions(resolve(next.sf), sfPos);
446
        sfActive = resolve(next.sf);
447
        morphT = 1;
448
        flush();
449
        if (reduced) swapNow(lanternRoot, sfRoot);
450
        else swap = { out: lanternRoot, in: sfRoot, t: 0 };
451
      } else if (reduced) swapNow(sfRoot, lanternRoot);
452
      else swap = { out: sfRoot, in: lanternRoot, t: 0 };
453
      if (reduced) render();
454
    };
455
    const tick = (dt) => {
456
      if (morphT < 1) {
457
        morphT = Math.min(1, morphT + dt / morphDur);
458
        const e = expoOut(morphT);
459
        for (let i = 0; i < sfPos.length; i++) sfPos[i] = sfFrom[i] + (sfTo[i] - sfFrom[i]) * e;
460
        flush();
461
      }
462
      if (swap) {
463
        swap.t = Math.min(1, swap.t + dt / SWAP_DUR);
464
        if (swap.t < 0.5) {
465
          const e = expoOut(swap.t * 2);
466
          swap.out.scale.setScalar(1 + (SWAP_MIN - 1) * e);
467
        } else {
468
          if (swap.out.visible) {
469
            swap.out.visible = false;
470
            swap.in.visible = true;
471
          }
472
          const e = expoOut((swap.t - 0.5) * 2);
473
          swap.in.scale.setScalar(SWAP_MIN + (1 - SWAP_MIN) * e);
474
        }
475
        if (swap.t >= 1) {
476
          swap.in.scale.setScalar(1);
477
          swap = null;
478
        }
479
      }
480
    };
481
    const loader = new GLTFLoader();
482
    loader.load(
483
      MODEL,
484
      (gltf) => {
485
        if (disposed) return;
486
        const model = gltf.scene;
487
        model.traverse((o) => {
488
          if (o.isMesh) {
489
            const mesh = o;
490
            mesh.material = shadedMat;
491
            geoms.add(mesh.geometry);
492
          }
493
        });
494
        const box = new THREE.Box3().setFromObject(model);
495
        const size2 = box.getSize(new THREE.Vector3());
496
        model.scale.multiplyScalar(FIT / Math.max(size2.x, size2.y, size2.z));
497
        box.setFromObject(model);
498
        model.position.sub(box.getCenter(new THREE.Vector3()));
499
        const wire = model.clone();
500
        wire.traverse((o) => {
501
          if (o.isMesh) o.material = wireMat;
502
        });
503
        const points = model.clone();
504
        const pMeshes = [];
505
        points.traverse((o) => {
506
          if (o.isMesh) pMeshes.push(o);
507
        });
508
        const areas = pMeshes.map((m) => {
509
          m.geometry.computeBoundingBox();
510
          const s = m.geometry.boundingBox.getSize(new THREE.Vector3());
511
          return 2 * (s.x * s.y + s.y * s.z + s.z * s.x) || 1;
512
        });
513
        const areaSum = areas.reduce((a, b) => a + b, 0) || 1;
514
        const BUDGET = 2e4;
515
        const tmp = new THREE.Vector3();
516
        pMeshes.forEach((mesh, i) => {
517
          const n = Math.max(400, Math.round(BUDGET * areas[i] / areaSum));
518
          const sampler = new MeshSurfaceSampler(mesh).build();
519
          const pos = new Float32Array(n * 3);
520
          for (let k = 0; k < n; k++) {
521
            sampler.sample(tmp);
522
            pos[k * 3] = tmp.x;
523
            pos[k * 3 + 1] = tmp.y;
524
            pos[k * 3 + 2] = tmp.z;
525
          }
526
          const geo = new THREE.BufferGeometry();
527
          geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
528
          sampledGeoms.add(geo);
529
          const p = new THREE.Points(geo, pointsMat);
530
          p.position.copy(mesh.position);
531
          p.quaternion.copy(mesh.quaternion);
532
          p.scale.copy(mesh.scale);
533
          mesh.parent?.add(p);
534
          mesh.parent?.remove(mesh);
535
        });
536
        reps.shaded = model;
537
        reps.wire = wire;
538
        reps.points = points;
539
        lanternRoot.add(model, wire, points);
540
        sync();
541
        wrap.dataset.ready = "";
542
        if (reduced) render();
543
      },
544
      void 0,
545
      (err) => console.error("[lab] threejs-test model failed", err)
546
    );
547
    const size = () => {
548
      const w = wrap.clientWidth;
549
      const h = wrap.clientHeight;
550
      if (!w || !h) return;
551
      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
552
      renderer.setSize(w, h, false);
553
      camera.aspect = w / h;
554
      camera.updateProjectionMatrix();
555
      sync();
556
      if (reduced) render();
557
    };
558
    const ro = new ResizeObserver(size);
559
    ro.observe(wrap);
560
    size();
561
    const inkColor = () => {
562
      const c = accentHex ?? ink;
563
      wireMat.color.set(c);
564
      pointsMat.color.set(c);
565
      shadedMat.color.set(accentHex ?? 16777215);
566
    };
567
    inkColor();
568
    const themeObs = new MutationObserver(() => {
569
      resolveInk();
570
      inkColor();
571
      if (reduced) render();
572
    });
573
    themeObs.observe(document.documentElement, {
574
      attributes: true,
575
      attributeFilter: ["data-theme", "class"]
576
    });
577
    segs.forEach(
578
      (s) => s.addEventListener("click", () => applyMode(s.dataset.mode), { signal })
579
    );
580
    subjectSegs.forEach(
581
      (s) => s.addEventListener("click", () => applySubject(s.dataset.subject), { signal })
582
    );
583
    sync();
584
    if (reduced) {
585
      controls.addEventListener("change", render);
586
    } else {
587
      let last = performance.now();
588
      const loop = (now) => {
589
        raf = requestAnimationFrame(loop);
590
        const dt = Math.min(0.1, (now - last) / 1e3);
591
        last = now;
592
        tick(dt);
593
        controls.update();
594
        render();
595
      };
596
      raf = requestAnimationFrame(loop);
597
    }
598
    const set = (key, value) => {
599
      if (key === "spin") {
600
        P.spin = Number(value);
601
        controls.autoRotateSpeed = P.spin;
602
      } else if (key === "pointSize") {
603
        P.pointSize = Number(value);
604
        pointsMat.size = P.pointSize;
605
      } else if (key === "finish") {
606
        finish = String(value);
607
        bakeFinish();
608
      } else if (key === "polish") {
609
        polish = Number(value);
610
        bakeFinish();
611
      } else if (key === "lobes" || key === "sharp") {
612
        dials[key] = Number(value);
613
        const sf = SUBJECTS.find((x) => x.id === subject)?.sf;
614
        if (sf) morphTo(resolve(sf), 0.35);
615
      } else if (key === "accent") {
616
        accentHex = String(value).startsWith("var(") ? null : String(value);
617
        inkColor();
618
      }
619
      if (reduced) render();
620
    };
621
    const destroy = () => {
622
      disposed = true;
623
      ac.abort();
624
      cancelAnimationFrame(raf);
625
      ro.disconnect();
626
      themeObs.disconnect();
627
      controls.dispose();
628
      geoms.forEach((g) => g.dispose());
629
      sfGeo.dispose();
630
      sampledGeoms.forEach((g) => g.dispose());
631
      shadedMat.dispose();
632
      wireMat.dispose();
633
      pointsMat.dispose();
634
      baker.dispose();
635
      renderer.dispose();
636
      renderer.forceContextLoss();
637
      renderer.domElement.remove();
638
      wrap.remove();
639
    };
640
    return { destroy, set };
641
  }
642
};
643
experiment.mount(document.querySelector(".stage"));

ThreeJs Scene

Experiment coming soonLoading experiment

ThreeJs Scene — Lab experiment