快速上手

本节将为您详细介绍如何在项目中运用 ThingOrigin.js。

如果您还未安装 ThingOrigin.js，请前往 安装。

接下来，我们将以焊接场景为具体案例，逐步演示如何创建场景、导入模型，并完成动画的注入，带您完整掌握这一全过程。

1. 搭建场景

先准备一个宽 500px , 高 500px 的容器。

<template>
    <div id="TO"></div>
</template>
<style>
#TO {
    width: 500px;
    height: 500px;
}
</style>

渲染场景。

//场景名为 “easyBuild”
let TO = new ThingOrigin("easyBuild", document.getElementById("TO"))

2. 加载模型

模型数据可以采用多种格式，如：GLTF、GLB、FBX 等，具体的模型参数，请参考 模型参数。
下面以 GLTF 模型为例。

// 模型数据
let modelInfo = {
    modelType: "gltf", //模型类型
    modelName: "weld",  //模型名称
    base: {
        modelUrl: "/public/models/weld.gltf",  //模型地址
    }
}

将 modelInfo 参数传入 loadModel 方法中，异步加载后将模型添加到场景中。

//加载模型
TO.model.loadModel(modelInfo).then((model: any) => {
    TO.scene.add(model); // 将模型添加到场景
})

效果预览

<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'
            },
            ground: {
                active: false
            }
        },
        camera: {
            position: {
                x: 0,
                y: 50,
                z: 250
            }
        }
    })

    let scaleNum = 15
    // 机械臂模型数据
    let weldInfo = {
        modelType: 'gltf', //模型类型
        modelName: 'weld', //模型名称
        base: {
            modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/695306120' // 模型地址
        },
        scale: {
            //模型缩放大小
            x: scaleNum,
            y: scaleNum,
            z: scaleNum
        },
        position: {
            y: 1
        }
    }
    //汽车模型数据据
    let carInfo = {
        modelType: 'gltf', //模型类型
        modelName: 'car', //模型名称
        base: {
            modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/606688436' // 模型地址
        },
        scale: {
            //模型缩放大小
            x: scaleNum,
            y: scaleNum,
            z: scaleNum
        },
        position: {
            y: 1
        }
    }

    //加载模型
    TO.model.loadModel(carInfo).then((model) => {
        TO.scene.add(model) //将模型添加到场景
    })
    //加载模型
    TO.model.loadModel(weldInfo).then((model) => {
        TO.scene.add(model) //将模型添加到场景
        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>

更多案例

请查阅 ThingOrigin.js 案例