案例展示

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

<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';
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,
      },
    }
  })

  //加载立方体
  createCube();

  //导入模型
  TO.model.initFileModel(
    {
      modelName: "fileModel-" + new Date().getTime(), //模型名称
      base: {
        modelUrl: `${import.meta.env.BASE_URL}models/abb.gltf`, //模型地址
      },
      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.scene;
    //添加模型到场景中
    TO.scene.add(robot);
    isActive.value = true;
  });
}

function createCube() {
  //创建立方体
  cube = TO.model.initCube({
    position: {//位置
      x: 25,
      y: 5,
      z: 0,
    },
    material: {//材质
      color: "#f00",
    },
    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(cube, robotEnd, robot);

  //旋转轴-回到初始位置
  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.rotateAngle(WS30_2, 'z', 0, -40, 2000);
    TO.animate.rotateAngle(WS30_3, 'z', 0, -10, 2000);
    
    //设置定时器，在动画持续时间（2000ms）后 resolve
    setTimeout(() => resolve(), 2000);
  });
}

//旋转轴-回到初始位置（返回Promise以便等待等待）
async function rotateModel_up() {
  return new Promise(resolve =>{
    TO.animate.rotateAngle(WS30_2, 'z', -40, 0, 2000);
    TO.animate.rotateAngle(WS30_3, 'z', -10, 0, 2000);
    //设置定时器，在动画持续时间（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(child: Object3D, parent: Object3D, parent_parent?: Object3D)		将子模型关绑定至父模型中

参数说明：

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