zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial:初始化机场模型页面，展示boj模型和mtl（注：胶东机场obj为392MB，加载缓慢，大兴机场仅为7.6MB）

Browse Source 
refactor(board): 京源项目的参考代码放入参考文件夹
boardTest
zch 8 months ago
parent 00d6897833
commit dbe5b7728b
8 changed files with 623 additions and 1191 deletions
Show Stats Download Patch File Download Diff File

516
src/views/board/agv.js
Unescape Escape View File

@ -1,516 +0,0 @@
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import * as THREE from 'three'
import { camera, labelRenderer, renderer, scene, isLoading } from '@/views/board/model/setThree'
import * as TWEEN from '@tweenjs/tween.js'
let timeOrSpeed = true
let isAGVLoading = false
let isAGVAnimation = {
'2AGV': false,
'3AGV': false,
'5CCAGV': false,
'5BFAGV': false,
'5CTU': false
}
let AGVanimationLine = {
'2AGV': [],
'3AGV': [],
'5CCAGV': [],
'5BFAGV': [],
'5CTU': []
}
const calculateAngle = (sideA, sideB) => {
// 计算角度
let angle = Math.atan2(sideB, sideA) * 180 / Math.PI
// 确保角度值在0到180度之间
if (angle < 0) {
angle += 180
}
return angle
}
let animationEnum = ['2AGV', '3AGV', '5CCAGV', '5BFAGV', '5CTU']
const AGVanimation = async(e) => {
try {
if (AGVanimationLine[e].length > 0) {
await AGVanimationLine[e][0]()
AGVanimationLine[e].shift()
if (AGVanimationLine[e].length > 0) {
AGVanimation(e)
} else {
isAGVAnimation[e] = false
}
}
} catch (e) {
console.log(e)
}
}
function AGVanimate() {
animationEnum.forEach(e => {
if (AGVanimationLine[e].length > 0 && isAGVAnimation[e] === false) {
isAGVAnimation[e] = true
AGVanimation(e)
}
})
requestAnimationFrame(AGVanimate)
}
AGVanimate()
let floorOrigin = {
floor2Data: {
x: 109000,
y: 119960
},
floor3Data: {
x: 39000,
y: 49460
},
floor5Data: {
x: 159000,
y: 150575
}
}
let floorData1 = {
floor2Data: {
x: 42500,
z: 20500
},
floor3Data: {
x: 42500,
z: 20500
},
floor5Data: {
x: 50300,
z: 20500
}
}
let floorData = {
floor2Data: {
x: 1314,
z: 636
},
floor3Data: {
x: 1314,
z: 636
},
floor5Data: {
x: 1314,
z: 636
}
}
let agvData = {
floor2AGVGroup: null,
floor2AGV: null,
floor2AGVData: {
x: 0,
z: 0,
rotate: 0
},
floor2AGVGroupLocation: {},
floor3AGVGroup: null,
floor3AGV: null,
floor3AGVData: {
x: 0,
z: 0,
rotate: 0
},
floor3AGVGroupLocation: {},
floor5CCAGVGroup: null,
floor5CCAGV: null,
floor5CCAGVGroupLocation: {},
floor5CCAGVData: {
x: 0,
y: 0,
rotate: 0
},
floor5BFAGVGroup: null,
floor5BFAGV: null,
floor5BFAGVGroupLocation: {},
floor5BFAGVData: {
x: 0,
y: 0,
rotate: 0
},
floor5CTUGroup: null,
floor5CTU: null,
floor5CTUGroupLocation: {},
floor5CTUData: {
x: 0,
y: 0,
rotate: 0
}
}
let agvLabel = {
'2AGV': null,
'2AGVData': null,
'3AGV': null,
'3AGVData': null,
'5CCAGV': null,
'5CCAGVData': null,
'5BFAGV': null,
'5BFAGVData': null,
'5CTU': null,
'5CTUData': null
}
let loadAGVEnum = {
'beifushiAGV005': 'floor5BFAGV',
'chacheshiAGV005': 'floor5CCAGV',
'CTU005': 'floor5CTU',
'chacheshiAGV002': 'floor2AGV',
'chacheshiAGV003': 'floor3AGV'
}
let loadAGVGroupEnum = {
'beifushiAGV005': 'floor5BFAGVGroup',
'chacheshiAGV005': 'floor5CCAGVGroup',
'CTU005': 'floor5CTUGroup',
'chacheshiAGV002': 'floor2AGVGroup',
'chacheshiAGV003': 'floor3AGVGroup'
}
let LoadAGVDataEnum = {
'beifushiAGV005': 'floor5BFAGVData',
'chacheshiAGV005': 'floor5CCAGVData',
'CTU005': 'floor5CTUData',
'chacheshiAGV002': 'floor2AGVData',
'chacheshiAGV003': 'floor3AGVData'
}
let LoadAGVLocationEnum = {
'beifushiAGV005': 'floor5BFAGVGroupLocation',
'chacheshiAGV005': 'floor5CCAGVGroupLocation',
'CTU005': 'floor5CTUGroupLocation',
'chacheshiAGV002': 'floor2AGVGroupLocation',
'chacheshiAGV003': 'floor3AGVGroupLocation'
}
let AGVLabelEnum = {
'beifushiAGV005': '5BFAGV',
'chacheshiAGV005': '5CCAGV',
'CTU005': '5CTU',
'chacheshiAGV002': '2AGV',
'chacheshiAGV003': '3AGV'
}
let axisEnum = {
'chacheshiAGV002': {
x: 9,
z: 15
},
'chacheshiAGV003': {
x: 9,
z: 20.5
},
'beifushiAGV005': {
z: 11.6
},
'chacheshiAGV005': {
x: 9,
z: 22
},
'CTU005': {
x: -3.5,
z: -20
}
}
const loadingManager = new THREE.LoadingManager()
loadingManager.onLoad = function() {
isAGVLoading = true
agvData.floor5CTUGroup.position.z = -205
agvLabel['5CTU'].position.z = -205
agvData.floor5CTUGroup.position.x = 100
agvLabel['5CTU'].position.x = -205
AGVAnimation('5CTU', '5CTU', 'x', 7)
agvData.floor5CTUGroup.rotation.y = 90 * (Math.PI / 180)
}
const loadAGV = (r) => {
r.forEach(e => {
let agvName = loadAGVEnum[e]
let agvGroupName = loadAGVGroupEnum[e]
let agvDataName = LoadAGVDataEnum[e]
let agvLocationName = LoadAGVLocationEnum[e]
let agvLabelData = AGVLabelEnum[e]
let mtlLoader = new MTLLoader()
mtlLoader.load(`/model/${e}/${e}.mtl`,
materials => {
materials.preload()
let loader = new OBJLoader(loadingManager)
loader.setMaterials(materials)
loader.load(
`/model/${e}/${e}.obj`,
object => {
object.children[0].geometry.computeBoundingBox()
let axis = new THREE.Vector3()
axis.addVectors(object.children[0].geometry.boundingBox.min, object.children[0].geometry.boundingBox.max)
axis.multiplyScalar(0.5)
axis.applyMatrix4(object.children[0].matrixWorld)
agvData[agvGroupName] = new THREE.Group()
agvData[agvGroupName].add(object)
let axisDis = axisEnum[e]
Object.keys(axisDis || {}).forEach(v => {
axis[v] += axisDis[v]
})
agvData[agvGroupName].position.set(axis.x, axis.y, axis.z)
agvLabel[agvLabelData].position.set(axis.x, axis.y, axis.z)
agvData[agvLocationName] = axis
object.position.set(-axis.x, -axis.y, -axis.z)
agvData[agvDataName].x = axis.x
agvData[agvDataName].z = axis.z
scene.add(agvData[agvGroupName])
scene.add(agvLabel[agvLabelData])
object.name = 'tishengji_tuopan'
// scene.add(object)
agvData[agvName] = object
// 更新渲染器
renderer.render(scene, camera)
},
() => {
},
err => {
loadAGV([e])
}
)
})
})
}
// loadAGV(['chacheshiAGV003'])
let AGVGroupEnum = {
'5BFAGV': 'floor5BFAGVGroupLocation',
'5CCAGV': 'floor5CCAGVGroupLocation',
'5CTU': 'floor5CTUGroupLocation',
'2AGV': 'floor2AGVGroupLocation',
'3AGV': 'floor3AGVGroupLocation'
}
let AGVDataEnum = {
'5BFAGV': 'floor5BFAGVData',
'5CCAGV': 'floor5CCAGVData',
'5CTU': 'floor5CTUData',
'2AGV': 'floor2AGVData',
'3AGV': 'floor3AGVData'
}
let groupEnum = {
'5BFAGV': 'floor5BFAGVGroup',
'5CCAGV': 'floor5CCAGVGroup',
'5CTU': 'floor5CTUGroup',
'2AGV': 'floor2AGVGroup',
'3AGV': 'floor3AGVGroup'
}
let floorEnum = {
'5BFAGV': 'floor5Data',
'5CCAGV': 'floor5Data',
'5CTU': 'floor5Data',
'2AGV': 'floor2Data',
'3AGV': 'floor3Data'
}
let rotateF = (e) => {
e %= 360
if (e > 180) {
return e - 360
}
if (e < -180) {
return e + 360
}
return e
}
const AGVAnimationF1 = (item, location, time = 2000) => {
let AGVGroupLocationData = AGVGroupEnum[item]
let AGVLocationData = AGVDataEnum[item]
let group = groupEnum[item]
let floor = floorEnum[item]
}
const AGVAnimationF = (item, type, newLocation = {}, time = 2000) => {
let s = 1
if (type === 'rotate') {
newLocation.rotate %= 360
if ((item === '2AGV' || item === '3AGV' || item === '5CCAGV') && type === 'rotate') {
newLocation.rotate -= 90
}
if ((item === '5CTU') && type === 'rotate') {
newLocation.rotate += 90
}
}
let AGVGroupLocationData = AGVGroupEnum[item]
let AGVLocationData = AGVDataEnum[item]
let group = groupEnum[item]
let floor = floorEnum[item]
let agvLabelData = agvLabel?.[item]
switch (type) {
case 'xz': {
return new Promise(async(resolve, reject) => {
let locationx = agvData[AGVGroupLocationData].x - (newLocation.x / 100) * floorData[floor].x
let locationz = agvData[AGVGroupLocationData].z + (newLocation.z / 100) * floorData[floor].z
let xlength = agvData[AGVLocationData].x - locationx
let zlength = agvData[AGVLocationData].z - locationz
let rotate = calculateAngle(Math.abs(xlength), Math.abs(zlength))
if (xlength < 0 && zlength < 0) {
rotate = 180 - rotate
}
if (xlength < 0 && zlength > 0) {
rotate = 180 + rotate
}
if (xlength > 0 && zlength > 0) {
rotate = 360 - rotate
}
if (xlength === 0 && zlength === 0) {
} else {
await AGVAnimationF(item, 'rotate', { rotate: rotate })
}
let tween = new TWEEN.Tween(agvData[group].position)
.to({ x: locationx, z: locationz }, time)
.onComplete(() => {
agvData[group].position.x = locationx
agvData[AGVLocationData].x = locationx
agvData[group].position.z = locationz
agvData[AGVLocationData].z = locationz
resolve()
tween.stop()
tween = null
})
.start()
if(agvLabelData){
let tween1 = new TWEEN.Tween(agvLabelData.position)
.to({ x: locationx, z: locationz }, time)
.onComplete(() => {
tween1.stop()
tween1 = null
})
.start()
}
})
}
case 'x': {
return new Promise(async(resolve, reject) => {
let location = agvData[AGVGroupLocationData].x - (newLocation.x / 100) * floorData[floor].x
if ((agvData[group].position.x - location) > 0) {
await AGVAnimationF(item, 'rotate', { rotate: 0 })
} else {
await AGVAnimationF(item, 'rotate', { rotate: 180 })
}
if (agvData[AGVLocationData].x === location) {
resolve()
}
let distance = location - agvData[AGVLocationData].x
let tween = new TWEEN.Tween(agvData[group].position)
.to({ x: location }, Math.abs(distance) / s * 16) // 移动到(1, 1, 1)，持续1000毫秒
.onComplete(() => {
agvData[group].position.x = location
agvData[AGVLocationData].x = location
resolve()
tween.stop()
tween = null
})
.start()
if(agvLabelData){
let tween1 = new TWEEN.Tween(agvLabelData.position)
.to({ x: location }, time)
.onComplete(() => {
tween1.stop()
tween1 = null
})
.start()
}
})
}
case 'z': {
return new Promise(async(resolve, reject) => {
let location = agvData[AGVGroupLocationData].z + (newLocation.z / 100) * floorData[floor].z
if ((agvData[group].position.z - location) > 0) {
await AGVAnimationF(item, 'rotate', { rotate: 270 })
} else {
await AGVAnimationF(item, 'rotate', { rotate: 90 })
}
if (agvData[AGVLocationData].z === location) {
resolve()
}
let distance = location - agvData[AGVLocationData].z
let tween = new TWEEN.Tween(agvData[group].position)
.to({ z: location }, Math.abs(distance) / s * 16) // 移动到(1, 1, 1)，持续1000毫秒
.onComplete(() => {
agvData[group].position.z = location
agvData[AGVLocationData].z = location
resolve()
tween.stop()
tween = null
})
.start()
})
}
case 'rotate': {
return new Promise((resolve, reject) => {
let nowRotate = parseFloat((agvData[group].rotation.y / (Math.PI / 180)).toFixed(2))
nowRotate = rotateF(nowRotate)
newLocation.rotate = rotateF(newLocation.rotate)
let distance = newLocation.rotate - nowRotate
distance = rotateF(distance)
let nowRotateNum = agvData[group].rotation.y
let endRotateNum = nowRotateNum + (distance * (Math.PI / 180))
let bool = (nowRotateNum - endRotateNum) > 0
let tween = new TWEEN.Tween(agvData[group].rotation)
.to({ y: newLocation.rotate * (Math.PI / 180) }, 500) // 移动到(1, 1, 1)，持续1000毫秒
.onComplete(() => {
agvData[group].rotation.y = (newLocation.rotate * (Math.PI / 180))
resolve()
tween.stop()
tween = null
})
.start()
})
}
default : {
return new Promise((resolve, reject) => {
resolve()
})
}
}
}
const AGVAnimation = (e, item, type, newLocation = {}, time = 2000) => {
if (agvData[groupEnum[e]] && AGVanimationLine[e].length < 10) {
AGVanimationLine[e].push(() => AGVAnimationF(item, type, newLocation, time))
}
}
export {
agvData,
AGVAnimation,
floorOrigin,
floorData1,
isAGVLoading,
agvLabel,
loadAGV
}

201
src/views/board/animation.js
Unescape Escape View File

@ -1,201 +0,0 @@
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
import {
isLoading,
tuopanLocation,
tishengjiLocation, keyidongModel, storeyHeight, tuopanModel, animationLine, storeyWidth
} from './setThree'
import * as TWEEN from '@tweenjs/tween.js'
import { agvData } from '@/views/board/model/agv'
let tuopanInishengji = true
let s = 1
const tishengjiAnimation = (model, floor, newLocation = 0, time = 2000) => {
return new Promise((resolve, reject) => {
tishengjiLocation.floor = floor
if (!model || tishengjiLocation.y === newLocation) {
resolve()
}
let distance = newLocation - tishengjiLocation.y
let tween = new TWEEN.Tween(model.position)
.to({ y: newLocation }, Math.abs(distance) / s * 16) // 移动到(1, 1, 1)，持续1000毫秒
.onComplete(() => {
model.position.y = newLocation
tishengjiLocation.y = newLocation
resolve()
tween.stop()
tween = null
})
.start()
// let time1 = setInterval(() => {
// if ((distance > 0 && model.position.y >= newLocation) || (distance < 0 && model.position.y <= newLocation)) {
// model.position.y = newLocation
// tishengjiLocation.y = newLocation
// resolve()
// clearInterval(time1)
// clearTimeout(time3)
// } else {
// model.position.y += distance / (s / 16)
// tishengjiLocation.y = model.position.y
// }
// }, 16)
// let time3 = setTimeout(() => {
// model.position.y = newLocation
// tishengjiLocation.y = newLocation
// resolve()
// clearInterval(time1)
// clearTimeout(time3)
// }, time + 1000)
})
}
const tuopanXAnimation = (model, newLocation = 0, time = 2000) => {
return new Promise((resolve, reject) => {
if (!model || newLocation === tuopanLocation.x || tishengjiLocation.floor !== tuopanLocation.floor) {
resolve()
} else {
tuopanInishengji = newLocation === 0
let distance = newLocation - tuopanLocation.x
let tween = new TWEEN.Tween(model.position)
.to({ x: newLocation }, Math.abs(distance) / s * 16) // 移动到(1, 1, 1)，持续1000毫秒
.onComplete(() => {
model.position.x = newLocation
tuopanLocation.x = newLocation
resolve()
tween.stop()
tween = null
})
.start()
// let time1 = setInterval(() => {
// if ((distance > 0 && model.position.x >= newLocation) || (distance < 0 && model.position.x <= newLocation)) {
// model.position.x = newLocation
// tuopanLocation.x = newLocation
// resolve()
// clearInterval(time1)
// clearTimeout(time3)
// } else {
// model.position.x += distance / (time / 16)
// tuopanLocation.x = model.position.x
// }
// }, 16)
// let time3 = setTimeout(() => {
// model.position.x = newLocation
// tuopanLocation.x = newLocation
// resolve(0)
// clearInterval(time1)
// clearTimeout(time3)
// }, time + 1000)
}
})
}
const tuopanYAnimation = (model, floor, newLocation = 0, time = 2000) => {
return new Promise((resolve, reject) => {
tuopanLocation.floor = floor
if (!model || tuopanLocation.y === newLocation) {
resolve()
}
let distance = newLocation - tuopanLocation.y
let tween = new TWEEN.Tween(model.position)
.to({ y: newLocation }, Math.abs(distance) / s * 16) // 移动到(1, 1, 1)，持续1000毫秒
.onComplete(() => {
model.position.y = newLocation
tuopanLocation.y = newLocation
resolve()
tween.stop()
tween = null
})
.start()
// let time1 = setInterval(() => {
// if ((distance > 0 && model.position.y >= newLocation) || (distance < 0 && model.position.y <= newLocation)) {
// model.position.y = newLocation
// tuopanLocation.y = newLocation
// resolve()
// clearInterval(time1)
// clearTimeout(time3)
// } else {
// model.position.y += distance / (time / 16)
// tuopanLocation.y = model.position.y
// }
// }, 16)
// let time3 = setTimeout(() => {
// model.position.y = newLocation
// tuopanLocation.y = newLocation
// resolve()
// clearInterval(time1)
// clearTimeout(time3)
// }, time + 1000)
})
}
const addtuopan = (params) => {
return new Promise((resolve, reject) => {
try {
let objLoader1 = new OBJLoader()
let mtlLoader1 = new MTLLoader()
let objLoader2 = new OBJLoader()
let mtlLoader2 = new MTLLoader()
mtlLoader1.load('/model/jiaodongjichang.mtl', function(materials) {
materials.preload()
objLoader1.setMaterials(materials)
objLoader1.load('/model/jiaodongjichang.obj.obj', function(object1) {
// 将模型添加到场景
params.scene.add(object1)
// mtlLoader2.load('/model/tishengji/tishengji.mtl', function(materials2) {
// materials2.preload()
// objLoader2.setMaterials(materials2)
// objLoader2.load('/model/tishengji/tishengji.obj', function(object2) {
// 将模型添加到场景
// object1.add(object2)
resolve(object1)
// })
// })
})
})
} catch (e) {
resolve()
}
})
}
setInterval(() => {
if (isLoading) {
if (animationLine.length < 5) {
let floor = Math.ceil(Math.random() * 5)
animationLine.push(() => {
if (tuopanInishengji) {
return Promise.all([tishengjiAnimation(keyidongModel, floor, storeyHeight[floor]), tuopanYAnimation(tuopanModel, floor, storeyHeight[floor])])
} else {
animationLine.push(() => tishengjiAnimation(keyidongModel, floor, storeyHeight[floor]))
}
})
if (Math.random() > 0.5) {
animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[floor]))
animationLine.push(() => tuopanXAnimation(tuopanModel, 0))
}
}
}
}, 1800)
export {
tuopanInishengji,
tishengjiAnimation,
tuopanXAnimation,
tuopanYAnimation,
addtuopan
}

474
src/views/board/model.vue
Unescape Escape View File

@ -1,474 +0,0 @@
<template>
<div>
<div class="bottomBg">
<div class="item1F" @click="toggle1">1F</div>
<div class="item2F" @click="toggle2">2F</div>
<div class="item3F" @click="toggle3">3F</div>
<div class="item4F" @click="toggle4">4F</div>
<div class="item5F" @click="toggle5">5F</div>
</div>
<div ref="threeJs" class="app-container">
</div>
<div ref="modelInfo" class="model" style="display: inline-block">
<Demo ref="modelInfoData"/>
</div>
<div ref="modelInfo1" class="model">
<Demo ref="modelInfo1Data"/>
</div>
<div ref="modelInfo2" class="model">
<Demo ref="modelInfo2Data"/>
</div>
<div ref="modelInfo3" class="model">
<Demo ref="modelInfo3Data"/>
</div>
<div ref="modelInfo4" class="model">
<Demo ref="modelInfo4Data"/>
</div>
<div style="position:absolute;top: 0;left: 0;">
<el-input-number v-model="num" @change="handleChange" :step="0.1" label="描述文字"></el-input-number>
<el-select v-model="floor" placeholder="去几楼" @change="toFloor">
<el-option
label="1楼"
:value="1"
>
</el-option>
<el-option
label="2楼"
:value="2"
>
</el-option>
<el-option
label="3楼"
:value="3"
>
</el-option>
<el-option
label="4楼"
:value="4"
>
</el-option>
<el-option
label="5楼"
:value="5"
>
</el-option>
</el-select>
<el-button type="primary" @click="tuopanReset">托盘复位</el-button>
<el-button type="primary" @click="tuopanOut">托盘推出</el-button>
<el-button type="primary" @click="removetuopan">删除托盘</el-button>
<el-button type="primary" @click="toggle">显示/隐藏</el-button>
<el-select v-model="tuopanFloor" placeholder="去几楼">
<el-option
label="1楼"
:value="1"
>
</el-option>
<el-option
label="2楼"
:value="2"
>
</el-option>
<el-option
label="3楼"
:value="3"
>
</el-option>
<el-option
label="4楼"
:value="4"
>
</el-option>
<el-option
label="5楼"
:value="5"
>
</el-option>
</el-select>
<el-button type="primary" @click="addtuopan">添加托盘</el-button>
<el-select v-model="fx" placeholder="方向">
<el-option
label="x"
value="x"
>
</el-option>
<el-option
label="z"
value="z"
>
</el-option>
</el-select>
<el-input-number v-model="num1" :step="0.1" label="描述文字"></el-input-number>
<el-button type="primary" @click="agvAn">移动agv</el-button>
</div>
</div>
</template>
<script>
import * as THREE from 'three'
import * as TWEEN from '@tweenjs/tween.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
import Demo from '@/components/model/demo.vue'
import { getAgvDeviceStatus } from '@/api/board/model'
import {
tuopanInishengji,
tishengjiAnimation,
tuopanXAnimation,
tuopanYAnimation,
addtuopan
} from './animation'
import {
keyidongModel,
tuopanModel,
scene,
camera,
renderer,
loadF1,
loadF2,
loadF3,
loadF4,
loadF5,
storeyHeight,
storeyWidth,
tuopanLocation,
animationLine, isLoading,
floor1Model,
floor2Model,
floor3Model,
floor4Model,
floor5Model, loadFOther, otherModel
} from './setThree'
import {
AGVAnimation, agvData, floorOrigin, floorData1, isAGVLoading, agvLabel, loadAGV
} from './agv'
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
name: 'Model',
components: { Demo },
data() {
return {
num: -60,
num1: 90,
floor: 1,
tuopanFloor: 1,
fx: '',
rotate: 0
}
},
mounted() {
setInterval(() => {
if (isLoading && isAGVLoading) {
getAgvDeviceStatus().then(e => {
this.modelData = e.data
e.data.agvStatusList.forEach(v => {
if (v.agvName === '2楼叉车') {
this.$refs.modelInfoData.setData(v)
let x = (v.posX - floorOrigin.floor2Data.x) / floorData1.floor2Data.x
let z = (v.posY - floorOrigin.floor2Data.y) / floorData1.floor2Data.z
AGVAnimation('2AGV', '2AGV', 'xz', { x: x * 100, z: z * 100 })
}
if (v.agvName === '3楼叉车') {
this.$refs.modelInfo1Data.setData(v)
let x = (v.posX - floorOrigin.floor3Data.x) / floorData1.floor3Data.x
let z = (v.posY - floorOrigin.floor3Data.y) / floorData1.floor3Data.z
AGVAnimation('3AGV', '3AGV', 'xz', { x: x * 100, z: z * 100 })
}
if (v.agvName === '5楼叉车') {
this.$refs.modelInfo2Data.setData(v)
let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
AGVAnimation('5CCAGV', '5CCAGV', 'xz', { x: x * 100, z: z * 100 })
}
if (v.agvName === '5楼背负式') {
this.$refs.modelInfo3Data.setData(v)
let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
AGVAnimation('5BFAGV', '5BFAGV', 'xz', { x: x * 100, z: z * 100 })
}
if (v.agvName === '5楼CTU') {
this.$refs.modelInfo4Data.setData(v)
let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
AGVAnimation('5CTU', '5CTU', 'x', { x: x * 100, z: z * 100 })
}
})
let deviseInfo = []
e.data.realtimeStatusList.forEach(v => {
if (deviseInfo.map(vv => vv.deviceId).includes(v.deviceId)) {
deviseInfo[deviseInfo.indexOf(deviseInfo.find(vv => vv.deviceId === v.deviceId))].info.push({
name: v.statusName,
value: v.statusValue,
id: v.statusId,
code: v.statusCode
})
} else {
deviseInfo.push({
deviceId: v.deviceId,
deviceName: v.deviceName,
info: [
{
name: v.statusName,
value: v.statusValue,
id: v.statusId,
code: v.statusCode
}
]
})
}
})
console.log(deviseInfo)
})
}
}, 2500)
this.$refs.threeJs.appendChild(renderer.domElement)
// controls.rotateSpeed = -controls.rotateSpeed;
// controls.enableZoom = false
// loadF([ 'tishengji_tuopan'])
// loadF1([ 'changfang005', 'liku005', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan', 'Uxingxian'])
// loadF2(['2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'AGVchongdianzhuang005','changfang002', 'changfang003',])
loadF1([])
loadF2(['AGVchongdianzhuang002', 'changfang002'])
loadF3(['AGVchongdianzhuang003', 'changfang003', 'quanzidongchaibaojizhaungpeixian003'])
loadF4([])
loadF5(['AGVchongdianzhuang005', '2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'changfang005', 'liku005', 'Uxingxian'])
loadFOther(['tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan'])
// loadF(['changfang002', 'changfang003', 'changfang005'])
// 创建CSS2DObject
agvLabel['2AGV'] = new CSS2DObject(this.$refs.modelInfo)
agvLabel['3AGV'] = new CSS2DObject(this.$refs.modelInfo1)
agvLabel['5CCAGV'] = new CSS2DObject(this.$refs.modelInfo2)
agvLabel['5BFAGV'] = new CSS2DObject(this.$refs.modelInfo3)
agvLabel['5CTU'] = new CSS2DObject(this.$refs.modelInfo4)
loadAGV(['chacheshiAGV002', 'chacheshiAGV003', 'chacheshiAGV005', 'beifushiAGV005', 'CTU005'])
// setInterval(()=>{
// labelObject2AGV.position.x +=0.1
// labelObject2AGV.position.y +=0.1
// labelObject2AGV.position.z +=0.1
// },40)
// 渲染循环
},
methods: {
handleChange() {
AGVAnimation('5CTU', '5CTU', 'x', this.num)
// tuopanModel.position.x = this.num
},
toFloor(e) {
animationLine.push(() => {
if (tuopanInishengji) {
return Promise.all([tishengjiAnimation(keyidongModel, e, storeyHeight[e]), tuopanYAnimation(tuopanModel, e, storeyHeight[e])])
} else {
animationLine.push(() => tishengjiAnimation(keyidongModel, e, storeyHeight[e]))
}
})
},
tuopanReset() {
animationLine.push(() => tuopanXAnimation(tuopanModel, 0))
},
tuopanOut() {
animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[tuopanLocation.floor]))
},
removetuopan() {
scene.remove(tuopanModel)
tuopanModel = null
},
async addtuopan() {
scene.remove(tuopanModel)
tuopanModel = null
tuopanModel = await addtuopan({ scene })
scene.add(tuopanModel)
tuopanModel.position.x = storeyWidth[this.tuopanFloor]
tuopanModel.position.y = storeyHeight[this.tuopanFloor]
tuopanLocation.floor = this.tuopanFloor
tuopanLocation.y = storeyHeight[this.tuopanFloor]
tuopanLocation.x = storeyWidth[this.tuopanFloor]
},
agvAn() {
this.rotate -= this.num1
AGVAnimation('3AGV', 'rotate', this.rotate)
},
toggle() {
console.log(agvData)
floor1Model.visible = true
floor2Model.visible = true
floor3Model.visible = true
floor4Model.visible = true
floor5Model.visible = true
otherModel.visible = true
agvData.floor2AGVGroup.visible = true
agvData.floor3AGVGroup.visible = true
agvData.floor5BFAGVGroup.visible = true
agvData.floor5CCAGVGroup.visible = true
agvData.floor5CTUGroup.visible = true
this.$refs.modelInfoData.$el.style.display = 'inline-block'
this.$refs.modelInfo1Data.$el.style.display = 'inline-block'
this.$refs.modelInfo2Data.$el.style.display = 'inline-block'
this.$refs.modelInfo3Data.$el.style.display = 'inline-block'
this.$refs.modelInfo4Data.$el.style.display = 'inline-block'
},
toggle1() {
floor1Model.visible = true
floor2Model.visible = false
floor3Model.visible = false
floor4Model.visible = false
floor5Model.visible = false
otherModel.visible = false
this.$refs.modelInfoData.$el.style.display = 'none'
this.$refs.modelInfo1Data.$el.style.display = 'none'
this.$refs.modelInfo2Data.$el.style.display = 'none'
this.$refs.modelInfo3Data.$el.style.display = 'none'
this.$refs.modelInfo4Data.$el.style.display = 'none'
agvData.floor2AGVGroup.visible = false
agvData.floor3AGVGroup.visible = false
agvData.floor5BFAGVGroup.visible = false
agvData.floor5CCAGVGroup.visible = false
agvData.floor5CTUGroup.visible = false
},
toggle2() {
floor1Model.visible = false
floor2Model.visible = true
floor3Model.visible = false
floor4Model.visible = false
floor5Model.visible = false
otherModel.visible = false
agvData.floor2AGVGroup.visible = true
agvData.floor3AGVGroup.visible = false
agvData.floor5BFAGVGroup.visible = false
agvData.floor5CCAGVGroup.visible = false
agvData.floor5CTUGroup.visible = false
this.$refs.modelInfoData.$el.style.display = 'inline-block'
this.$refs.modelInfo1Data.$el.style.display = 'none'
this.$refs.modelInfo2Data.$el.style.display = 'none'
this.$refs.modelInfo3Data.$el.style.display = 'none'
this.$refs.modelInfo4Data.$el.style.display = 'none'
},
toggle3() {
floor1Model.visible = false
floor2Model.visible = false
floor3Model.visible = true
floor4Model.visible = false
floor5Model.visible = false
otherModel.visible = false
agvData.floor2AGVGroup.visible = false
agvData.floor3AGVGroup.visible = true
agvData.floor5BFAGVGroup.visible = false
agvData.floor5CCAGVGroup.visible = false
agvData.floor5CTUGroup.visible = false
this.$refs.modelInfoData.$el.style.display = 'none'
this.$refs.modelInfo1Data.$el.style.display = 'inline-block'
this.$refs.modelInfo2Data.$el.style.display = 'none'
this.$refs.modelInfo3Data.$el.style.display = 'none'
this.$refs.modelInfo4Data.$el.style.display = 'none'
},
toggle4() {
floor1Model.visible = false
floor2Model.visible = false
floor3Model.visible = false
floor4Model.visible = true
floor5Model.visible = false
otherModel.visible = false
this.$refs.modelInfoData.$el.style.display = 'none'
this.$refs.modelInfo1Data.$el.style.display = 'none'
this.$refs.modelInfo2Data.$el.style.display = 'none'
this.$refs.modelInfo3Data.$el.style.display = 'none'
this.$refs.modelInfo4Data.$el.style.display = 'none'
agvData.floor2AGVGroup.visible = false
agvData.floor3AGVGroup.visible = false
agvData.floor5BFAGVGroup.visible = false
agvData.floor5CCAGVGroup.visible = false
agvData.floor5CTUGroup.visible = false
},
toggle5() {
floor1Model.visible = false
floor2Model.visible = false
floor3Model.visible = false
floor4Model.visible = false
floor5Model.visible = true
otherModel.visible = false
this.$refs.modelInfoData.$el.style.display = 'none'
this.$refs.modelInfo1Data.$el.style.display = 'none'
this.$refs.modelInfo2Data.$el.style.display = 'inline-block'
this.$refs.modelInfo3Data.$el.style.display = 'inline-block'
this.$refs.modelInfo4Data.$el.style.display = 'inline-block'
agvData.floor2AGVGroup.visible = false
agvData.floor3AGVGroup.visible = false
agvData.floor5BFAGVGroup.visible = true
agvData.floor5CCAGVGroup.visible = true
agvData.floor5CTUGroup.visible = true
}
}
}
</script>
<style lang="less" scoped>
.app-container {
padding: 0;
}
.model {
position: relative;
}
.bottomBg {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 2.656vw;
background-image: url("~@/assets/model/bottomBg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.item1F, .item2F, .item3F, .item4F, .item5F {
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 4.6vw;
height: 1.32vw;
line-height: 1.32vw;
text-align: center;
color: #fff;
}
.item1F {
left: 39%;
background-image: url("~@/assets/model/unselected.png");
}
.item2F {
left: 44.5%;
background-image: url("~@/assets/model/unselected.png");
}
.item3F {
left: 50%;
background-image: url("~@/assets/model/unselected.png");
}
.item4F {
left: 55.5%;
background-image: url("~@/assets/model/unselected.png");
}
.item5F {
left: 61%;
background-image: url("~@/assets/model/unselected.png");
}
}
</style>

78
src/views/board/model/AirportModel.vue
Unescape Escape View File

@ -0,0 +1,78 @@
<template>
<div ref="modelContainer" class="model-container"></div>
</template>
<script>
import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
export default {
name: 'AirportModel',
/**
* 这是一个Vue生命周期钩子函数，在组件挂载后调用。它主要用于初始化Three.js环境。
*
* @return {void} 无返回值。
*/
mounted() {
this.initThree();
},
methods: {
initThree() {
// 获取模型容器的引用
const container = this.$refs.modelContainer;
// 创建一个新的 Three.js 场景
const scene = new THREE.Scene();
// 创建一个透视相机，参数为视角、宽高比、近裁剪面和远裁剪面
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
// 创建一个 WebGL 渲染器并启用抗锯齿
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置渲染器的尺寸为容器的宽度和高度
renderer.setSize(container.clientWidth, container.clientHeight);
// 将渲染器的 DOM 元素添加到容器中
container.appendChild(renderer.domElement);
// 设置光源
const light = new THREE.DirectionalLight(0xffffff, 1);
// 设置光源位置并归一化
light.position.set(5, 3, 5);
// 将光源添加到场景中
scene.add(light);
// 加载 MTL 文件
const mtlLoader = new MTLLoader();
mtlLoader.load('/model/jiaodongjichang.mtl', (materials) => {
materials.preload();
const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('/model/jiaodongjichang.obj', (object) => {
object.position.y = -1;
scene.add(object);
});
} );
// 设置相机位置
camera.position.z = 5;
// 渲染循环
const animate = () => {
// 请求下一帧动画
requestAnimationFrame(animate);
// 渲染场景和相机
renderer.render(scene, camera);
};
// 开始渲染循环
animate();
}
}
};
</script>
<style scoped>
.model-container {
width: 100%;
height: calc(100vh - 84px);
}
</style>

26
src/views/board/model/App.vue
Unescape Escape View File

@ -0,0 +1,26 @@
<!--<template>-->
<!-- <div id="app">-->
<!-- <AirportModel />-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import AirportModel from '@/views/board/model/AirportModel.vue';-->
<!--export default {-->
<!-- name: 'App',-->
<!-- components: {-->
<!-- AirportModel-->
<!-- }-->
<!--};-->
<!--</script>-->
<!--<style>-->
<!--#app {-->
<!-- width: 100vw;-->
<!-- height: 100vh;-->
<!-- display: flex;-->
<!-- justify-content: center;-->
<!-- align-items: center;-->
<!--}-->
<!--</style>-->

177
src/views/board/参考/animation.js
Unescape Escape View File

@ -0,0 +1,177 @@
// import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
// // 导入OBJLoader，用于加载OBJ格式的3D模型
//
// import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
// // 导入MTLLoader，用于加载MTL格式的材质文件
//
// import {
// isLoading,
// tuopanLocation,
// tishengjiLocation, keyidongModel, storeyHeight, tuopanModel, animationLine, storeyWidth
// } from './setThree'
// // 从setThree模块中导入多个变量和函数，包括是否正在加载、托盘位置、提升机位置等
//
// import * as TWEEN from '@tweenjs/tween.js'
// // 导入TWEEN库，用于创建补间动画
//
//
// let tuopanInishengji = true
//
// let s = 1
//
// const tishengjiAnimation = (model, floor, newLocation = 0, time = 2000) => {
// // 返回一个新的Promise对象，用于处理异步操作
// return new Promise((resolve, reject) => {
// // 更新楼层位置信息
// tishengjiLocation.floor = floor
// // 如果模型不存在或者目标位置与当前位置相同，直接解决Promise
// if (!model || tishengjiLocation.y === newLocation) {
// resolve()
// }
// // 计算需要移动的距离
// let distance = newLocation - tishengjiLocation.y
//
// // 创建TWEEN动画实例，设置动画属性和持续时间
// let tween = new TWEEN.Tween(model.position)
// .to({ y: newLocation }, Math.abs(distance) / s * 16) // 根据距离和速度计算动画时间
// .onComplete(() => {
// // 动画完成后，更新模型位置和楼层位置信息，解决Promise并清理动画实例
// model.position.y = newLocation
// tishengjiLocation.y = newLocation
// resolve()
// tween.stop()
// tween = null
// })
// .start() // 开始动画
// })
// }
//
// const tuopanXAnimation = (model, newLocation = 0, time = 2000) => {
// // 返回一个新的Promise对象，用于处理异步操作
// return new Promise((resolve, reject) => {
// // 如果模型不存在或者新位置与当前位置相同，直接解决Promise
// if (!model || newLocation === tuopanLocation.x || tishengjiLocation.floor !== tuopanLocation.floor) {
// resolve()
// } else {
// // 根据新位置是否为0设置tuopanInishengji变量
// tuopanInishengji = newLocation === 0
//
// // 计算移动的距离
// let distance = newLocation - tuopanLocation.x
// // 创建TWEEN动画实例，将模型的位置移动到新位置
// let tween = new TWEEN.Tween(model.position)
// .to({ x: newLocation }, Math.abs(distance) / s * 16) // 移动到新位置，持续时间根据距离和速度计算
// .onComplete(() => {
// // 动画完成后更新模型的位置并解决Promise
// model.position.x = newLocation
// tuopanLocation.x = newLocation
// resolve()
// // 停止并清除动画实例
// tween.stop()
// tween = null
// })
// .start() // 开始动画
// }
// })
// }
//
// const tuopanYAnimation = (model, floor, newLocation = 0, time = 2000) => {
// // 返回一个新的Promise对象，用于异步操作
// return new Promise((resolve, reject) => {
// // 更新楼层位置信息
// tuopanLocation.floor = floor
// // 如果模型不存在或者目标位置与当前位置相同，直接解决Promise
// if (!model || tuopanLocation.y === newLocation) {
// resolve()
// }
// // 计算移动距离
// let distance = newLocation - tuopanLocation.y
// // 创建TWEEN动画实例，设置动画属性和持续时间
// let tween = new TWEEN.Tween(model.position)
// .to({ y: newLocation }, Math.abs(distance) / s * 16) // 根据距离和速度计算动画时间
// .onComplete(() => {
// // 动画完成后，更新模型位置和楼层位置信息，解决Promise并清理动画实例
// model.position.y = newLocation
// tuopanLocation.y = newLocation
// resolve()
// tween.stop()
// tween = null
// })
// .start() // 开始动画
// })
// }
//
// const addtuopan = (params) => {
// // 返回一个新的Promise对象，用于异步操作
// return new Promise((resolve, reject) => {
// try {
// // 创建OBJLoader实例，用于加载OBJ模型文件
// let objLoader1 = new OBJLoader()
// // 创建MTLLoader实例，用于加载MTL材质文件
// let mtlLoader1 = new MTLLoader()
// // 创建第二个OBJLoader实例，用于加载另一个OBJ模型文件
// let objLoader2 = new OBJLoader()
// // 创建第二个MTLLoader实例，用于加载另一个MTL材质文件
// let mtlLoader2 = new MTLLoader()
//
// // 加载MTL材质文件
// mtlLoader1.load('/model/jiaodongjichang.mtl', function(materials) {
// // 预加载材质
// materials.preload()
// // 设置第一个OBJLoader的材质
// objLoader1.setMaterials(materials)
//
// // 加载OBJ模型文件
// objLoader1.load('/model/jiaodongjichang.obj', function(object1) {
// // 将加载的模型添加到场景中
// params.scene.add(object1)
//
//
// resolve(object1)
// })
// })
// } catch (e) {
// // 如果发生异常，解析Promise，不返回任何值
// resolve()
// }
// })
// }
//
// // 每隔1800毫秒执行一次的定时器函数
// setInterval(() => {
// // 如果正在加载中
// if (isLoading) {
// // 如果动画队列的长度小于5
// if (animationLine.length < 5) {
// // 随机生成一个1到5之间的整数，表示楼层
// let floor = Math.ceil(Math.random() * 5)
//
// // 将一个新的动画函数推入动画队列
// animationLine.push(() => {
// // 如果tuopanInishengji为真
// if (tuopanInishengji) {
// // 返回一个Promise，当两个动画都完成后解决
// return Promise.all([tishengjiAnimation(keyidongModel, floor, storeyHeight[floor]), tuopanYAnimation(tuopanModel, floor, storeyHeight[floor])])
// } else {
// // 否则，只推入tishengjiAnimation动画函数到动画队列
// animationLine.push(() => tishengjiAnimation(keyidongModel, floor, storeyHeight[floor]))
// }
// })
// // 以50%的概率执行以下代码块
// if (Math.random() > 0.5) {
// // 推入tuopanXAnimation动画函数到动画队列，从storeyWidth[floor]位置开始
// animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[floor]))
// // 推入tuopanXAnimation动画函数到动画队列，从0位置开始
// animationLine.push(() => tuopanXAnimation(tuopanModel, 0))
// }
// }
// }
// }, 1800)
//
// export {
// tuopanInishengji,
// tishengjiAnimation,
// tuopanXAnimation,
// tuopanYAnimation,
// addtuopan
// }

340
src/views/board/参考/model.vue
Unescape Escape View File

@ -0,0 +1,340 @@
<!--<template>-->
<!-- <div>-->
<!-- <div class="bottomBg">-->
<!-- <div class="item1F" @click="toggle1">1F</div>-->
<!-- <div class="item2F" @click="toggle2">2F</div>-->
<!-- <div class="item3F" @click="toggle3">3F</div>-->
<!-- <div class="item4F" @click="toggle4">4F</div>-->
<!-- <div class="item5F" @click="toggle5">5F</div>-->
<!-- </div>-->
<!-- <div ref="threeJs" class="app-container">-->
<!-- </div>-->
<!-- <div ref="modelInfo" class="model" style="display: inline-block">-->
<!-- <Demo ref="modelInfoData"/>-->
<!-- </div>-->
<!-- <div ref="modelInfo1" class="model">-->
<!-- <Demo ref="modelInfo1Data"/>-->
<!-- </div>-->
<!-- <div ref="modelInfo2" class="model">-->
<!-- <Demo ref="modelInfo2Data"/>-->
<!-- </div>-->
<!-- <div ref="modelInfo3" class="model">-->
<!-- <Demo ref="modelInfo3Data"/>-->
<!-- </div>-->
<!-- <div ref="modelInfo4" class="model">-->
<!-- <Demo ref="modelInfo4Data"/>-->
<!-- </div>-->
<!-- <div style="position:absolute;top: 0;left: 0;">-->
<!-- <el-input-number v-model="num" @change="handleChange" :step="0.1" label="描述文字"></el-input-number>-->
<!-- <el-select v-model="floor" placeholder="去几楼" @change="toFloor">-->
<!-- <el-option-->
<!-- label="1楼"-->
<!-- :value="1"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="2楼"-->
<!-- :value="2"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="3楼"-->
<!-- :value="3"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="4楼"-->
<!-- :value="4"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="5楼"-->
<!-- :value="5"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- <el-button type="primary" @click="tuopanReset">托盘复位</el-button>-->
<!-- <el-button type="primary" @click="tuopanOut">托盘推出</el-button>-->
<!-- <el-button type="primary" @click="removetuopan">删除托盘</el-button>-->
<!-- <el-button type="primary" @click="toggle">显示/隐藏</el-button>-->
<!-- <el-select v-model="tuopanFloor" placeholder="去几楼">-->
<!-- <el-option-->
<!-- label="1楼"-->
<!-- :value="1"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="2楼"-->
<!-- :value="2"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="3楼"-->
<!-- :value="3"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="4楼"-->
<!-- :value="4"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="5楼"-->
<!-- :value="5"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- <el-button type="primary" @click="addtuopan">添加托盘</el-button>-->
<!-- <el-select v-model="fx" placeholder="方向">-->
<!-- <el-option-->
<!-- label="x"-->
<!-- value="x"-->
<!-- >-->
<!-- </el-option>-->
<!-- <el-option-->
<!-- label="z"-->
<!-- value="z"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- <el-input-number v-model="num1" :step="0.1" label="描述文字"></el-input-number>-->
<!-- <el-button type="primary" @click="agvAn">移动agv</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import * as THREE from 'three'-->
<!--import * as TWEEN from '@tweenjs/tween.js'-->
<!--import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'-->
<!--import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'-->
<!--import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'-->
<!--import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'-->
<!--import Demo from '@/components/model/demo.vue'-->
<!--import {-->
<!-- tuopanInishengji,-->
<!-- tishengjiAnimation,-->
<!-- tuopanXAnimation,-->
<!-- tuopanYAnimation,-->
<!-- addtuopan-->
<!--} from './animation'-->
<!--import {-->
<!-- keyidongModel,-->
<!-- tuopanModel,-->
<!-- scene,-->
<!-- camera,-->
<!-- renderer,-->
<!-- loadF1,-->
<!-- loadF2,-->
<!-- loadF3,-->
<!-- loadF4,-->
<!-- loadF5,-->
<!-- storeyHeight,-->
<!-- storeyWidth,-->
<!-- tuopanLocation,-->
<!-- animationLine, isLoading,-->
<!-- floor1Model,-->
<!-- floor2Model,-->
<!-- floor3Model,-->
<!-- floor4Model,-->
<!-- floor5Model, loadFOther, otherModel-->
<!--} from './setThree'-->
<!--/*import {-->
<!-- AGVAnimation, agvData, floorOrigin, floorData1, isAGVLoading, agvLabel, loadAGV-->
<!--} from './agv'*/-->
<!--const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100-->
<!--export default {-->
<!-- name: 'Model',-->
<!-- components: { Demo },-->
<!-- data() {-->
<!-- return {-->
<!-- num: -60,-->
<!-- num1: 90,-->
<!-- floor: 1,-->
<!-- tuopanFloor: 1,-->
<!-- fx: '',-->
<!-- rotate: 0-->
<!-- }-->
<!-- },-->
<!-- mounted() {-->
<!-- this.$refs.threeJs.appendChild(renderer.domElement)-->
<!-- // controls.rotateSpeed = -controls.rotateSpeed;-->
<!-- // controls.enableZoom = false-->
<!-- // loadF([ 'tishengji_tuopan'])-->
<!-- // loadF1([ 'changfang005', 'liku005', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan', 'Uxingxian'])-->
<!-- // loadF2(['2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'AGVchongdianzhuang005','changfang002', 'changfang003',])-->
<!-- loadF1([])-->
<!-- loadF2(['AGVchongdianzhuang002', 'changfang002'])-->
<!-- loadF3(['AGVchongdianzhuang003', 'changfang003', 'quanzidongchaibaojizhaungpeixian003'])-->
<!-- loadF4([])-->
<!-- loadF5(['AGVchongdianzhuang005', '2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'changfang005', 'liku005', 'Uxingxian'])-->
<!-- loadFOther(['tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan'])-->
<!-- // loadF(['changfang002', 'changfang003', 'changfang005'])-->
<!--/*// 创建CSS2DObject-->
<!-- agvLabel['2AGV'] = new CSS2DObject(this.$refs.modelInfo)-->
<!-- agvLabel['3AGV'] = new CSS2DObject(this.$refs.modelInfo1)-->
<!-- agvLabel['5CCAGV'] = new CSS2DObject(this.$refs.modelInfo2)-->
<!-- agvLabel['5BFAGV'] = new CSS2DObject(this.$refs.modelInfo3)-->
<!-- agvLabel['5CTU'] = new CSS2DObject(this.$refs.modelInfo4)-->
<!-- loadAGV(['chacheshiAGV002', 'chacheshiAGV003', 'chacheshiAGV005', 'beifushiAGV005', 'CTU005'])*/-->
<!-- // setInterval(()=>{-->
<!-- // labelObject2AGV.position.x +=0.1-->
<!-- // labelObject2AGV.position.y +=0.1-->
<!-- // labelObject2AGV.position.z +=0.1-->
<!-- // },40)-->
<!--// 渲染循环-->
<!-- },-->
<!-- methods: {-->
<!-- handleChange() {-->
<!--/* AGVAnimation('5CTU', '5CTU', 'x', this.num)*/-->
<!-- // tuopanModel.position.x = this.num-->
<!-- },-->
<!-- toFloor(e) {-->
<!-- animationLine.push(() => {-->
<!-- if (tuopanInishengji) {-->
<!-- return Promise.all([tishengjiAnimation(keyidongModel, e, storeyHeight[e]), tuopanYAnimation(tuopanModel, e, storeyHeight[e])])-->
<!-- } else {-->
<!-- animationLine.push(() => tishengjiAnimation(keyidongModel, e, storeyHeight[e]))-->
<!-- }-->
<!-- })-->
<!-- },-->
<!-- tuopanReset() {-->
<!-- animationLine.push(() => tuopanXAnimation(tuopanModel, 0))-->
<!-- },-->
<!-- tuopanOut() {-->
<!-- animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[tuopanLocation.floor]))-->
<!-- },-->
<!-- removetuopan() {-->
<!-- scene.remove(tuopanModel)-->
<!-- tuopanModel = null-->
<!-- },-->
<!-- async addtuopan() {-->
<!-- scene.remove(tuopanModel)-->
<!-- tuopanModel = null-->
<!-- tuopanModel = await addtuopan({ scene })-->
<!-- scene.add(tuopanModel)-->
<!-- tuopanModel.position.x = storeyWidth[this.tuopanFloor]-->
<!-- tuopanModel.position.y = storeyHeight[this.tuopanFloor]-->
<!-- tuopanLocation.floor = this.tuopanFloor-->
<!-- tuopanLocation.y = storeyHeight[this.tuopanFloor]-->
<!-- tuopanLocation.x = storeyWidth[this.tuopanFloor]-->
<!-- },-->
<!--/* agvAn() {-->
<!-- this.rotate -= this.num1-->
<!-- AGVAnimation('3AGV', 'rotate', this.rotate)-->
<!-- },*/-->
<!-- toggle() {-->
<!-- console.log(agvData)-->
<!-- floor1Model.visible = true-->
<!-- floor2Model.visible = true-->
<!-- floor3Model.visible = true-->
<!-- floor4Model.visible = true-->
<!-- floor5Model.visible = true-->
<!-- otherModel.visible = true-->
<!--/* agvData.floor2AGVGroup.visible = true-->
<!-- agvData.floor3AGVGroup.visible = true-->
<!-- agvData.floor5BFAGVGroup.visible = true-->
<!-- agvData.floor5CCAGVGroup.visible = true-->
<!-- agvData.floor5CTUGroup.visible = true*/-->
<!-- this.$refs.modelInfoData.$el.style.display = 'inline-block'-->
<!-- this.$refs.modelInfo1Data.$el.style.display = 'inline-block'-->
<!-- this.$refs.modelInfo2Data.$el.style.display = 'inline-block'-->
<!-- this.$refs.modelInfo3Data.$el.style.display = 'inline-block'-->
<!-- this.$refs.modelInfo4Data.$el.style.display = 'inline-block'-->
<!-- },-->
<!-- toggle1() {-->
<!-- floor1Model.visible = true-->
<!-- floor2Model.visible = false-->
<!-- floor3Model.visible = false-->
<!-- floor4Model.visible = false-->
<!-- floor5Model.visible = false-->
<!-- otherModel.visible = false-->
<!-- this.$refs.modelInfoData.$el.style.display = 'none'-->
<!-- this.$refs.modelInfo1Data.$el.style.display = 'none'-->
<!-- this.$refs.modelInfo2Data.$el.style.display = 'none'-->
<!-- this.$refs.modelInfo3Data.$el.style.display = 'none'-->
<!-- this.$refs.modelInfo4Data.$el.style.display = 'none'-->
<!--/* agvData.floor2AGVGroup.visible = false-->
<!-- agvData.floor3AGVGroup.visible = false-->
<!-- agvData.floor5BFAGVGroup.visible = false-->
<!-- agvData.floor5CCAGVGroup.visible = false-->
<!-- agvData.floor5CTUGroup.visible = false*/-->
<!-- },-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style lang="less" scoped>-->
<!--.app-container {-->
<!-- padding: 0;-->
<!--}-->
<!--.model {-->
<!-- position: relative;-->
<!--}-->
<!--.bottomBg {-->
<!-- position: absolute;-->
<!-- bottom: 0;-->
<!-- left: 50%;-->
<!-- transform: translateX(-50%);-->
<!-- width: 100vw;-->
<!-- height: 2.656vw;-->
<!-- background-image: url("~@/assets/model/bottomBg.png");-->
<!-- background-size: 100% 100%;-->
<!-- background-repeat: no-repeat;-->
<!-- //.item1F, .item2F, .item3F, .item4F, .item5F {-->
<!-- // position: absolute;-->
<!-- // top: 45%;-->
<!-- // transform: translate(-50%, -50%);-->
<!-- // background-size: 100% 100%;-->
<!-- // background-repeat: no-repeat;-->
<!-- // width: 4.6vw;-->
<!-- // height: 1.32vw;-->
<!-- // line-height: 1.32vw;-->
<!-- // text-align: center;-->
<!-- // color: #fff;-->
<!-- //}-->
<!-- //-->
<!-- //.item1F {-->
<!-- // left: 39%;-->
<!-- // background-image: url("~@/assets/model/unselected.png");-->
<!-- //}-->
<!-- //-->
<!-- //.item2F {-->
<!-- // left: 44.5%;-->
<!-- // background-image: url("~@/assets/model/unselected.png");-->
<!-- //}-->
<!-- //-->
<!-- //.item3F {-->
<!-- // left: 50%;-->
<!-- // background-image: url("~@/assets/model/unselected.png");-->
<!-- //}-->
<!-- //-->
<!-- //.item4F {-->
<!-- // left: 55.5%;-->
<!-- // background-image: url("~@/assets/model/unselected.png");-->
<!-- //}-->
<!-- //-->
<!-- //.item5F {-->
<!-- // left: 61%;-->
<!-- // background-image: url("~@/assets/model/unselected.png");-->
<!-- //}-->
<!--}-->
<!--</style>-->

2
src/views/board/setThree.js → src/views/board/参考/setThree.js
Unescape Escape View File

@ -1,3 +1,4 @@
/*
import * as THREE from 'three' import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer' import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
@ -408,3 +409,4 @@ export {
floor5Model, floor5Model,
otherModel, otherModel,
} }
*/
Write Preview
Loading…
Cancel
Save