快速上手
本节将为您详细介绍如何在项目中运用 ThingOrigin.js。
如果您还未安装 ThingOrigin.js，请前往 安装。
接下来，我们将以焊接场景为具体案例，逐步演示如何创建场景、导入模型，并完成动画的注入，带您完整掌握这一全过程。
1. 搭建场景
先准备一个宽 500px , 高 500px 的容器。
vue
<template>
<div id="TO"></div>
</template>
<style>
#TO {
width: 500px;
height: 500px;
}
</style>渲染场景。
ts
//场景名为 “easyBuild”
let TO = new ThingOrigin("easyBuild", document.getElementById("TO"))2. 加载模型
模型数据可以采用多种格式，如：GLTF、GLB、FBX 等，具体的模型参数，请参考 模型参数。
下面以 GLTF 模型为例。
ts
// 模型数据
let modelInfo = {
modelType: "gltf", //模型类型
modelName: "weld", //模型名称
base: {
modelUrl: "/public/models/weld.gltf", //模型地址
}
}将 modelInfo 参数传入 loadModel 方法中，异步加载后将模型添加到场景中。
ts
//加载模型
TO.model.loadModel(modelInfo).then((model: any) => {
TO.scene.add(model); // 将模型添加到场景
})效果预览
<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 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
}
})
let TO
let robotModel
onMounted(() => {
//初始化场景
TO = new ThingOrigin('easyBuild', document.getElementById('TO'), {
params: {
resource: {
serverAddress: getResourceBase()
}
},
helper: {
//辅助工具
axes: {
active: false
},
grid: {
//网格
active: false
}
},
scene: {
environment: {
intensity: 0.78
},
background: {
//背景工厂
type: 'workshop',
intensity: 2.1,
workshop: {
id: 7243,
base: {
modelUrl: '/editor/model2/loadFileAsId/114783024'
},
scale: {
x: 10,
y: 10,
z: 10
},
modelType: 'glb'
}
},
ground: {
active: false
}
},
// 光源：厂房偏亮、前景设备保留层次
lights: [
{
name: 'factory_hemisphere',
type: 'HemisphereLight',
color: '#c8d6e8',
groundColor: '#6a6660',
intensity: 0.58,
position: { x: 0, y: 220, z: 0 },
visible: true
},
{
name: 'factory_ambient',
type: 'AmbientLight',
color: '#909cad',
intensity: 0.24,
visible: true
},
{
name: 'factory_main_sun',
type: 'DirectionalLight',
castShadow: true,
color: '#eef3fa',
intensity: 1.25,
position: { x: 90, y: 280, z: 70 },
visible: true
},
{
name: 'factory_fill_directional',
type: 'DirectionalLight',
castShadow: false,
color: '#a8b8c8',
intensity: 0.42,
position: { x: -140, y: 120, z: -80 },
visible: true
},
{
name: 'factory_top_fill',
type: 'DirectionalLight',
castShadow: false,
color: '#dce4f0',
intensity: 0.55,
position: { x: 0, y: 320, z: 10 },
visible: true
}
],
camera: {
position: {
x: 0,
y: 50,
z: 250
}
}
})
let scaleNum = 15
// 机械臂模型数据
let weldInfo = {
modelType: 'gltf', //模型类型
modelName: 'weld', //模型名称
base: {
modelUrl: resUrl('/editor/model2/loadFileAsId/695306120') // 模型地址
},
scale: {
//模型缩放大小
x: scaleNum,
y: scaleNum,
z: scaleNum
},
position: {
y: 1
}
}
//汽车模型数据据
let carInfo = {
modelType: 'gltf', //模型类型
modelName: 'car', //模型名称
base: {
modelUrl: resUrl('/editor/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) => {
robotModel = model
TO.scene.add(model) //将模型添加到场景
})
})
function handelAction() {
moveRobot(robotModel) // 6 轴机械臂运动起来
}
function moveRobot(weld) {
if (!weld) return
// 先设置初始姿态，再驱动关节运动
TO.machine.setModel(weld, axis, startData.robot1)
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;
}
.startBtn {
position: absolute;
width: 80px;
right: 10px;
top: 10px;
}
</style>