点云

src/pages/modules/building.vue

@@ -16,6 +16,7 @@
       :title="$t('SetUpStation')"
       :visible.sync="dialogVisible"
       :close-on-click-modal="false"
+      :close-on-press-escape="false"
       width="55%">
       <el-form :model="dataForm" ref="dataForm" :rules="dataRule" :label-width="$i18n.locale === 'en-us' ? '' : '1.1rem'" size="mini">
         <el-form-item :label="$t('StationName')" prop="stationName">
@@ -49,7 +50,7 @@
 </template>
 
 <script>
-import GlMap from './gl-map-2.vue'
+import GlMap from './gl-map-3.vue'
 import { driver } from 'driver.js'
 import 'driver.js/dist/driver.css'
 // import { startMapping } from '../../config/mork.js'

src/pages/modules/gl-map-3.vue

@@ -1,82 +1,60 @@
 <template>
   <div class="point-cloud-map">
-    <div ref="canvasContainer" class="canvas-container"></div>
+    <div ref="canvasContainer" class="canvas-container">
-    <!-- 定位按钮 -->
+      <canvas ref="pointCloudCanvas"></canvas>
-    <el-button icon="el-icon-location" size="mini" class="locate-button" @click="locateCarToCenter">
-    </el-button>
-    <div v-if="isLoading" class="loading-indicator">
-      <i class="fa fa-circle-o-notch fa-spin"></i> {{ $t('Loading') }}
     </div>
+    <el-button icon="el-icon-location" size="mini" class="locate-button" @click="locateCar">
+    </el-button>
+    <div v-if="isLoading" class="loading-indicator">{{ $t('Loading') }}</div>
   </div>
 </template>
 
 <script>
+/* eslint-disable */
 import * as THREE from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { mapGetters } from 'vuex'
 // import { points } from '../../config/point.js'
 // import { points1 } from '../../config/point1.js'
 // import { points2 } from '../../config/point2.js'
-
-// 常量定义
-const UPDATE_INTERVAL = 800
-const DEFAULT_VIEW_SIZE = 20
-const BOUND_MARGIN = 0.1
-const MIN_ZOOM_RATIO = 1.0  // 最小缩放比例调整为1.0，避免过度缩小
-const MAX_ZOOM_RATIO = 3    // 最大缩放比例
-const AUTO_ADJUST_THRESHOLD = 100 // 每新增100个点检查是否需要调整视口
-const BOUND_PADDING = 5     // 边界额外留白
-
 export default {
   name: 'PointCloudMap',
   data() {
     return {
-      // Three.js核心对象
+      // Three.js相关
       scene: null,
       camera: null,
       renderer: null,
-      controls: null,
+      pointCloud: null,
-      
+      pointMaterial: null,
-      // 点云相关
+      pointGeometry: null,
-      pointCloudGeometry: null,
-      pointCloudMaterial: null,
-      pointCloudMesh: null,
-      allPoints: [],
-      pointCount: 0,
-      pointScale: 1.0,
-      newPointsSinceLastAdjust: 0, // 新增点计数器
-      
-      // 小车相关
-      vehicleImage: require('../../images/new/agv.png'),
       carMesh: null,
       carTexture: null,
-      
+      axesHelper: null,
+      gridHelper: null,
+      // 点云数据
+      allPoints: [],
+      pointCount: 0,
+      maxPoints: 1000000, // 最大点数限制
+      // 小车相关
+      vehicleImage: require('../../images/new/agv.png'),
+      carMovementEnabled: true,
+      carSize: 30,
+      // 视图控制
+      isDragging: false,
+      previousTouchX: 0,
+      previousTouchY: 0,
+      cameraX: 0,
+      cameraY: 0,
+      cameraZoom: 1,
+      initialPinchDistance: null,
+      initialZoom: null,
+      // UI控制
+      pointSize: 1.5,
       // WebSocket相关
       socket: null,
       isLoading: true,
-      reconnectTimer: null,
+      reconnectTimer: null, // 重连计时器
-      
+      animationFrameId: null
-      // 动画与性能
-      viewSize: DEFAULT_VIEW_SIZE,
-      animationId: null,
-      lastUpdateTime: 0,
-      updateInterval: UPDATE_INTERVAL,
-      
-      // 点云边界
-      pointBounds: {
-        minX: Infinity,
-        maxX: -Infinity,
-        minY: Infinity,
-        maxY: -Infinity
-      },
-      
-      isDestroyed: false,
-      baseViewSize: 0,
-      // 画布尺寸（正方形）
-      canvasSize: {
-        width: 0,
-        height: 0
-      }
     }
   },
   computed: {
@@ -90,184 +68,271 @@ export default {
       deep: true
     }
   },
-  mounted() {
-    this.initializeComponent()
-    // 监听窗口大小变化
-    window.addEventListener('resize', this.handleWindowResize)
-  },
   beforeDestroy() {
-    this.cleanup()
+    this.cleanupResources();
-    // 移除窗口大小变化监听
-    window.removeEventListener('resize', this.handleWindowResize)
   },
-  methods: {   
+  methods: {
-    initializeComponent() {
+    cleanupResources() {
-      // 设置画布为正方形（仅初始化时设置一次）
+      if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
-      this.setCanvasSizeAsSquare()
+      if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId)
-      this.initThreeJs()
+      this.closeWebSocket()
-      this.initControls()
+      // 清理Three.js资源
-      this.initPointCloud()
+      if (this.renderer) {
-      this.initCar()
+        this.renderer.dispose();
-      this.startAnimationLoop()
+        this.renderer.forceContextLoss();
-    },
+        this.renderer = null;
-    
-    /**
-     * 设置画布为正方形（宽高等于容器初始宽度）
-     */
-    setCanvasSizeAsSquare() {
-      const container = this.$refs.canvasContainer
-      // 获取容器初始宽度
-      const containerWidth = container.clientWidth
-      // 设置宽高相等（正方形），仅初始化时计算一次
-      this.canvasSize.width = containerWidth
-      this.canvasSize.height = containerWidth
-    },
-    
-    initThreeJs() {
-      const container = this.$refs.canvasContainer
-      const aspect = this.canvasSize.width / this.canvasSize.height // 正方形画布，aspect=1
-      
-      this.scene = new THREE.Scene()
-      
-      this.camera = new THREE.OrthographicCamera(
-        -this.viewSize * aspect / 2,
-        this.viewSize * aspect / 2,
-        this.viewSize / 2,
-        -this.viewSize / 2,
-        0.1,
-        1000
-      )
-      this.camera.position.z = 100
-      
-      this.renderer = new THREE.WebGLRenderer({ 
-        antialias: true,
-        alpha: true,
-        transparent: true
-      })
-      // 使用初始化时计算的正方形尺寸
-      this.renderer.setSize(this.canvasSize.width, this.canvasSize.height)
-      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-      this.renderer.setClearAlpha(0)
-      container.appendChild(this.renderer.domElement)
-    },
-    
-    initControls() {
-      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
-      this.controls.enableRotate = false // 禁用旋转
-      this.controls.enableZoom = true
-      this.controls.enablePan = true
-      this.controls.screenSpacePanning = true
-      this.controls.touchZoomSpeed = 1
-      this.controls.panSpeed = 1
-      this.controls.touches = {
-        ONE: THREE.TOUCH.PAN,
-        TWO: THREE.TOUCH.DOLLY_PAN
       }
-
+      if (this.pointGeometry) {
-      // 锁定视角为正上方，避免视角倾斜导致的显示问题
+        this.pointGeometry.dispose();
-      this.controls.maxPolarAngle = Math.PI / 2
+        this.pointGeometry = null;
-      this.controls.minPolarAngle = Math.PI / 2
+      }
-
+      if (this.pointMaterial) {
-      // 监听控制器变化，限制相机位置
+        this.pointMaterial.dispose();
-      this.controls.addEventListener('change', () => {
+        this.pointMaterial = null;
-        this.limitCameraPosition()
+      }
-      })
+      if (this.carTexture) {
-
+        this.carTexture.dispose();
-      this.controls.addEventListener('error', (event) => {
+        this.carTexture = null;
-        console.error('OrbitControls error:', event)
+      }
-      })
+      if (this.scene) {
+        this.scene.clear();
+        this.scene = null;
+      }
+      this.camera = null;
+      this.pointCloud = null;
+      this.carMesh = null;
+      this.allPoints = [];
+      this.pointCount = 0;
     },
-    
+    initThreeJS() {
-    initPointCloud() {
+      // 初始化Three.js场景
-      this.pointCloudGeometry = new THREE.BufferGeometry()
+      const container = this.$refs.canvasContainer;
-      this.pointCloudMaterial = new THREE.PointsMaterial({
+      const aspectRatio = container.clientWidth / container.clientHeight;
+      const pointRange = 2000; // 点云范围 -1000 到 1000
+      const viewHeight = pointRange;
+      const viewWidth = viewHeight * aspectRatio;
+      this.scene = new THREE.Scene();
+      this.camera = new THREE.OrthographicCamera(
+        -viewWidth / 2,
+        viewWidth / 2,
+        viewHeight / 2,
+        -viewHeight / 2,
+        0.1,
+        2000
+      );
+      this.camera.position.z = 10;
+      const canvas = this.$refs.pointCloudCanvas;
+      this.renderer = new THREE.WebGLRenderer({
+        canvas: canvas,
+        antialias: true,
+        alpha: true,  // 关键：启用alpha通道
+        transparent: true  // 关键：允许透明
+      });
+      
+      this.updateRendererSize();
+      this.createPointCloud();
+      this.createCar();
+      this.setupEventListeners();
+      this.animate();
+    },
+    createPointCloud() {
+      this.pointGeometry = new THREE.BufferGeometry();
+      this.pointMaterial = new THREE.PointsMaterial({
+        size: this.pointSize,
         color: 0xFFFFFF,
-        size: 1,
+        sizeAttenuation: false
-        sizeAttenuation: true,
+      });
-        transparent: true,
+      this.pointCloud = new THREE.Points(this.pointGeometry, this.pointMaterial);
-        opacity: 1
+      this.scene.add(this.pointCloud);
-      })
-      this.pointCloudMesh = new THREE.Points(
-        this.pointCloudGeometry, 
-        this.pointCloudMaterial
-      )
-      this.scene.add(this.pointCloudMesh)
-      this.allPoints = []
     },
-    
+    createCar() {
-    initCar() {
+      const textureLoader = new THREE.TextureLoader();
-      const loader = new THREE.TextureLoader()
+      textureLoader.load(this.vehicleImage, (texture) => {
-      this.carTexture = loader.load(this.vehicleImage, (texture) => {
+        this.carTexture = texture;
-        const material = new THREE.SpriteMaterial({
+        const carMaterial = new THREE.SpriteMaterial({ 
           map: texture,
           transparent: true,
-          opacity: 1,
+          opacity: 1
-          depthWrite: false
+        });
-        })
+        this.carMesh = new THREE.Sprite(carMaterial);
-
+        const container = this.$refs.canvasContainer;
-        this.carMesh = new THREE.Sprite(material)
+        const scale = this.carSize / container.clientHeight * 2000;
-        this.scene.add(this.carMesh)
+        this.carMesh.scale.set(scale * 1.5, scale * 1.5, 1);
-
+        this.carMesh.position.set(this.carPosition.x, this.carPosition.y, 5);
-        this.calculateCarSize()
+        this.carMesh.rotation.z = this.carPosition.angle;
-
+        this.scene.add(this.carMesh);
-        if (this.carPosition) {
+      });
-          this.updateCarPosition(this.carPosition)
-          // 初始时将小车定位到中心
-          this.locateCarToCenter()
-        }
-      }, undefined, (error) => {
-        console.error('小车图片加载失败:', error)
-      })
     },
-
+    updatePointCloud(points) {
-    calculateCarSize() {
+      if (!points || !Array.isArray(points) || points.length === 0) return;
-      if (!this.carMesh) return
+      // 添加新点
-      
+      this.allPoints = [...this.allPoints, ...points];
-      // 基于初始化的正方形画布计算小车尺寸
+      this.pointCount = this.allPoints.length;
-      const spriteSizeX = (50 / this.canvasSize.width) * this.viewSize * (this.canvasSize.width / this.canvasSize.height)
+      // 如果超过最大点数限制，移除旧点
-      const spriteSizeY = (50 / this.canvasSize.height) * this.viewSize
+      if (this.pointCount > this.maxPoints) {
-      
+        this.allPoints = this.allPoints.slice(-points.length);
-      this.carMesh.scale.set(spriteSizeX, spriteSizeY, 1)
+        this.pointCount = this.allPoints.length;
-    },
-    
-    updateCarPosition(position) {
-      if (this.carMesh && position) {
-        this.carMesh.position.x = position.x * this.pointScale
-        this.carMesh.position.y = position.y * this.pointScale
-        this.carMesh.position.z = 1
-        this.carMesh.rotation.z = position.angle
       }
+      this.updatePointCloudGeometry();
     },
-    
+    updatePointCloudGeometry() {
-    /**
+      const positions = new Float32Array(this.pointCount * 3);
-     * 定位按钮点击事件 - 将小车置于视窗中心
+      for (let i = 0; i < this.pointCount; i++) {
-     */
+        const point = this.allPoints[i];
-    locateCarToCenter() {
+        positions[i * 3] = point.x || 0;
-      if (!this.carMesh || !this.carPosition || !this.controls) return
+        positions[i * 3 + 1] = point.y || 0;
-      
+        positions[i * 3 + 2] = 0;
-      // 计算小车在世界坐标系中的位置
+      }
-      const carWorldX = this.carPosition.x * this.pointScale
+      // 清理旧的geometry属性
-      const carWorldY = this.carPosition.y * this.pointScale
+      if (this.pointGeometry.attributes.position) {
-      
+        this.pointGeometry.deleteAttribute('position');
-      // 将相机和控制器目标设置为小车位置，实现居中
+      }
-      this.controls.target.set(carWorldX, carWorldY, 0)
+      this.pointGeometry.setAttribute(
-      this.camera.position.set(carWorldX, carWorldY, 100)
+        'position', 
-      this.controls.update() // 立即更新控制器状态
+        new THREE.BufferAttribute(positions, 3)
+      );
+      this.pointGeometry.attributes.position.needsUpdate = true;
+    },
+    updateCarPosition(position) {
+      if (!this.carMovementEnabled || !this.carMesh) return;
+      this.carMesh.position.set(position.x, position.y, 5);
+      this.carMesh.rotation.z = position.angle;
+    },
+    animate() {
+      this.animationFrameId = requestAnimationFrame(this.animate);
+      this.camera.position.x = this.cameraX;
+      this.camera.position.y = this.cameraY;
+      this.camera.zoom = this.cameraZoom;
+      
+      this.camera.updateProjectionMatrix();
+      this.renderer.render(this.scene, this.camera);
+    },
+    updateRendererSize() {
+      const container = this.$refs.canvasContainer;
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      const aspectRatio = width / height;
+      const viewHeight = 2000;
+      const viewWidth = viewHeight * aspectRatio;
+      this.camera.left = -viewWidth / 2 / this.cameraZoom;
+      this.camera.right = viewWidth / 2 / this.cameraZoom;
+      this.camera.top = viewHeight / 2 / this.cameraZoom;
+      this.camera.bottom = -viewHeight / 2 / this.cameraZoom;
+      this.camera.updateProjectionMatrix();
+      this.renderer.setSize(width, height);
+    },
+    locateCar() {
+      // 将相机对准小车
+      this.cameraX = this.carPosition.x;
+      this.cameraY = this.carPosition.y;
+    },
+    setupEventListeners() {
+      const canvas = this.$refs.pointCloudCanvas;
+      window.addEventListener('resize', this.updateRendererSize());
+      // 触摸事件 - 平移
+      canvas.addEventListener('touchstart', (e) => {
+        if (e.touches.length === 1) {
+          this.isDragging = true;
+          this.previousTouchX = e.touches[0].clientX;
+          this.previousTouchY = e.touches[0].clientY;
+          e.preventDefault();
+        }
+      });
+      canvas.addEventListener('touchmove', (e) => {
+        if (this.isDragging && e.touches.length === 1) {
+          const deltaX = e.touches[0].clientX - this.previousTouchX;
+          const deltaY = e.touches[0].clientY - this.previousTouchY;
+          
+          // 移动相机（反转方向以获得自然拖动效果）
+          this.cameraX -= deltaX * 2 / this.cameraZoom;
+          this.cameraY += deltaY * 2 / this.cameraZoom;
+          
+          this.previousTouchX = e.touches[0].clientX;
+          this.previousTouchY = e.touches[0].clientY;
+          e.preventDefault();
+        }
+        
+        // 双指 pinch 缩放
+        if (e.touches.length === 2) {
+          const touch1 = e.touches[0];
+          const touch2 = e.touches[1];
+          
+          // 计算当前两点间的距离
+          const currentDistance = Math.hypot(
+            touch1.clientX - touch2.clientX,
+            touch1.clientY - touch2.clientY
+          );
+          
+          // 计算初始两点间的距离（存储在touchstart事件中）
+          if (!this.initialPinchDistance) {
+            this.initialPinchDistance = currentDistance;
+            this.initialZoom = this.cameraZoom;
+          }
+          
+          // 计算缩放比例
+          const zoomFactor = currentDistance / this.initialPinchDistance;
+          this.cameraZoom = Math.max(0.1, Math.min(10, this.initialZoom * zoomFactor));
+          
+          this.updateRendererSize();
+          e.preventDefault();
+        }
+      });
+      
+      canvas.addEventListener('touchend', ()=> {
+        this.isDragging = false;
+        this.initialPinchDistance = null;
+        this.initialZoom = null
+      });
+      
+      // 鼠标事件（用于桌面设备测试）
+      canvas.addEventListener('mousedown', (e) => {
+        this.isDragging = true;
+        this.previousTouchX = e.clientX;
+        this.previousTouchY = e.clientY;
+      });
+      
+      canvas.addEventListener('mousemove', (e) => {
+        if (this.isDragging) {
+          const deltaX = e.clientX - this.previousTouchX;
+          const deltaY = e.clientY - this.previousTouchY;
+          
+          this.cameraX -= deltaX * 2 / this.cameraZoom;
+          this.cameraY += deltaY * 2 / this.cameraZoom;
+          
+          this.previousTouchX = e.clientX;
+          this.previousTouchY = e.clientY;
+        }
+      });
+      
+      canvas.addEventListener('mouseup', () => {
+        this.isDragging = false;
+      });
+      
+      canvas.addEventListener('mouseleave', () => {
+        this.isDragging = false;
+      });
+      
+      // 鼠标滚轮缩放
+      canvas.addEventListener('wheel', (e)=> {
+        e.preventDefault();
+        if (e.deltaY < 0) {
+          this.cameraZoom *= 1.1;
+        } else {
+          this.cameraZoom /= 1.1;
+        }
+        this.updateRendererSize();
+      });
     },
-    
     initWebSocket() {
       if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
       const protocol = this.serverUrl.startsWith('https') ? 'wss' : 'ws'
       const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
       this.socket = new WebSocket(`${protocol}://${wsHost}/webSocket/PointCloudData/${this.userRole}`)
-      
       this.socket.onopen = () => {
         console.log('WebSocket连接已建立')
         this.isLoading = false
       }
-      
       this.socket.onmessage = (event) => {
-        if (this.isDestroyed) return
         try {
           const now = Date.now()
           if (now - this.lastUpdateTime < this.updateInterval) {
@@ -281,20 +346,17 @@ export default {
           console.error('解析点云数据失败:', error)
         }
       }
-      
       this.socket.onclose = (event) => {
         console.log('WebSocket连接已关闭，代码:', event.code)
         this.isLoading = true
         this.reconnectTimer = setTimeout(() => this.initWebSocket(), 3000)
       }
-      
       this.socket.onerror = (error) => {
         if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
         console.error('WebSocket错误:', error)
         this.isLoading = true
       }
     },
-
     closeWebSocket() {
       if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
       if (this.socket) {
@@ -307,8 +369,8 @@ export default {
       }
       this.allPoints = []
     },
-
     init() {
+      this.initThreeJS();
       this.initWebSocket()
       // this.isLoading = false;
       // const pointData = points.data
@@ -321,268 +383,6 @@ export default {
       //   const arr = points2.data
       //   this.updatePointCloud(arr);
       // }, 2000)
-    },
-    
-    updatePointCloud(points) {
-      if (!Array.isArray(points) || points.length === 0) return
-
-      const existingPoints = new Set(this.allPoints.map(p => `${p.x},${p.y}`))
-      const newUniquePoints = points.filter(point => {
-        const key = `${point.x},${point.y}`
-        return !existingPoints.has(key)
-      })
-
-      if (newUniquePoints.length === 0) return
-      
-      this.allPoints = [...this.allPoints, ...newUniquePoints]
-      this.pointCount = this.allPoints.length
-      this.newPointsSinceLastAdjust += newUniquePoints.length
-
-      this.updatePointBounds(newUniquePoints)
-      
-      this.updatePointCloudGeometry(newUniquePoints)
-      
-      // 定期检查是否需要调整视口
-      if (this.newPointsSinceLastAdjust >= AUTO_ADJUST_THRESHOLD) {
-        this.checkAndAdjustViewport()
-        this.newPointsSinceLastAdjust = 0
-      }
-    },
-    
-    updatePointBounds(newPoints) {
-      for (const point of newPoints) {
-        const scaledX = (point.x || 0) * this.pointScale
-        const scaledY = (point.y || 0) * this.pointScale
-        
-        if (scaledX < this.pointBounds.minX) this.pointBounds.minX = scaledX
-        if (scaledX > this.pointBounds.maxX) this.pointBounds.maxX = scaledX
-        if (scaledY < this.pointBounds.minY) this.pointBounds.minY = scaledY
-        if (scaledY > this.pointBounds.maxY) this.pointBounds.maxY = scaledY
-      }
-      
-      // 仅在首次加载点云时自动适配
-      if (this.pointCount === newPoints.length) {
-        this.adjustCameraByBounds()
-      }
-    },
-    
-    /**
-     * 检查并调整视口
-     */
-    checkAndAdjustViewport() {
-      const aspect = this.canvasSize.width / this.canvasSize.height
-      const pointRangeX = this.pointBounds.maxX - this.pointBounds.minX
-      const pointRangeY = this.pointBounds.maxY - this.pointBounds.minY
-      
-      // 计算当前视口能显示的范围
-      const currentViewWidth = this.viewSize * aspect
-      const currentViewHeight = this.viewSize
-      
-      // 如果点云范围超过当前视口的80%，则调整视口
-      if (pointRangeX > currentViewWidth * 0.8 || pointRangeY > currentViewHeight * 0.8) {
-        this.adjustCameraByBounds()
-      }
-    },
-    
-    updatePointCloudGeometry(newUniquePoints) {
-      const positionAttribute = this.pointCloudGeometry.getAttribute('position')
-      let positions
-      const newPointsCount = newUniquePoints.length
-
-      if (!positionAttribute) {
-        positions = new Float32Array(this.pointCount * 3)
-        this.pointCloudGeometry.setAttribute(
-          'position',
-          new THREE.BufferAttribute(positions, 3)
-        )
-      } else {
-        positions = positionAttribute.array
-        const newLength = this.pointCount * 3
-        if (newLength > positions.length) {
-          const newPositions = new Float32Array(Math.ceil(newLength * 1.2))
-          newPositions.set(positions)
-          positions = newPositions
-          this.pointCloudGeometry.setAttribute(
-            'position',
-            new THREE.BufferAttribute(positions, 3)
-          )
-        }
-      }
-
-      const startIndex = (this.pointCount - newPointsCount) * 3
-      for (let i = 0; i < newPointsCount; i++) {
-        const point = newUniquePoints[i]
-        const index = startIndex + i * 3
-        positions[index] = (point.x || 0) * this.pointScale
-        positions[index + 1] = (point.y || 0) * this.pointScale
-        positions[index + 2] = 0
-      }
-
-      this.pointCloudGeometry.getAttribute('position').needsUpdate = true
-    },
-
-    adjustCameraByBounds() {
-      const aspect = this.canvasSize.width / this.canvasSize.height
-
-      const pointRangeX = this.pointBounds.maxX - this.pointBounds.minX
-      const pointRangeY = this.pointBounds.maxY - this.pointBounds.minY
-
-      let baseViewSize = DEFAULT_VIEW_SIZE
-      if (this.allPoints.length > 0 && !(pointRangeX === 0 && pointRangeY === 0)) {
-        const requiredViewSizeX = pointRangeX * (1 + BOUND_MARGIN)
-        const requiredViewSizeY = pointRangeY * (1 + BOUND_MARGIN)
-        baseViewSize = Math.max(requiredViewSizeX / aspect, requiredViewSizeY)
-        
-        // 确保视口不会太小
-        baseViewSize = Math.max(baseViewSize, DEFAULT_VIEW_SIZE)
-      }
-      this.baseViewSize = baseViewSize
-
-      this.viewSize = baseViewSize
-      this.camera.left = -this.viewSize * aspect / 2
-      this.camera.right = this.viewSize * aspect / 2
-      this.camera.top = this.viewSize / 2
-      this.camera.bottom = -this.viewSize / 2
-      this.camera.updateProjectionMatrix()
-
-      // 初始时将小车定位到中心
-      this.locateCarToCenter()
-
-      if (this.controls) {
-        this.controls.minZoom = MIN_ZOOM_RATIO
-        this.controls.maxZoom = MAX_ZOOM_RATIO
-        this.controls.minDistance = 50
-        this.controls.maxDistance = 200
-        this.controls.zoomToCursor = false
-      }
-
-      this.calculateCarSize()
-    },
-    
-    /**
-     * 限制相机位置，确保点云始终在视口内
-     */
-    limitCameraPosition() {
-      if (this.allPoints.length === 0) return
-
-      const aspect = this.canvasSize.width / this.canvasSize.height
-      const halfViewWidth = this.viewSize * aspect / 2
-      const halfViewHeight = this.viewSize / 2
-
-      // 计算带留白的点云边界
-      const boundMinX = this.pointBounds.minX - BOUND_PADDING
-      const boundMaxX = this.pointBounds.maxX + BOUND_PADDING
-      const boundMinY = this.pointBounds.minY - BOUND_PADDING
-      const boundMaxY = this.pointBounds.maxY + BOUND_PADDING
-
-      // 计算相机可移动的范围
-      const maxCameraX = boundMaxX - halfViewWidth
-      const minCameraX = boundMinX + halfViewWidth
-      const maxCameraY = boundMaxY - halfViewHeight
-      const minCameraY = boundMinY + halfViewHeight
-
-      // 限制相机位置在有效范围内
-      this.camera.position.x = Math.max(minCameraX, Math.min(this.camera.position.x, maxCameraX))
-      this.camera.position.y = Math.max(minCameraY, Math.min(this.camera.position.y, maxCameraY))
-      
-      // 保持控制器目标与相机位置一致
-      this.controls.target.set(this.camera.position.x, this.camera.position.y, 0)
-    },
-    
-    /**
-     * 处理窗口大小变化
-     */
-    handleWindowResize() {
-      // 重新设置正方形画布尺寸
-      const container = this.$refs.canvasContainer
-      const containerWidth = container.clientWidth
-      this.canvasSize.width = containerWidth
-      this.canvasSize.height = containerWidth
-
-      // 更新渲染器尺寸
-      this.renderer.setSize(this.canvasSize.width, this.canvasSize.height)
-
-      // 重新计算相机视口
-      const aspect = this.canvasSize.width / this.canvasSize.height
-      this.camera.left = -this.viewSize * aspect / 2
-      this.camera.right = this.viewSize * aspect / 2
-      this.camera.top = this.viewSize / 2
-      this.camera.bottom = -this.viewSize / 2
-      this.camera.updateProjectionMatrix()
-
-      // 重新计算小车尺寸
-      this.calculateCarSize()
-      
-      // 重新限制相机位置
-      this.limitCameraPosition()
-    },
-    
-    startAnimationLoop() {
-      const animate = () => {
-        this.animationId = requestAnimationFrame(animate)
-        if (this.controls) {
-          this.controls.update()
-        }
-        this.renderer.render(this.scene, this.camera)
-      }
-      animate()
-    },
-    
-    cleanup() {
-      this.isDestroyed = true
-      
-      this.closeWebSocket()
-      
-      if (this.animationId) {
-        cancelAnimationFrame(this.animationId)
-        this.animationId = null
-      }
-      
-      if (this.controls) {
-        this.controls.dispose()
-        this.controls = null
-      }
-      
-      if (this.scene) {
-        if (this.pointCloudMesh) {
-          this.scene.remove(this.pointCloudMesh)
-        }
-        if (this.carMesh) {
-          this.scene.remove(this.carMesh)
-        }
-        this.scene.clear()
-        this.scene = null
-      }
-      
-      if (this.renderer) {
-        const container = this.$refs.canvasContainer
-        if (container && this.renderer.domElement) {
-          container.removeChild(this.renderer.domElement)
-        }
-        this.renderer.dispose()
-        this.renderer.forceContextLoss()
-        this.renderer = null
-      }
-      
-      if (this.pointCloudGeometry) {
-        this.pointCloudGeometry.dispose()
-        this.pointCloudGeometry = null
-      }
-      
-      if (this.pointCloudMaterial) {
-        this.pointCloudMaterial.map = null
-        this.pointCloudMaterial.dispose()
-        this.pointCloudMaterial = null
-      }
-      
-      if (this.carTexture) {
-        this.carTexture.dispose()
-        this.carTexture = null
-      }
-      
-      this.camera = null
-      this.carMesh = null
-      this.pointCloudMesh = null
     }
   }
 }