案例展示

创建焊接场景

<template>
    <div id="TO" :style="{ width: width + '%', height: height + 'px' }"></div>
</template>

<script setup>
import { onMounted } from 'vue';
//导入关节运动描述数据
import axis from "./utils/weld/axis.js"
//导入起始状态关节数据
import startData from "./utils/weld/startData.js"
//导入结束状态关节数据
import endData from "./utils/weld/endData.js"
//导入第二个起始状态关节数据
import startDataNext from "./utils/weld/startDataNext.js"
//导入第二个结束状态关节数据
import endDataNext from "./utils/weld/endDataNext.js"

const props = defineProps({
    width: {
        type: Number,
        default: 100,
    },
    height: {
        type: Number,
        default: 400,
    },
});

onMounted(() => {
    //初始化场景
    let TO = new ThingOrigin("easyBuild", document.getElementById("TO"), {
        helper: {//辅助工具
            axes: {
                active: false,
            },
            grid: { //网格
                active: false,
            },
        },
        scene: {
            background: { //背景工厂
                type: 'workshop',
                workshop: {
                    url: `http://124.70.30.193:8084/model2/loadFileByName/workshop`
                }
            }
        }
    });

    let scaleNum = 15;
    // 机械臂模型数据
    let weldInfo = {
        modelType: "gltf",//模型类型
        modelName: "weld",//模型名称
        base: {
            modelUrl: `${import.meta.env.BASE_URL}models/weld.gltf`, // 模型地址
        },
        scale: {//模型缩放大小
            x: scaleNum,
            y: scaleNum,
            z: scaleNum,
        },
        position:{
            y: 1
        }
    }
    //汽车模型数据据
    let carInfo = {
        modelType: "gltf",//模型类型
        modelName: "car",//模型名称
        base: {
            modelUrl: `${import.meta.env.BASE_URL}models/car.gltf`,  // 模型地址
        },
        scale: {//模型缩放大小
            x: scaleNum,
            y: scaleNum,
            z: scaleNum,
        },
           position:{
            y: 1
        }
    }

    //加载模型
    TO.model.initFileModel(carInfo).then((model) => {
        TO.scene.add(model.scene);//将模型添加到场景
    })
    //加载模型
    TO.model.initFileModel(weldInfo).then((model) => {
        TO.scene.add(model.scene);//将模型添加到场景
        moveRobot(); // 6 轴机械臂运动起来
    })

    function moveRobot() {
        //获取名称为 weld 的 6 轴机械臂
        let weld = TO.scene.getObjectByProperty("name", "weld");
        //起始与结束两个姿态间平滑运动
        TO.machine.twinModel(
            weld,
            axis, //axis 代表 6 轴关节数据
            startData.robot1, //startData 代表 6 轴关节数据的起止位置
            endData.robot1, //endData 代表 6 轴关节数据的结束位置
            2000
        )
        //间隔 2200ms 再次启动下一个运动状态
        setTimeout(() => {
            TO.machine.twinModel(
                weld,
                axis,
                startDataNext.robot1,
                endDataNext.robot1,
                2000
            )
        }, 2200)
    }
});
</script>

<style scoped>
#TO {
    width: 100%;
    height: 400px;
    position: relative;
}
</style>