root/apt15e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

点云

Browse Source
This commit is contained in:
caill
2025-08-29 23:08:05 +08:00
parent f29fe5776e
commit ba1ae1bb6c
2 changed files with 279 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/modules/building.vue
View File

@@ -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'

754
src/pages/modules/gl-map-3.vue
View File

@@ -1,82 +1,60 @@
<template>
<div class="point-cloud-map">
<div ref="canvasContainer" class="canvas-container"></div>
<!-- 定位按钮 -->
<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 ref="canvasContainer" class="canvas-container">
<canvas ref="pointCloudCanvas"></canvas>
</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,
// 点云相关
pointCloudGeometry: null,
pointCloudMaterial: null,
pointCloudMesh: null,
allPoints: [],
pointCount: 0,
pointScale: 1.0,
newPointsSinceLastAdjust: 0, // 新增点计数器
// 小车相关
vehicleImage: require('../../images/new/agv.png'),
pointCloud: null,
pointMaterial: null,
pointGeometry: null,
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,
// 动画与性能
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
}
reconnectTimer: null, // 重连计时器
animationFrameId: null
}
},
computed: {
@@ -90,184 +68,271 @@ export default {
deep: true
}
},
mounted() {
this.initializeComponent()
// 监听窗口大小变化
window.addEventListener('resize', this.handleWindowResize)
},
beforeDestroy() {
this.cleanup()
// 移除窗口大小变化监听
window.removeEventListener('resize', this.handleWindowResize)
this.cleanupResources();
},
methods: {
initializeComponent() {
// 设置画布为正方形（仅初始化时设置一次）
this.setCanvasSizeAsSquare()
this.initThreeJs()
this.initControls()
this.initPointCloud()
this.initCar()
this.startAnimationLoop()
},
/**
* 设置画布为正方形（宽高等于容器初始宽度）
*/
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
methods: {
cleanupResources() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId)
this.closeWebSocket()
// 清理Three.js资源
if (this.renderer) {
this.renderer.dispose();
this.renderer.forceContextLoss();
this.renderer = null;
}
// 锁定视角为正上方，避免视角倾斜导致的显示问题
this.controls.maxPolarAngle = Math.PI / 2
this.controls.minPolarAngle = Math.PI / 2
// 监听控制器变化，限制相机位置
this.controls.addEventListener('change', () => {
this.limitCameraPosition()
})
this.controls.addEventListener('error', (event) => {
console.error('OrbitControls error:', event)
})
if (this.pointGeometry) {
this.pointGeometry.dispose();
this.pointGeometry = null;
}
if (this.pointMaterial) {
this.pointMaterial.dispose();
this.pointMaterial = null;
}
if (this.carTexture) {
this.carTexture.dispose();
this.carTexture = null;
}
if (this.scene) {
this.scene.clear();
this.scene = null;
}
this.camera = null;
this.pointCloud = null;
this.carMesh = null;
this.allPoints = [];
this.pointCount = 0;
},
initPointCloud() {
this.pointCloudGeometry = new THREE.BufferGeometry()
this.pointCloudMaterial = new THREE.PointsMaterial({
initThreeJS() {
// 初始化Three.js场景
const container = this.$refs.canvasContainer;
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: true,
transparent: true,
opacity: 1
})
this.pointCloudMesh = new THREE.Points(
this.pointCloudGeometry,
this.pointCloudMaterial
)
this.scene.add(this.pointCloudMesh)
this.allPoints = []
sizeAttenuation: false
});
this.pointCloud = new THREE.Points(this.pointGeometry, this.pointMaterial);
this.scene.add(this.pointCloud);
},
initCar() {
const loader = new THREE.TextureLoader()
this.carTexture = loader.load(this.vehicleImage, (texture) => {
const material = new THREE.SpriteMaterial({
createCar() {
const textureLoader = new THREE.TextureLoader();
textureLoader.load(this.vehicleImage, (texture) => {
this.carTexture = texture;
const carMaterial = new THREE.SpriteMaterial({
map: texture,
transparent: true,
opacity: 1,
depthWrite: false
})
this.carMesh = new THREE.Sprite(material)
this.scene.add(this.carMesh)
this.calculateCarSize()
if (this.carPosition) {
this.updateCarPosition(this.carPosition)
// 初始时将小车定位到中心
this.locateCarToCenter()
}
}, undefined, (error) => {
console.error('小车图片加载失败:', error)
})
opacity: 1
});
this.carMesh = new THREE.Sprite(carMaterial);
const container = this.$refs.canvasContainer;
const scale = this.carSize / container.clientHeight * 2000;
this.carMesh.scale.set(scale * 1.5, scale * 1.5, 1);
this.carMesh.position.set(this.carPosition.x, this.carPosition.y, 5);
this.carMesh.rotation.z = this.carPosition.angle;
this.scene.add(this.carMesh);
});
},
calculateCarSize() {
if (!this.carMesh) return
// 基于初始化的正方形画布计算小车尺寸
const spriteSizeX = (50 / this.canvasSize.width) * this.viewSize * (this.canvasSize.width / this.canvasSize.height)
const spriteSizeY = (50 / this.canvasSize.height) * this.viewSize
this.carMesh.scale.set(spriteSizeX, spriteSizeY, 1)
},
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
updatePointCloud(points) {
if (!points || !Array.isArray(points) || points.length === 0) return;
// 添加新点
this.allPoints = [...this.allPoints, ...points];
this.pointCount = this.allPoints.length;
// 如果超过最大点数限制，移除旧点
if (this.pointCount > this.maxPoints) {
this.allPoints = this.allPoints.slice(-points.length);
this.pointCount = this.allPoints.length;
}
this.updatePointCloudGeometry();
},
/**
* 定位按钮点击事件 - 将小车置于视窗中心
*/
locateCarToCenter() {
if (!this.carMesh || !this.carPosition || !this.controls) return
// 计算小车在世界坐标系中的位置
const carWorldX = this.carPosition.x * this.pointScale
const carWorldY = this.carPosition.y * this.pointScale
// 将相机和控制器目标设置为小车位置，实现居中
this.controls.target.set(carWorldX, carWorldY, 0)
this.camera.position.set(carWorldX, carWorldY, 100)
this.controls.update() // 立即更新控制器状态
updatePointCloudGeometry() {
const positions = new Float32Array(this.pointCount * 3);
for (let i = 0; i < this.pointCount; i++) {
const point = this.allPoints[i];
positions[i * 3] = point.x || 0;
positions[i * 3 + 1] = point.y || 0;
positions[i * 3 + 2] = 0;
}
// 清理旧的geometry属性
if (this.pointGeometry.attributes.position) {
this.pointGeometry.deleteAttribute('position');
}
this.pointGeometry.setAttribute(
'position',
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
}
}
}