案例展示

加载组合模型

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

<script setup>
import { onMounted } from "vue";

let TO = null;

onMounted(() => {
  TO = new ThingOrigin("assembleModel", document.getElementById("TO"));
  loadAssemble();
});

const modelInfo = {
  id: 7001,
  text: "铺贴单元",
  title: "工艺线",
  modelUrl: null,
  imageUrl: "http://124.70.30.193:8084/model2/loadImageFileAsId/7001",
  modelName: "铺贴单元",
  modelType: "assemble",
  modelSize: "",
  scale: {
    x: 1,
    y: 1,
    z: 1,
  },
  position: {
    x: 0,
    y: 0,
    z: 0,
  },
  rotation: {
    x: 0,
    y: 0,
    z: 0,
  },
  base: {
    loadType: "normal",
    children: [
      {
        modelName: "铺贴模具",
        rotation: {
          x: 0,
          y: 0,
          z: 0,
        },
        scale: {
          x: 1,
          y: 1,
          z: 1,
        },
        id: 4065,
        modelType: "gltf",
        position: {
          x: 0,
          y: 0,
          z: 0,
        },
        base: {
          modelUrl: "http://124.70.30.193:8084/model2/loadFileAsId/4065",
        },
      },
      {
        modelName: "新松机械臂2",
        rotation: {
          x: 0,
          y: 0,
          z: 0,
        },
        scale: {
          x: 1,
          y: 1,
          z: 1,
        },
        id: 4057,
        modelType: "gltf",
        position: {
          x: -6,
          y: 0,
          z: -25,
        },
        base: {
          modelUrl: "http://124.70.30.193:8084/model2/loadFileAsId/4057",
        },
      },
      {
        modelName: "新松机械臂2",
        rotation: {
          x: 3.14,
          y: 0,
          z: 3.14,
        },
        scale: {
          x: 1,
          y: 1,
          z: 1,
        },
        id: 4057,
        modelType: "gltf",
        position: {
          x: -6,
          y: 0,
          z: 21,
        },
        base: {
          modelUrl: "http://124.70.30.193:8084/model2/loadFileAsId/4057",
        },
      },
    ],
  },
  material: null,
  userData: null,
};

const loadAssemble = async () => {
  //console.log("assemble", modelInfo);
  let modelClone = cloneDeep(modelInfo);
  let loadRes = [];
  for (let i = 0; i < modelClone.base.children.length; i++) {
    if (["gltf"].indexOf(modelClone.base.children[i].modelType) != -1) {
      let info = {
        id: modelClone.base.children[i].id,
        modelName: modelClone.base.children[i].name,
        base: {
          modelUrl: modelClone.base.children[i].base.modelUrl,
        },
        modelType: "gltf",
        loadType: "userModel",
        scale: { x: 1, y: 1, z: 1 },
        position: { x: 0, y: 0, z: 0 },
        rotation: { x: 0, y: 0, z: 0 },
        userData: {},
      };
      const accessRes = await TO.indexedDB.accessModel(
        "Thing Origin 3D",
        "Thing Origin 3D",
        info
      );
      modelClone.base.children[i].base.modelUrl = accessRes.modelUrl;
      if (accessRes.info.saved) {
        loadRes.push(true);
      } else {
        const insertRes = await TO.indexedDB.insertModel(
          "Thing Origin 3D",
          "Thing Origin 3D",
          info
        );
        if (insertRes.info.saved) {
          loadRes.push(true);
        } else {
          loadRes.push(false);
          ElMessage({
            message: "模型加载失败！请检查文件路径！",
            type: "error",
          });
        }
      }
    } else {
      loadRes.push(true);
    }
  }
  if (loadRes.length == modelClone.base.children.length) {
    console.log("组合内模型全部加载完成", modelClone);
    switch (modelInfo.base.loadType) {
      case "shelf":
        const shelf = await TO.model.initShelf(modelClone);
        TO.scene.add(shelf);
        break;
      case "normal":
        let assemble = TO.model.initGroup(modelInfo);
        modelInfo.base.children.forEach(async (item) => {
          switch (item.modelType) {
            case "cube":
              let cube = TO.model.initCube(item);
              assemble.add(cube);
              break;
            case "gltf":
              TO.indexedDB
                .loadIDBModel("Thing Origin 3D", "Thing Origin 3D", item)
                .then((model) => {
                  assemble.add(model);
                });
              break;
          }
        });
        TO.scene.add(assemble);
        break;
    }
  }
};

function isObject(obj) {
  return obj === Object(obj);
}

function cloneDeep(value) {
  if (!isObject(value)) return value;

  if (Array.isArray(value)) {
    return value.map(cloneDeep);
  } else {
    const cloned = {};
    for (let key in value) {
      if (value.hasOwnProperty(key)) {
        cloned[key] = cloneDeep(value[key]);
      }
    }
    return cloned;
  }
}
</script>

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

API 介绍

model.initAssemble

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

参数说明：

参数名	类型	是否必选	描述
modelInfo	modelInfoParams	否	模型参数