快速开始

本节将介绍如何在项目中使用 ThingOrigin.js 快速搭建三维场景。

用法

npm 或者 pnpm 安装引入

main.ts

// 引入3d引擎
import "thingorigin"
// 使用3d引擎
console.dir(ThingOrigin)

直接引入

main.ts

// 引入3d引擎
import "@/utils/ThingOrigin2.0"
// 引擎ts类型检测
declare global {
    const ThingOrigin: {
        [key: string]: any
    }
}

项目使用

预览效果

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

实现步骤

1. 创建一个容器

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

2. 创建场景

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,
            },
        },
    ],
})

3. 准备模型数据 模型数据可以采用多种格式，如：OBJ、GLTF、FBX 等，具体格式参考 ThingOrigin.js 模型数据格式。 下面以 GLTF 模型为例

// 焊接模型数据
let modelInfo = {
    id: 1,
    modelType: "gltf",
    modelName: "weld",
    base: {
        modelUrl: "/public/models/weld.gltf", // 模型地址
    },
    scale: {
        x: 12,
        y: 12,
        z: 12,
    },
}
//汽车模型数据
let carInfo = {
    id: 2,
    modelType: "gltf",
    modelName: "car",
    base: {
        modelUrl: "/public/models/car.gltf",
    },
    scale: {
        x: 12,
        y: 12,
        z: 12,
    },
}

4. 加载模型

TO.model.initFileModel(carInfo).then((model: any) => {
    TO.scene.add(model.scene) // 添加到场景
})
TO.model.initFileModel(weldInfo).then((model: any) => {
    TO.scene.add(model.scene)
})

5. 在模型添加到场景后，添加模型动画

import animateData1 from "./utils/weld/animateData1.js";
import animateData2 from "./utils/weld/animateData2.js";
TO.model.initFileModel(weldInfo).then((model: any) => {
    TO.scene.add(model.scene)
    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)
})

更多案例

请查阅 ThingOrigin.js 案例 文档