Electrotechnique & Electrophysics Sandbox

Three.js + strict TypeScript + Vite, developed in Ubuntu on WSL2.

Develop

Run in your Ubuntu terminal:

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

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.