案例展示
创建机床打孔场景
<template>
<div style="position: relative">
<div id="TO" :style="{ width: width + '%', height: height + 'px' }"></div>
<div id="subTO"></div>
<el-button type="primary" @click="handelAction" size="small" class="startBtn">开始打孔</el-button>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import { ElButton, ElInput, ElCard, ElMessage } from 'element-plus'
const props = defineProps({
width: {
type: Number,
default: 100
},
height: {
type: Number,
default: 400
}
})
onMounted(() => {
initScene()
})
let TO = null
let subTO = null
let sceneModel1, sceneModel2, scene1Model1, scene1Model2
// 初始化场景
const initScene = () => {
let mainSceneDom = document.getElementById('TO')
let subSceneDom = document.getElementById('subTO')
// 主场景参数
const mainSceneData = {
scene: {
background: {
type: 'color',
color: {
alpha: 1,
color: '#000000'
}
},
ground: {
active: false
}
},
camera: {
type: '',
position: {
x: -60,
y: 160,
z: 200
},
perspective: {
fov: 45,
near: 0.1,
far: 10000
}
},
lights: [],
helper: {
axes: {
active: false
},
grid: {
active: false
}
}
}
// 副场景参数
const subSceneData = {
camera: {
type: '',
position: {
x: -0.37,
y: 22.6,
z: -23.8
},
perspective: {
fov: 45,
near: 0.1,
far: 10000
}
},
views: [],
lights: [],
helper: {
axes: {
active: false
},
grid: {
active: false
}
}
}
TO = new ThingOrigin('easyBuild', mainSceneDom, mainSceneData)
subTO = new ThingOrigin('easyBuild', subSceneDom, subSceneData)
// 模型数据
const modelList = [
{
id: 11,
modelName: 'lathe',
base: {
modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/518070752'
},
modelType: 'glb',
scale: { x: 10, y: 10, z: 10 },
position: { x: 20, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 }
},
{
id: 12,
modelName: 'plane',
base: {
modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/429453068'
},
modelType: 'glb',
scale: { x: 5, y: 5, z: 5 },
position: { x: -32, y: 0, z: -7 },
rotation: { x: 0, y: 0, z: 0 }
},
{
id: 13,
modelName: 'open',
base: {
modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/340835384'
},
modelType: 'gltf',
scale: { x: 1, y: 1, z: 1 },
position: { x: -0.32, y: 19.65, z: -20.8 },
rotation: { x: -1.6, y: 0, z: 0 }
}
]
// 加载模型
modelList.forEach((modelInfo) => {
TO.model.loadModel(modelInfo).then((fileModel) => {
let model
let model1
model = fileModel
model1 = model.clone()
TO.scene.add(model)
subTO.scene.add(model1)
console.log(TO.scene.children)
if (TO.scene.children.length >= 4) {
//主场景
sceneModel1 = TO.scene.getObjectByProperty('name', 'lathe') //机床模型
console.log(sceneModel1)
sceneModel2 = TO.scene.getObjectByProperty('name', 'open') //开孔模型
let jichuang = TO.scene.getObjectByProperty('name', '1')
jichuang.position.set(-5, jichuang.position.y, jichuang.position.z)
//副场景
scene1Model1 = subTO.scene.getObjectByProperty('name', 'lathe') //机床模型
scene1Model2 = subTO.scene.getObjectByProperty('name', 'open') //开孔模型
}
})
})
}
let socket = {
ws: null,
firstAct: true,
preTime: 0,
timeStep: 0,
preData: {},
preData1: {},
timer: 0
}
let finalBindData = [
{
axis: 'x',
rotateUnit: 'rad',
dataUrl: 'root.axis1',
modelName: '1',
reverse: 1,
simulateRange: [-13.92777099609375, -5],
animateType: 'move'
},
{
axis: 'z',
rotateUnit: 'rad',
dataUrl: 'root.axis2',
modelName: '2',
reverse: 1,
simulateRange: [0, 5.1],
animateType: 'move'
},
{
axis: 'x',
rotateUnit: 'rad',
dataUrl: 'root.axis3',
modelName: '3',
reverse: 1,
simulateRange: [-7.29995422363281, 0],
animateType: 'move'
},
{
axis: 'x',
rotateUnit: 'rad',
dataUrl: 'root.axis6',
modelName: '6',
reverse: 1,
simulateRange: [83.4, 74.1],
animateType: 'move'
}
]
let finalBindData1 = [
{
axis: 'y',
rotateUnit: 'rad',
dataUrl: 'root.cylinder',
modelName: '柱体',
reverse: 1,
simulateRange: [-0.2, 0.2],
animateType: 'move'
}
]
const action = [
{
lathe: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '0.00', //2轴
axis1: '-5.00' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '0.00', //2轴
axis1: '-8.00' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '0.00', //2轴
axis1: '-11.90' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '0.00', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '83.40', //6轴
axis3: '-3.40', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '83.40', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '80.40', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '77.00', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '74.10', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '74.10', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
lathe: {
axis6: '74.10', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '-0.10' //柱体
}
},
{
lathe: {
axis6: '77.50', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '-0.20' //柱体
}
},
{
lathe: {
axis6: '80.50', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '-0.20' //柱体
}
},
{
lathe: {
axis6: '83.40', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '-0.20' //柱体
}
}
]
// websocket数据处理
const twinSocket = (e) => {
let data
let data1
let random
//websocket数据代码
try {
const parsedData = JSON.parse(e.data)
data = parsedData.lathe
data1 = parsedData.hole
random = Number(parsedData.rough)
} catch (e) {
console.log('eeeee', e)
// console.warn('数据解析失败')
return
}
let cTime = new Date().getTime()
//取决于推数几次后有变化
socket.timeStep = (cTime - socket.preTime) * 1
socket.preTime = cTime
//首次传值，重置关节姿态
if (socket.firstAct) {
//主场景
TO.machine.setModel(sceneModel1, finalBindData, data)
TO.machine.setModel(sceneModel2, finalBindData1, data1)
//副场景
subTO.machine.setModel(scene1Model1, finalBindData, data)
subTO.machine.setModel(scene1Model2, finalBindData1, data1)
socket.preData = data
socket.preData1 = data1
socket.firstAct = false
return
}
//主场景和副场景的的机床动画
TO.machine.twinModel(sceneModel1, finalBindData, socket.preData, data, socket.timeStep)
TO.machine.twinModel(scene1Model1, finalBindData, socket.preData, data, socket.timeStep)
socket.preData = data
//主场景和副场景的开孔动画
subTO.machine.twinModel(sceneModel2, finalBindData1, socket.preData1, data1, socket.timeStep)
subTO.machine.twinModel(scene1Model2, finalBindData1, socket.preData1, data1, socket.timeStep)
socket.preData1 = data1
}
// 开始打孔
const handelAction = () => {
let i = 0
//测试数据-模拟websocket数据
socket.timer = setInterval(() => {
twinSocket({ data: JSON.stringify(action[i]) })
if (i === action.length - 1) {
ElMessage.success('打孔结束')
clearInterval(socket.timer)
}
i++
}, 1000)
}
</script>
<style scoped>
#TO {
width: 100%;
height: 400px;
position: relative;
}
#subTO {
width: 200px;
height: 100px;
position: absolute;
right: 10px;
top: 10px;
}
.startBtn {
position: absolute;
width: 80px;
right: 10px;
top: 120px;
}
</style>