initial:初始化机场模型页面，展示boj模型和mtl（注：胶东机场obj为392MB，加载缓慢，大兴机场仅为7.6MB）
refactor(board): 京源项目的参考代码放入参考文件夹boardTest
parent
00d6897833
commit
dbe5b7728b
@ -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>
|
||||
@ -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>-->
|
||||
@ -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>-->
|
||||
Loading…
Reference in New Issue