案例展示
创建机床打孔场景
<template>
<div style="position: relative">
<div id="TO" :style="{ width: width + '%',height: height + 'px' }"></div>
<div id="subTO"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
const props = defineProps({
width: {
type: Number,
default: 100,
},
height: {
type: Number,
default: 400,
},
});
onMounted(() => {
let mainSceneDom = document.getElementById("TO")
let subSceneDom = document.getElementById("subTO")
// 主场景参数
const mainSceneData = {
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,
},
},
}
let TO = new ThingOrigin("easyBuild", mainSceneDom,mainSceneData )
let subTO = new ThingOrigin("easyBuild", subSceneDom,subSceneData )
// 模型数据
const modelList = [
{
id: 11,
modelName: 'lathe',
base:{
modelUrl:`${import.meta.env.BASE_URL}models/plane/jichuang.glb`
},
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:`${import.meta.env.BASE_URL}models/plane/plane.glb`
},
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:`${import.meta.env.BASE_URL}models/plane/kaikong.gltf`
},
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 },
}
]
let sceneModel1, sceneModel2, scene1Model1, scene1Model2
// 加载模型
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')//开孔模型
handelAction()
}
});
})
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 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.warn('数据解析失败')
return;
}
let cTime = new Date().getTime();
//取决于推数几次后有变化
socket.timeStep = (cTime - socket.preTime) * 1;
socket.preTime = cTime;
// console.log('传入数据data', data);
// console.log('传入数据data1', data1);
//首次传值，重置关节姿态
if (socket.firstAct) {
// console.log('finalBindData', finalBindData)
// console.log('首次进入，重置', sceneModel2)
//主场景
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 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"//柱体
},
},
]
const handelAction = () => {
let i = 0;
//测试数据
socket.timer = setInterval(() => {
twinSocket({ data: JSON.stringify(action[i]) })
if (i === action.length - 1){
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;
}
</style>