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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
# Electrotechnique & Electrophysics Sandbox
Three.js + strict TypeScript + Vite, developed in Ubuntu on WSL2.
## Develop
Run in your Ubuntu terminal:
```bash
cd /home/victor/projects/geekedin
npm install
npm run dev
```
Open http://localhost:5173 in your Windows browser. The dev server binds to
127.0.0.1 by default and Vite provides hot module replacement.
Use a browser with WebGL and hardware acceleration enabled.
Node.js 22.12+ is required; `.nvmrc` selects Node 22 if you use nvm.
For a fresh checkout with a lockfile, use `npm ci` for repeatable installs.
## Commands
- `npm run dev`: development server, hot reload.
- `npm run typecheck`: strict TypeScript check.
- `npm test`: physics unit tests with Vitest.
- `npm run test:e2e`: Chromium browser checks with Playwright.
- `npm run build`: type check and production bundle in `dist/`.
- `npm run preview`: preview the production build at http://localhost:4173.
## Eight experiments from PLAN.md
The app now opens with **Test 4 in 3D**, a guided study collection based on
`docs/Test_4.md` and `docs/Test_Answers.md`. Select **All experiments** to
return to the original eight subjects. All previous subject links work.
| Test question | 3D learning activity | URL fragment |
| --- | --- | --- |
| 1 · Work by the electric force (30p) | Compare straight and curved paths with the same endpoints | `#test-work` |
| 2 · Energy conservation (15p) | Exchange potential and kinetic energy while keeping the total constant | `#test-conservation` |
| 3 · Central field (55p) | Radial motion, U(r), signed work and the exact reference at infinity | `#test-central` |
| 4 · Charge assembly (25p) | Build a tetrahedral configuration, counting each pair once | `#test-assembly` |
| 5 · Uniform field (25p) | Project an angled displacement along E | `#test-uniform` |
| 6 · Dipole rotation (50p) | Inspect force couples, signed torque, rotation work and U(θ) | `#test-dipole` |
Each question includes its original scope and subparts, adjustable numerical
examples, live observations, expandable derivations and a prediction with a
revealable explanation. Journey/rotation sliders select a position or angle,
not elapsed time. The original Markdown questions and answers are available
from the lesson links, including in the production build. Test 4A and 4B each
carry 100 points. These are teaching examples rather than an automatic grader.
Equations, derivations, inline lesson notation, control symbols and mathematical
3D annotations use KaTeX with locally bundled fonts and accessible MathML.
Long equations scroll within their own containers on narrow screens. Scene
annotations follow the camera through a CSS2D overlay, leaving orbit controls
usable.
The added models are in `src/physics/test4.ts`, lesson content in
`src/test4.ts`, scene builders in `src/scene/test4.ts`, and browser coverage
in `tests/test4.spec.ts`.
Each lesson has an interactive 3D scene, adjustable parameters, live SI
measurements, governing equations, a short explanation, a challenge and a
model/scales disclosure. Use the subject tabs or these URL fragments:
| Subject | Interactive view | URL fragment |
| --- | --- | --- |
| Electric charge, force and field | Dipole/like charges, field arrows and force on a source | `#field` |
| Electric flux and charge | Move a signed charge through a spherical Gaussian surface | `#flux` |
| Electric potential energy | Vary separation and charge, plot U(r) and field work | `#energy` |
| Electric potential and gradient | Potential landscape with field arrows and a movable probe | `#potential` |
| Capacitance | Vary plate area, gap and applied voltage | `#capacitance` |
| Dielectric materials | Polarization at fixed voltage versus fixed free charge | `#dielectric` |
| Current | Ohmic copper wire with electrons drifting against conventional current | `#current` |
| Semiconducting materials | Intrinsic, n-type and p-type silicon, carrier densities and bands | `#semiconductor` |
Drag to orbit, scroll to zoom, right-drag to pan. Focus the canvas to pan
with arrow keys. Reset the camera independently or reset the current
experiment. Settings survive switching subjects for the current page session.
URL fragments support browser back/forward and direct links. Animations can
be paused, and start paused when reduced motion is preferred. Without WebGL,
lessons, controls and measurements remain usable.
These are teaching models: electrostatics in vacuum, ideal parallel plates,
linear fully filling dielectrics, an Ohmic copper wire at fixed temperature,
and non-degenerate silicon in equilibrium at 300 K. The semiconductor lab
uses approximate reference constants disclosed in the lesson. It does not
model a p–n junction or compare real devices. Geometry, arrow lengths,
carrier populations and animation speeds use explicit visual scales.
In the isolated dielectric experiment, each parameter setting represents
charging the selected geometry in vacuum at the charging voltage, then
disconnecting and filling it with dielectric. Q is fixed while varying κ;
changing geometry or charging voltage prepares a different capacitor state.
## Verification
```bash
npm test
npm run build
# Once per development machine:
npx playwright install chromium
npm run test:e2e
```
The unit suite checks force direction, the potential gradient, energy,
Gauss's law, capacitance, fixed-Q/fixed-V dielectric behavior, current,
drift and semiconductor mass action/neutrality. Playwright checks rendered
content in all eight scenes, parameter changes, reset, history, mobile layout,
pausing and the WebGL fallback. The browser suite starts Vite if necessary.
On a minimal Ubuntu installation, Playwright may require browser libraries;
its installer can identify them (`npx playwright install-deps chromium`).
## Extend
- `src/main.ts`: subject navigation, parameter controls, lesson UI.
- `src/experiments.ts`: lesson definitions, defaults, units and measurements.
- `src/scene/lab.ts`: renderer, orbit controls, resizing and frame loop.
- `src/scene/experiments.ts`: one scene builder per topic.
- `src/scene/primitives.ts`: shared geometry/labels and GPU resource disposal.
- `src/physics/`: framework-independent SI models and unit tests.
- `tests/lab.spec.ts`: real-browser interaction and rendering checks.
Add model calculations under `src/physics/`, then connect an experiment
and a scene builder. Keep physical quantities in SI and perform display
conversion in the lesson definitions.
## WSL2 notes
Keep the project in `/home/victor/projects` for Linux file watching and I/O.
Run Node/npm in Ubuntu rather than mixing Windows and Linux installations.
For VS Code, run `code .` in Ubuntu and use its WSL extension.
If Windows cannot reach localhost, first check the URL printed by Vite (it
may choose another port if 5173 is busy). If WSL localhost forwarding is
unavailable, run `npm run dev -- --host 0.0.0.0` and access the WSL address
shown by `hostname -I`. This exposes the development server on available
interfaces; use it only on a trusted development network.
If file changes do not reload on a mounted Windows filesystem, move the
project into the Linux filesystem. Polling can be enabled in Vite config if
needed, but is unnecessary for the default project location.
## References
- [Vite getting started](https://vite.dev/guide/)
- [Three.js installation](https://threejs.org/manual/pages/installation.html)
- [OpenStax University Physics Volume 2](https://openstax.org/details/books/university-physics-volume-2)
- [OpenStax band theory of solids](https://openstax.org/books/university-physics-volume-3/pages/9-5-band-theory-of-solids)
|
