1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js';
import type { ExperimentId, Parameters } from '../experiments';
import { buildExperiment, type Animate } from './experiments';
import { disposeGroup } from './primitives';
export function createLab(viewport: HTMLElement) {
let renderer: THREE.WebGLRenderer;
try {
renderer = new THREE.WebGLRenderer({ antialias: true });
} catch {
const error = document.createElement('div');
error.className = 'webgl-error';
error.setAttribute('role', 'alert');
error.textContent = 'WebGL could not start. Enable browser hardware acceleration and reload to see the 3D scenes. Lessons, controls and measurements still work.';
viewport.append(error);
return { update: () => {}, resetCamera: (_id?: ExperimentId) => {}, setPaused: () => {}, dispose: () => {} };
}
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.domElement.setAttribute('aria-label', '3D experiment: drag to orbit, scroll to zoom, right-drag to pan');
renderer.domElement.setAttribute('tabindex', '0');
viewport.append(renderer.domElement);
const labels = new CSS2DRenderer();
labels.domElement.className = 'scene-labels';
viewport.append(labels.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color('#101822');
scene.add(new THREE.HemisphereLight(0xe9f7ff, 0x263149, 3));
const keyLight = new THREE.DirectionalLight(0xffffff, 2);
keyLight.position.set(3, 6, 5);
scene.add(keyLight);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.minDistance = 3;
controls.maxDistance = 32;
controls.listenToKeyEvents(renderer.domElement);
let currentId: ExperimentId | undefined;
let framingScale = 1;
const fitScale = (aspect: number) => currentId?.startsWith('test-') ? Math.max(1, Math.min(2, 1.1 / aspect)) : 1;
function resetCamera(id = currentId) {
currentId = id;
const { width, height } = viewport.getBoundingClientRect();
framingScale = fitScale(width / Math.max(1, height));
if (currentId?.startsWith('test-')) camera.position.set(3.7, 5, 14.5).multiplyScalar(framingScale);
else camera.position.set(8, 7.5, 11);
controls.target.set(0, 0, 0);
controls.update();
}
resetCamera();
let group = new THREE.Group();
scene.add(group);
let animate: Animate = () => {};
let paused = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let lastTime = 0;
let pending: { id: ExperimentId; parameters: Parameters } | undefined;
function update(id: ExperimentId, parameters: Parameters) {
// Coalesce range events to one rebuild per animation frame.
pending = { id, parameters: { ...parameters } };
}
const observer = new ResizeObserver(() => {
const { width, height } = viewport.getBoundingClientRect();
if (width <= 0 || height <= 0) return;
renderer.setSize(width, height);
labels.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
const nextScale = fitScale(camera.aspect);
camera.position.sub(controls.target).multiplyScalar(nextScale / framingScale).add(controls.target);
framingScale = nextScale;
controls.update();
});
observer.observe(viewport);
renderer.domElement.addEventListener('webglcontextlost', event => {
event.preventDefault();
if (!viewport.querySelector('[role="alert"]')) {
const warning = document.createElement('p');
warning.setAttribute('role', 'alert');
warning.className = 'webgl-error';
warning.textContent = 'WebGL context lost. Reload to restore the 3D view. Numeric experiments still work.';
viewport.append(warning);
}
});
renderer.setAnimationLoop(time => {
const delta = lastTime ? Math.min((time - lastTime) / 1000, 0.05) : 0;
lastTime = time;
if (pending) {
disposeGroup(group);
scene.remove(group);
group = new THREE.Group();
scene.add(group);
animate = buildExperiment(group, pending.id, pending.parameters);
pending = undefined;
}
if (!paused && !document.hidden) animate(delta);
controls.update();
renderer.render(scene, camera);
labels.render(scene, camera);
});
return {
update,
resetCamera,
setPaused: (value: boolean) => { paused = value; },
dispose: () => {
renderer.setAnimationLoop(null);
observer.disconnect();
controls.dispose();
disposeGroup(group);
renderer.dispose();
renderer.domElement.remove();
labels.domElement.remove();
},
};
}
|
