ThingOrigin.js

简介 ​

<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>

什么是 ThingOrigin？ ​

ThingOrigin.js 是一个基于 three.js、physx 封装的 3D 引擎框架，专为 web 端设计。它的目标是简化开发者的开发过程 ，通过提供零基础、低门槛的方式，帮助用户快速搭建动态 3D 场景和模拟物理场景。

ThingOrigin 解决了传统 3D 开发人员投入大、开发效率低、场景搭建周期长、部署难等问题。无论是初学者还是有经验的开发人员，都能轻松上手， 构建丰富的可视化应用。

ThingOrigin 有什么优势？ ​

轻量化：极简的单文件呈现形式，无须安装额外插件，单个 JS 文件即可部署运行， 真正实现「即开即用」，小巧高效，丝滑的 3D 性能体验。

模块化：搭 载 100 + 标准化模块矩阵，覆盖场景搭建、交互逻辑、特效渲染等全链路开发需求，支持「乐高式」自由组合，轻松搭建数 字孪生场景。

易学易用：深度优化 Three.js API，代码量直降 60%，采 用极简开发范式，5 分钟快速搭建三维场景，让开发者直击业务核心，轻松跨越 3D 开发门槛。

数据驱动：内置标准化数据描述模块，贯穿动画生成、效果控制、逻辑交互等全流程 开发环节，支持「参数化积木」式自由组装，让复杂功能转化为可视化数据模块，一键实现动态效果的精准调控与智能呈现。