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
|
import * as THREE from 'three';
import { CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
import { renderProse } from '../math';
import type { Point } from '../physics/electricField';
export const colours = { positive: '#ff967b', negative: '#73d7ff', field: '#91e2cb', gold: '#f5d58b', muted: '#8294a8' };
export const vector = (p: Point) => new THREE.Vector3(p.x, p.y, p.z);
export function sphere(group: THREE.Group, position: Point, radius: number, colour: string): THREE.Mesh {
const mesh = new THREE.Mesh(new THREE.SphereGeometry(radius, 18, 12), new THREE.MeshStandardMaterial({ color: colour, roughness: 0.3, emissive: colour, emissiveIntensity: 0.12 }));
mesh.position.copy(vector(position));
group.add(mesh);
return mesh;
}
export function box(group: THREE.Group, position: Point, dimensions: Point, colour: string, opacity = 1): THREE.Mesh {
const mesh = new THREE.Mesh(new THREE.BoxGeometry(dimensions.x, dimensions.y, dimensions.z), new THREE.MeshStandardMaterial({ color: colour, transparent: opacity < 1, opacity, depthWrite: opacity === 1, side: THREE.DoubleSide, roughness: 0.45 }));
mesh.position.copy(vector(position));
group.add(mesh);
return mesh;
}
export function line(group: THREE.Group, points: Point[], colour: string, opacity = 1): THREE.Line {
const mesh = new THREE.Line(new THREE.BufferGeometry().setFromPoints(points.map(vector)), new THREE.LineBasicMaterial({ color: colour, transparent: opacity < 1, opacity }));
group.add(mesh);
return mesh;
}
export function arrow(group: THREE.Group, origin: Point, direction: Point, length: number, colour = colours.field): void {
const dir = vector(direction);
if (dir.lengthSq() < 1e-24) return;
group.add(new THREE.ArrowHelper(dir.normalize(), vector(origin), length, colour, Math.min(0.16, length * 0.3), Math.min(0.1, length * 0.2)));
}
export function label(group: THREE.Group, text: string, position: Point, colour: string = '#dbe7f0', width = 2, minViewportWidth = 0): THREE.Sprite | CSS2DObject {
if (text.includes('$')) {
const element = document.createElement('div');
element.className = 'scene-math-label';
element.style.color = colour;
renderProse(element, text);
const annotation = new CSS2DObject(element);
annotation.position.copy(vector(position));
annotation.onBeforeRender = () => {
element.style.visibility = (element.parentElement?.clientWidth ?? Infinity) < minViewportWidth ? 'hidden' : 'visible';
};
group.add(annotation);
return annotation;
}
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d')!;
context.font = '500 44px system-ui, sans-serif';
canvas.width = Math.ceil(context.measureText(text).width) + 36;
canvas.height = 80;
context.fillStyle = 'rgba(16, 24, 34, 0.85)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = '500 44px system-ui, sans-serif';
context.fillStyle = colour;
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText(text, canvas.width / 2, 40);
const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;
const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: texture, depthTest: false }));
sprite.position.copy(vector(position));
const aspect = canvas.width / canvas.height;
const screenHeight = 23 + Math.min(2, Math.max(-1, width - 2)) * 2;
const viewportSize = new THREE.Vector2();
const cameraPosition = new THREE.Vector3();
// Keep labels legible when the camera or viewport changes. Width hints
// affect text size slightly; the actual texture fits the text content.
sprite.onBeforeRender = (renderer, _scene, camera) => {
if (!(camera instanceof THREE.PerspectiveCamera)) return;
sprite.getWorldPosition(cameraPosition).applyMatrix4(camera.matrixWorldInverse);
renderer.getSize(viewportSize);
sprite.material.opacity = viewportSize.x < minViewportWidth ? 0 : 1;
const responsiveHeight = viewportSize.x < 600 ? screenHeight * 0.78 : screenHeight;
const worldHeight = 2 * Math.abs(cameraPosition.z) * Math.tan(THREE.MathUtils.degToRad(camera.getEffectiveFOV()) / 2) * responsiveHeight / Math.max(1, viewportSize.y);
sprite.scale.set(worldHeight * aspect, worldHeight, 1);
sprite.updateMatrixWorld();
};
group.add(sprite);
return sprite;
}
export function grid(group: THREE.Group, y = -0.25) {
const helper = new THREE.GridHelper(12, 12, 0x375066, 0x22313f);
helper.position.y = y;
group.add(helper);
}
/** Dispose shared geometries/materials once per scene replacement, including
* textures owned by generated labels. No GPU resources survive a lesson. */
export function disposeGroup(group: THREE.Group) {
const geometries = new Set<THREE.BufferGeometry>();
const materials = new Set<THREE.Material>();
const textures = new Set<THREE.Texture>();
group.traverse(object => {
const mesh = object as THREE.Mesh;
if (mesh.geometry) geometries.add(mesh.geometry);
if (mesh.material) {
const list = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
for (const material of list) {
materials.add(material);
const map = (material as THREE.MeshBasicMaterial).map;
if (map) textures.add(map);
}
}
});
geometries.forEach(geometry => geometry.dispose());
materials.forEach(material => material.dispose());
textures.forEach(texture => texture.dispose());
group.clear();
}
|
