365 lines
10 KiB
Vue
365 lines
10 KiB
Vue
<template>
|
||
<div class="canvas-container" :style="{'background-color': isConnected ? 'rgba(4, 33, 58, 70%)' : '#fff'}">
|
||
<div ref="container" class="point-cloud-container"></div>
|
||
<!-- <div v-if="!isConnected" class="reload_bg"><el-button type="danger">刷新</el-button></div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as THREE from 'three'
|
||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
||
import { mapGetters } from 'vuex'
|
||
import { points } from '../../config/point.js'
|
||
export default {
|
||
/* eslint-disable */
|
||
data () {
|
||
return {
|
||
isConnected: true,
|
||
points: [], // 存储所有点云数据
|
||
ws: null, // WebSocket 实例
|
||
// Three.js 相关对象
|
||
scene: null,
|
||
camera: null,
|
||
renderer: null,
|
||
controls: null,
|
||
pointCloud: null,
|
||
vehicleSprite: null,
|
||
// 渲染循环
|
||
animationFrameId: null,
|
||
// 性能优化
|
||
pointsBuffer: [],
|
||
bufferUpdateThreshold: 500,
|
||
lastUpdateTime: 0,
|
||
// 小车图片
|
||
vehicleImage: require('../../images/new/agv.png'),
|
||
// 2D视图参数
|
||
viewSize: 20,
|
||
minZoom: 0.5,
|
||
maxZoom: 5
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['agvObj', 'position', 'rotation']),
|
||
},
|
||
watch: {
|
||
agvObj: {
|
||
handler() {
|
||
this.updateVehiclePosition()
|
||
},
|
||
deep: true
|
||
},
|
||
position: {
|
||
handler() {
|
||
this.updateVehiclePosition()
|
||
},
|
||
deep: true
|
||
},
|
||
rotation: {
|
||
handler() {
|
||
this.updateVehiclePosition()
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
mounted () {
|
||
this.initThreeJS()
|
||
// this.initWebSocket()
|
||
this.init()
|
||
this.startRendering()
|
||
window.addEventListener('resize', this.handleResize)
|
||
},
|
||
beforeDestroy () {
|
||
if (this.ws) this.ws.close()
|
||
window.removeEventListener('resize', this.handleResize)
|
||
if (this.renderer) this.renderer.dispose()
|
||
if (this.controls) {
|
||
this.controls.dispose()
|
||
}
|
||
},
|
||
methods: {
|
||
initWebSocket() {
|
||
const wsHost = process.env.VUE_APP_API_BASE_URL.replace(/^https?:\/\//, '')
|
||
const sid = this.$store.getters.userInfo === 'true' ? 1 : 2
|
||
this.ws = new WebSocket(`ws://${wsHost}/webSocket/PointCloudData/${sid}`)
|
||
|
||
this.ws.onopen = () => {
|
||
console.log('WebSocket connected')
|
||
}
|
||
|
||
this.ws.onmessage = (event) => {
|
||
const newPoints = event.data
|
||
// 确保所有点都在XY平面(z=0)
|
||
const points2D = newPoints.map(p => ({ x: p.x, y: p.y, z: 0 }))
|
||
this.processNewPoints(points2D)
|
||
}
|
||
|
||
this.ws.onerror = (error) => {
|
||
console.error('WebSocket error:', error)
|
||
}
|
||
|
||
this.ws.onclose = () => {
|
||
console.log('WebSocket disconnected')
|
||
}
|
||
},
|
||
|
||
init () {
|
||
this.isConnected = true
|
||
const newPoints = points.data
|
||
const points2D = newPoints.map(p => ({ x: p.x, y: p.y, z: 0 }))
|
||
this.processNewPoints(points2D)
|
||
},
|
||
|
||
initThreeJS() {
|
||
// viewSize: 控制视图范围大小，值越小看到的范围越小（视角越近）
|
||
// camera.position.z: 相机Z轴位置，值越小视角越近
|
||
// camera.zoom: 直接控制缩放级别，大于1放大，小于1缩小
|
||
// 1. 创建场景
|
||
this.scene = new THREE.Scene()
|
||
|
||
// 2. 创建正交相机(2D视图)
|
||
const container = this.$refs.container
|
||
const aspect = container.clientWidth / container.clientHeight
|
||
|
||
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.set(0, 0, 40)
|
||
this.camera.lookAt(0, 0, 0)
|
||
|
||
// 3.创建渲染器 - 启用alpha通道实现透明背景
|
||
this.renderer = new THREE.WebGLRenderer({
|
||
antialias: true,
|
||
alpha: true, // 关键：启用alpha通道
|
||
transparent: true // 关键：允许透明
|
||
});
|
||
this.renderer.setPixelRatio(window.devicePixelRatio)
|
||
this.renderer.setSize(container.clientWidth, container.clientHeight)
|
||
// 可选：设置clearAlpha确保完全透明
|
||
this.renderer.setClearAlpha(0);
|
||
container.appendChild(this.renderer.domElement)
|
||
|
||
// 4. 添加OrbitControls并配置为2D模式
|
||
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
||
this.configure2DControls()
|
||
|
||
// 5. 添加2D坐标轴辅助
|
||
const axesHelper = new THREE.AxesHelper(10)
|
||
this.scene.add(axesHelper)
|
||
|
||
// 6. 初始化点云
|
||
this.initPointCloud()
|
||
|
||
// 7. 初始化车辆精灵
|
||
this.initVehicleSprite()
|
||
},
|
||
|
||
configure2DControls() {
|
||
// 禁用旋转
|
||
this.controls.enableRotate = false
|
||
|
||
// 启用平面平移
|
||
this.controls.screenSpacePanning = true
|
||
|
||
// 设置缩放限制
|
||
this.controls.minZoom = this.minZoom
|
||
this.controls.maxZoom = this.maxZoom
|
||
|
||
// 启用阻尼效果
|
||
this.controls.enableDamping = true
|
||
this.controls.dampingFactor = 0.25
|
||
|
||
// 确保相机保持2D视角
|
||
this.controls.addEventListener('change', () => {
|
||
this.camera.position.z = 40
|
||
// this.camera.lookAt(this.controls.target)
|
||
})
|
||
|
||
// 修复触摸事件处理
|
||
this.fixTouchEvents()
|
||
},
|
||
|
||
fixTouchEvents() {
|
||
// 确保控制器的触摸处理函数存在
|
||
if (!this.controls) return;
|
||
|
||
// 备份原始触摸处理函数
|
||
const originalOnTouchStart = this.controls.onTouchStart
|
||
const originalOnTouchMove = this.controls.onTouchMove
|
||
const originalOnTouchEnd = this.controls.onTouchEnd
|
||
|
||
// 修复触摸开始事件
|
||
this.controls.onTouchStart = (event) => {
|
||
if (!event.touches) return
|
||
if (originalOnTouchStart) originalOnTouchStart(event)
|
||
}
|
||
|
||
// 修复触摸移动事件
|
||
this.controls.onTouchMove = (event) => {
|
||
if (!event.touches || event.touches.length === 0) return
|
||
if (event.touches[0] && event.touches[0].clientX !== undefined) {
|
||
if (originalOnTouchMove) originalOnTouchMove(event)
|
||
}
|
||
}
|
||
|
||
// 修复触摸结束事件
|
||
this.controls.onTouchEnd = (event) => {
|
||
if (!event.touches) return
|
||
if (originalOnTouchEnd) originalOnTouchEnd(event)
|
||
}
|
||
},
|
||
|
||
initPointCloud() {
|
||
const geometry = new THREE.BufferGeometry()
|
||
const material = new THREE.PointsMaterial({
|
||
color: 0xffffff,
|
||
size: 1,
|
||
transparent: true,
|
||
opacity: 1
|
||
})
|
||
|
||
this.pointCloud = new THREE.Points(geometry, material)
|
||
this.scene.add(this.pointCloud)
|
||
},
|
||
|
||
initVehicleSprite() {
|
||
const textureLoader = new THREE.TextureLoader()
|
||
textureLoader.load(this.vehicleImage, (texture) => {
|
||
// 97px × 67px图片的比例
|
||
const imageAspect = 97 / 67
|
||
const spriteWidth = 2
|
||
const spriteHeight = spriteWidth / imageAspect
|
||
|
||
this.vehicleSprite = new THREE.Sprite(
|
||
new THREE.SpriteMaterial({
|
||
map: texture,
|
||
transparent: true,
|
||
opacity: 0.9
|
||
})
|
||
)
|
||
this.vehicleSprite.scale.set(spriteWidth, spriteHeight, 1)
|
||
|
||
// 角度偏移（根据图片初始朝向调整）
|
||
this.updateVehiclePosition()
|
||
this.scene.add(this.vehicleSprite)
|
||
})
|
||
},
|
||
|
||
processNewPoints(newPoints) {
|
||
this.pointsBuffer.push(...newPoints)
|
||
const now = performance.now()
|
||
if (this.pointsBuffer.length >= this.bufferUpdateThreshold || now - this.lastUpdateTime > 1000) {
|
||
this.updatePointCloudGeometry()
|
||
this.lastUpdateTime = now
|
||
}
|
||
},
|
||
|
||
updatePointCloudGeometry() {
|
||
if (this.pointsBuffer.length === 0) return
|
||
|
||
this.points = this.points.concat(this.pointsBuffer)
|
||
this.pointsBuffer = []
|
||
|
||
if (this.points.length > 50000) {
|
||
this.points = this.points.slice(-40000)
|
||
}
|
||
|
||
const positions = new Float32Array(this.points.length * 3)
|
||
for (let i = 0; i < this.points.length; i++) {
|
||
positions[i * 3] = this.points[i].x
|
||
positions[i * 3 + 1] = this.points[i].y
|
||
positions[i * 3 + 2] = 0
|
||
}
|
||
|
||
this.pointCloud.geometry.dispose()
|
||
this.pointCloud.geometry = new THREE.BufferGeometry()
|
||
this.pointCloud.geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
|
||
},
|
||
|
||
updateVehiclePosition() {
|
||
if (!this.vehicleSprite) return
|
||
|
||
this.vehicleSprite.position.set(
|
||
this.position.x,
|
||
this.position.y,
|
||
0
|
||
)
|
||
const radians = this.rotation * (Math.PI / 180)
|
||
|
||
this.vehicleSprite.rotation.X = radians
|
||
},
|
||
|
||
startRendering() {
|
||
const render = () => {
|
||
this.controls.update()
|
||
this.renderer.render(this.scene, this.camera)
|
||
this.animationFrameId = requestAnimationFrame(render)
|
||
}
|
||
render()
|
||
},
|
||
|
||
handleResize() {
|
||
const container = this.$refs.container
|
||
const width = container.clientWidth
|
||
const height = container.clientHeight
|
||
const aspect = width / 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.renderer.setSize(width, height)
|
||
},
|
||
|
||
zoomToArea(minX, maxX, minY, maxY) {
|
||
const width = maxX - minX
|
||
const height = maxY - minY
|
||
const centerX = (minX + maxX) / 2
|
||
const centerY = (minY + maxY) / 2
|
||
|
||
const margin = 0.1
|
||
const targetViewSize = Math.max(width, height) * (1 + margin)
|
||
|
||
// 计算合适的缩放级别
|
||
const zoomLevel = this.viewSize / targetViewSize
|
||
this.controls.target.set(centerX, centerY, 0)
|
||
// 通过调整camera.zoom实现平滑缩放
|
||
this.camera.zoom = Math.min(this.maxZoom, Math.max(this.minZoom, zoomLevel))
|
||
this.camera.updateProjectionMatrix()
|
||
this.controls.update()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.canvas-container
|
||
position relative
|
||
display flex
|
||
justify-content: center;
|
||
align-items: center;
|
||
height calc(100% - 1rem)
|
||
margin .14rem 0
|
||
box-shadow inset 1px 1px 7px 2px #4d9bcd
|
||
overflow hidden
|
||
.point-cloud-container
|
||
width 100%
|
||
height 100%
|
||
.reload_bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
</style>
|