From 5dfe4aaec933270611e3c8939665e117d64442b6 Mon Sep 17 00:00:00 2001
From: zhangshun <453905631@qq.com>
Date: Tue, 16 Jun 2026 11:53:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=9B=E8=BF=9E=E6=9D=86?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E9=A1=B5=E4=B8=89=E7=BB=B4=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/fourbar_test.html | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/public/fourbar_test.html b/public/fourbar_test.html
index 5b671b2..244256f 100644
--- a/public/fourbar_test.html
+++ b/public/fourbar_test.html
@@ -352,6 +352,12 @@
         display: block;
         width: 100%;
         height: 100%;
+        cursor: grab;
+        touch-action: none;
+      }
+
+      .three-viewport canvas:active {
+        cursor: grabbing;
       }
 
       .three-overlay {
@@ -746,8 +752,17 @@
 
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
     <script src="./wasm/smart_math.js"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/"
+        }
+      }
+    </script>
     <script type="module">
-      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+      import * as THREE from "three";
+      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 
       const mechanismMeta = {
         RRRP: {
@@ -1027,6 +1042,14 @@
         renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
         renderer.outputColorSpace = THREE.SRGBColorSpace;
         threeViewport.appendChild(renderer.domElement);
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.08;
+        controls.enablePan = true;
+        controls.enableZoom = true;
+        controls.screenSpacePanning = false;
+        controls.minDistance = 0.35;
+        controls.maxDistance = 80;
 
         const ambient = new THREE.AmbientLight(0xffffff, 0.58);
         const keyLight = new THREE.DirectionalLight(0xffffff, 0.9);
@@ -1069,6 +1092,7 @@
           scene,
           camera,
           renderer,
+          controls,
           group,
           objects: { crank, rod, outputLink, fixedLink, rail, slider, pointA, pointB, pointC, pointD, pathLine, sliderPathLine },
         };
@@ -1117,8 +1141,11 @@
       function resetThreeCamera(input = readInput()) {
         const view = ensureThreeView();
         const span = Math.max(input.L_AB + input.L_BS + input.L3 + input.L4 * 0.35, Math.abs(input.S_OFS) + input.L_AB, 1);
+        const target = new THREE.Vector3(span * 0.35, 0, input.S_OFS * 0.5);
         view.camera.position.set(span * 0.9, span * 1.45, span * 1.75);
-        view.camera.lookAt(span * 0.35, 0, input.S_OFS * 0.5);
+        view.camera.lookAt(target);
+        view.controls.target.copy(target);
+        view.controls.update();
       }
 
       // 依据机构参数固定导轨显示范围，避免播放时导轨随滑块位置伸缩。
@@ -1221,6 +1248,7 @@
       // Three.js 持续渲染循环。
       function renderThreeFrame() {
         if (!threeView) return;
+        threeView.controls.update();
         threeView.renderer.render(threeView.scene, threeView.camera);
       }