案例展示

加载组合模型

<template>
  <div id="TO"></div>
</template>

<script setup>
import { onMounted } from "vue";
let TO = null;

onMounted(() => {
  // 初始化场景
  TO = new ThingOrigin("assembleModel", document.getElementById("TO"), {
    camera: {
      position: { // 相机位置
        x: 0,
        y: 80,
        z: 100,
      }
    },
  });
  loadAssemble();
});

//添加组合模型
async function loadAssemble() {
  // 模型数据
  let accessModel = {
    id: 7001,
    modelName: "铺贴单元",
    modelType: "assemble",
    base: {
      loadType: "normal",
      children: [
        {
          modelName: "铺贴模具",
          id: 4065,
          modelType: "gltf",
          base: {
            modelUrl: `${import.meta.env.BASE_URL}models/putie.gltf`,
          },
        },
        {
          modelName: "新松机械臂2",
          id: 4057,
          modelType: "gltf",
          position: {
            x: -6,
            y: 0,
            z: -25,
          },
          base: {
            modelUrl: `${import.meta.env.BASE_URL}models/jixiebi2.gltf`,
          },
        },
        {
          modelName: "新松机械臂2",
          rotation: {
            x: 3.14,
            y: 0,
            z: 3.14,
          },
          id: 4057,
          modelType: "gltf",
          position: {
            x: -6,
            y: 0,
            z: 21,
          },
          base: {
            modelUrl: `${import.meta.env.BASE_URL}models/jixiebi2.gltf`,
          },
        },
      ],
    }
  }
  //创建组合模型
  TO.model.initAssemble(accessModel).then(model => {
    //添加到场景中
    TO.scene.add(model);
    //旋转
    model.rotation.set(0, 80, 0);
    //位置
    model.position.set(0, 2, 0);
  })
};
</script>

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

API 介绍

model.initAssemble

方法签名	返回值	描述
initAssemble(modelInfo?: modelInfoParams)	Promise<any>	加载组合模型

参数说明：

参数名	说明	类型	必填	默认值
modelInfo	模型参数	modelInfoParams	-	-