案例展示
创建机床打孔场景
<template>
<div style="position: relative">
<div id="TO" :style="{ width: width + '%', height: height + 'px' }"></div>
<el-button type="primary" @click="handelAction" size="small" class="startBtn">开始打孔</el-button>
</div>
</template>
<script setup>
import { getResourceBase, resUrl } from '../../utils/resourceUrl'
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 sceneModel1, sceneModel2
// 模型数据
let modelList = [
{
id: 7419,
modelName: 'jichuang',
base: {
modelUrl: resUrl('/editor/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: 7420,
modelName: 'plane',
base: {
modelUrl: resUrl('/editor/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: 7421,
modelName: 'kaikong',
base: {
modelUrl: resUrl('/editor/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 }
}
]
// 初始化场景
const initScene = () => {
let mainSceneDom = document.getElementById('TO')
// 主场景参数
const mainSceneData = {
params: {
resource: {
serverAddress: getResourceBase()
}
},
modelList: modelList,
scene: {
// PIP 小窗仅支持 WebGL 渲染路径
renderQuality: {
renderer: 'webgl'
},
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
}
}
}
TO = new ThingOrigin('easyBuild', mainSceneDom, mainSceneData, (TO) => {
//主场景
sceneModel1 = TO.scene.getObjectByName('jichuang') //机床模型
// console.log(sceneModel1)
sceneModel2 = TO.scene.getObjectByName('kaikong') //开孔模型
let jichuang = TO.scene.getObjectByName('1')
jichuang.position.set(-5, jichuang.position.y, jichuang.position.z)
// 等场景/渲染器就绪后再加 PIP（默认 WebGPU 不渲染小窗）
TO.camera.addPipView({
name: 'side-view', //视角名称
label: '打孔视角', //视角标签
position: { x: -0.37, y: 22.6, z: -23.8 }, //视角位置
lookAt: { x: 0, y: 0, z: 0 }, //视角朝向
anchor: 'top-right', //锚点
width: 200, //宽度
height: 105, //高度
padding: 8,
background: 0x2a1a1a, //背景颜色
clickToSwitch: false, //是否点击切换
followMain: false //是否跟随主视角
})
})
}
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 = [
{
jichuang: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '0.00', //2轴
axis1: '-5.00' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '0.00', //2轴
axis1: '-8.00' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '0.00', //2轴
axis1: '-11.90' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '0.00', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '83.40', //6轴
axis3: '0.00', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '83.40', //6轴
axis3: '-3.40', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '83.40', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '80.40', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '77.00', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '74.10', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '74.10', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '0.20' //柱体
}
},
{
jichuang: {
axis6: '74.10', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '-0.10' //柱体
}
},
{
jichuang: {
axis6: '77.50', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '-0.20' //柱体
}
},
{
jichuang: {
axis6: '80.50', //6轴
axis3: '-7.29995422363281', //3轴
axis2: '5.10', //2轴
axis1: '-13.92777099609375' //1轴-导轨
},
hole: {
cylinder: '-0.20' //柱体
}
},
{
jichuang: {
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.jichuang
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)
socket.preData = data
socket.preData1 = data1
socket.firstAct = false
return
}
//主场景和副场景的的机床动画
TO.machine.twinModel(sceneModel1, finalBindData, socket.preData, data, socket.timeStep)
TO.machine.twinModel(sceneModel2, finalBindData1, socket.preData1, data1, socket.timeStep)
socket.preData = data
socket.preData1 = data1
}
// 开始打孔
const handelAction = () => {
socket.firstAct = true
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>