简介

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

<script setup>
import { onMounted } from 'vue';
import animateData1 from "./utils/weld/animateData1.js";
import animateData2 from "./utils/weld/animateData2.js";
const props = defineProps({
    width: {
        type: Number,
        default: 100,
    },
    height: {
        type: Number,
        default: 400,
    },
});

onMounted(() => {
    let sceneDom = document.getElementById("TO")

    let TO = new ThingOrigin("easyBuild", sceneDom, {
        helper: {
            axes: {
                active: false,
            },
            grid: {
                active: false,
            },
        },
        lights: [
            {
                name: "light1",
                type: "AmbientLight",
                color: "#fff",
                intensity: 1,
                visible: true,
                position: {
                    x: 150,
                    y: 150,
                    z: 150,
                },
            },
        ],
    })

    // 模型数据
    let weldInfo = {
        id: 1,
        modelType: "gltf",
        modelName: "weld",
        base: {
            modelUrl: `${import.meta.env.BASE_URL}models/weld.gltf`, // 模型地址
        },
        scale: {
            x: 12,
            y: 12,
            z: 12,
        },
    }
    let carInfo = {
        id: 2,
        modelType: "gltf",
        modelName: "car",
        base: {
            modelUrl: `${import.meta.env.BASE_URL}models/car.gltf`,
        },
        scale: {
            x: 12,
            y: 12,
            z: 12,
        },
    }
    TO.model.initFileModel(carInfo).then((model) => {
        TO.scene.add(model.scene)
    })
    TO.model.initFileModel(weldInfo).then((model) => {
        TO.scene.add(model.scene);
        //6轴机器人运动起来
        moveRobot();
    })

    function moveRobot() {
        let weld = TO.scene.getObjectByProperty("name", "weld")
        TO.machine.twinModel(
            weld,
            animateData1.axis,
            animateData1.robot1,
            animateData1.robot2,
            2000
        )
        setTimeout(() => {
            TO.machine.twinModel(
                weld,
                animateData2.axis,
                animateData2.robot1,
                animateData2.robot2,
                2000
            )
        }, 2200)
    }
});
</script>

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

什么是 ThingOrigin？

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

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

ThingOrigin 有什么优势？

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

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

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

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