Update main.js

main.js

@@ -108,19 +108,32 @@ function createUI() {
 }
 
 // --- 新增：设置缩放按钮的功能 ---
+// --- 修改后的函数：设置缩放按钮的功能 ---
 function setupZoomControls() {
     const zoomInBtn = document.getElementById('zoom-in-btn');
     const zoomOutBtn = document.getElementById('zoom-out-btn');
-    const zoomStep = 0.9; // 缩放步长
+    const zoomScale = 1.2; // 定义一个缩放因子，大于1
 
     zoomInBtn.addEventListener('click', () => {
-        controls.dollyIn(1 / zoomStep);
-        controls.update();
+        // --- 直接修改相机位置 ---
+        // 获取从相机指向目标点的向量
+        const offset = new THREE.Vector3().subVectors(camera.position, controls.target);
+        // 将这个向量缩短 (除以一个大于1的数)
+        offset.multiplyScalar(1 / zoomScale);
+        // 将新的向量加回到目标点，得到相机的新位置
+        camera.position.copy(controls.target).add(offset);
+        
+        // 我们不需要手动调用 controls.update()，因为 render 循环会做这件事
     });
 
     zoomOutBtn.addEventListener('click', () => {
-        controls.dollyOut(1 / zoomStep);
-        controls.update();
+        // --- 直接修改相机位置 ---
+        // 获取从相机指向目标点的向量
+        const offset = new THREE.Vector3().subVectors(camera.position, controls.target);
+        // 将这个向量拉长 (乘以一个大于1的数)
+        offset.multiplyScalar(zoomScale);
+        // 将新的向量加回到目标点，得到相机的新位置
+        camera.position.copy(controls.target).add(offset);
     });
 }