优化四连杆测试页三维视图交互

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);
       }