From c9e76d0850c1c69859a940876f0fc1ebf0fc6889 Mon Sep 17 00:00:00 2001
From: zhangshun <453905631@qq.com>
Date: Tue, 16 Jun 2026 11:03:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=B8=89=E7=BB=B4=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=AF=BC=E8=BD=A8=E9=95=BF=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/fourbar_test.html | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/public/fourbar_test.html b/public/fourbar_test.html
index 7f6148c..5e63704 100644
--- a/public/fourbar_test.html
+++ b/public/fourbar_test.html
@@ -716,9 +716,10 @@
     </main>
 
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.160.1/build/three.min.js"></script>
     <script src="./wasm/smart_math.js"></script>
-    <script>
+    <script type="module">
+      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+
       const validSample = {
         L_AB: 0.5,
         L_BS: 2.0,
@@ -860,10 +861,6 @@
 
       // 初始化 Three.js 场景，负责更直观地展示接口返回的机构姿态。
       function ensureThreeView() {
-        if (!window.THREE) {
-          throw new Error("Three.js 加载失败，请检查网络或 CDN 可用性");
-        }
-
         if (threeView) return threeView;
 
         const scene = new THREE.Scene();
@@ -960,6 +957,20 @@
         view.camera.lookAt(span * 0.35, 0, input.S_OFS * 0.5);
       }
 
+      // 依据机构参数固定导轨显示范围，避免播放时导轨随滑块位置伸缩。
+      function getFixedRailRange(input) {
+        const crank = Math.max(input.L_AB, 0);
+        const rod = Math.max(input.L_BS, 0);
+        const yDeltaMax = Math.abs(input.S_OFS) + crank;
+        const reachableXOffset = Math.sqrt(Math.max(0, rod ** 2 - yDeltaMax ** 2));
+        const minX = -crank - 0.35;
+        const maxX = crank + reachableXOffset + 0.7;
+        return {
+          minX: Math.min(minX, maxX - 0.8),
+          maxX: Math.max(maxX, minX + 0.8),
+        };
+      }
+
       // 调整 Three.js 画布尺寸。
       function resizeThreeView() {
         if (!threeView) return;
@@ -981,14 +992,14 @@
         const a = points.A || points.pointA;
         const b = points.B || points.pointB;
         const s = points.S || points.pointS;
-        const railHalfLength = Math.max(input.L_AB + input.L_BS + Math.abs(input.S_OFS), Math.abs(s.x) + 0.8, 1);
+        const railRange = getFixedRailRange(input);
 
         placeBar(view.objects.crank, a, b);
         placeBar(view.objects.rod, b, s);
         placeBar(
           view.objects.rail,
-          { x: -railHalfLength * 0.25, y: input.S_OFS },
-          { x: railHalfLength, y: input.S_OFS },
+          { x: railRange.minX, y: input.S_OFS },
+          { x: railRange.maxX, y: input.S_OFS },
         );
 
         view.objects.pointA.position.copy(toThreePoint(a));