案例展示

将子模型关绑定至父模型中

<template>
    <div style="position: relative">
        <div id="TO"></div>

        <el-button :disabled="!isActive" type="primary" size="small" id="bind" @click="bindModel()"
            >绑定模型</el-button
        >
        <el-button
            :disabled="!isActive || !isBind"
            type="primary"
            size="small"
            id="unbind"
            @click="unbindModel()"
            >解绑模型</el-button
        >
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElButton, ElInput, ElCard } from 'element-plus'

const isActive = ref(false)
let TO, cube, robot
onMounted(() => {
    initScene()
})

function initScene() {
    // 初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        helper: {
            // 辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 0,
                y: 50,
                z: 100
            }
        }
    })

    //加载立方体
    createCube()

    //导入模型
    TO.model
        .loadModel({
            modelName: 'fileModel-' + new Date().getTime(), //模型名称
            base: {
                modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/56201403' //模型地址
            },
            modelType: 'gltf', //模型类型
            position: {
                //位置
                x: 0,
                y: 0,
                z: 0
            },
            scale: {
                //缩放大小
                x: 1,
                y: 1,
                z: 1
            },
            rotation: {
                //旋转角度
                x: 0,
                y: 0,
                z: 0
            },
            userData: {
                sim: {
                    rotationOffset: {
                        x: 0,
                        y: 0,
                        z: 1.5708
                    },
                    holdPosition: {
                        x: 6,
                        y: 0,
                        z: 0
                    }
                }
            }
        })
        .then((model) => {
            robot = model
            //添加模型到场景中
            TO.scene.add(robot)
            isActive.value = true
        })
}

function createCube() {
    //创建立方体
    cube = TO.model.initCube({
        position: {
            //位置
            x: 25,
            y: 5,
            z: 0
        },
        material: {
            //材质
            color: '#4B4B42'
        },
        userData: {
            sim: {
                rotationOffset: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                holdPosition: {
                    x: 0,
                    y: 0,
                    z: 0
                }
            }
        }
    })
    //添加到场景中
    TO.scene.add(cube)
}

let WS30_2, WS30_3, robotEnd
let isBind = ref(false)

//绑定模型
async function bindModel() {
    if (isBind.value) return

    //获取模型-轴体
    WS30_2 = TO.scene.getObjectByProperty('name', 'WS30-2')
    WS30_3 = TO.scene.getObjectByProperty('name', 'WS30-3')
    //旋转轴-到达地面位置
    await rotateModel_down()

    //获取模型-柱体
    robotEnd = robot.getObjectByProperty('name', '柱体')
    //绑定模型-绑定到轴体
    await TO.animate.attachModel(robotEnd, cube)

    //旋转轴-回到初始位置
    await rotateModel_up()

    isBind.value = true
}

//解绑模型
async function unbindModel() {
    if (!isBind.value) return

    //旋转轴-到达地面位置
    await rotateModel_down()

    //解绑模型
    await TO.animate.removeAttach(robotEnd, cube)

    TO.scene.add(cube)

    //旋转轴-回到初始位置
    await rotateModel_up()

    isBind.value = false
}

//旋转轴-到达地面位置（返回Promise以便等待等待）
async function rotateModel_down() {
    return new Promise((resolve) => {
        //启动旋转动画

        TO.animate.rotateAxis(WS30_2, 'z', 0, -45, 2000, 'deg')
        TO.animate.rotateAxis(WS30_3, 'z', 0, -10, 2000, 'deg')

        //设置定时器，在动画持续时间（2000ms）后 resolve
        setTimeout(() => resolve(), 2000)
    })
}

//旋转轴-回到初始位置（返回Promise以便等待等待）
async function rotateModel_up() {
    return new Promise((resolve) => {
        TO.animate.rotateAxis(WS30_2, 'z', -45, 0, 2000, 'deg')
        TO.animate.rotateAxis(WS30_3, 'z', -10, 0, 2000, 'deg')
        //设置定时器，在动画持续时间（2000ms）后 resolve
        setTimeout(() => resolve(), 2000)
    })
}
</script>

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

#bind {
    position: absolute;
    top: 10px;
    right: 10px;
}

#unbind {
    position: absolute;
    top: 10px;
    right: 90px;
}
</style>

API 介绍

animate.attachModel

方法签名	返回值	描述
attachModel( parent: Object3D,child: Object3D)		将子模型关绑定至父模型中

参数说明：

参数名	说明	类型	必填	默认值
parent	父模型	Object3D	是	-
child	子模型	Object3D	是	-