From cc95b2a2e8c2ca740564b6970744d5b5fda3b54a Mon Sep 17 00:00:00 2001 From: ro Date: Thu, 12 Feb 2026 15:14:07 +0200 Subject: [PATCH] Add Three.js 3D pane below 2D simulator --- README.md | 10 ++- index.html | 28 +++++++- src/main.js | 48 +++++++++++++ src/renderer3d.js | 174 ++++++++++++++++++++++++++++++++++++++++++++++ src/ui.js | 12 ++++ styles.css | 45 +++++++++++- 6 files changed, 309 insertions(+), 8 deletions(-) create mode 100644 src/renderer3d.js diff --git a/README.md b/README.md index 9109951..c63d568 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Walker Linkage Web Simulator -2D browser simulator of the walker linkage from [`linkage.svg`](linkage.svg), implemented with HTML Canvas and pure kinematics. +2D + 3D browser simulator of the walker linkage from [`linkage.svg`](linkage.svg), implemented with HTML Canvas for the top pane and Three.js for the lower pane. ## Features @@ -22,17 +22,19 @@ - Presets save/load for named dimension setups (persisted in browser local storage). - Foot trajectory traces for both sides. - Optional linkage annotation overlay (joint and link labels). +- Optional real-time 3D viewport with orbit camera and camera reset. - Diagnostics panel with closure error and fallback counters. ## File layout -- [`index.html`](index.html): Canvas + control panel shell -- [`styles.css`](styles.css): App layout and styling +- [`index.html`](index.html): 2D + 3D viewport shell and control panel +- [`styles.css`](styles.css): Stacked view layout and styling - [`src/main.js`](src/main.js): bootstrap, animation loop, integration - [`src/math.js`](src/math.js): vector math and circle intersection - [`src/geometry.js`](src/geometry.js): normalized points and derived lengths - [`src/kinematics.js`](src/kinematics.js): mechanism solve for near/far sides - [`src/renderer.js`](src/renderer.js): Canvas rendering pipeline +- [`src/renderer3d.js`](src/renderer3d.js): Three.js scene, camera, and 3D linkage rendering - [`src/trace.js`](src/trace.js): trajectory buffers - [`src/ui.js`](src/ui.js): controls + diagnostics text @@ -40,6 +42,8 @@ Any static server is enough. +No build step is required. Three.js is loaded via ESM URL imports. + Example with Python: ```bash diff --git a/index.html b/index.html index cfab39e..e3b9807 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,26 @@ Walker Linkage Simulator +
-
- +
+
+

2D View

+ +
+ +
+

3D View

+
+