ThingOrigin.js

案例展示 ​

缓存模型

模型格式 ​

支持 gltf、glb、fbx、obj、stl、json、zip、text、assemble等格式。

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

<script setup>
import { onMounted } from "vue";
onMounted(async () => {
  let TO = new ThingOrigin("fileModel", document.getElementById("TO"));
  let data = {
    "id": 3012,
    "modelName": "ABB机器人-1-copy-1",
    "modelType": "gltf",
    "scale": {
      "x": 1,
      "y": 1,
      "z": 1
    },
    "position": {
      "x": 28.39038575589657,
      "y": 0,
      "z": 0
    },
    "rotation": {
      "x": 0,
      "y": 0,
      "z": 0
    },
    "base": {
      "modelUrl": `${import.meta.env.BASE_URL}models/abb.gltf`
    },
    "userData": {},
    "saved": true
  }
  //判断是否已缓存此模型，返回是否存储，若已缓存返回模型参数
  const accessModel = await TO.indexedDB.accessModel(data);

  let modelUrl = null;

  //如果缓存了   直接导入
  if (accessModel.info.saved) {
    modelUrl = accessModel.modelUrl;
    TO.model.initFileModel(accessModel.info, modelUrl).then((model) => {
      TO.scene.add(model.scene);
    });
  } else {
    //未缓存则先缓存再导入
    //向indexedDB数据表中，存储模型
    const insertModel = await TO.indexedDB.insertModel(data);
    if (insertModel.info.saved) {
      modelUrl = insertText.modelUrl;
      TO.model.initFileModel(insertModel.info, modelUrl).then((model) => {
        TO.scene.add(model.scene);
      });
    }
  }

});
</script>

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

API 介绍 ​

indexedDB.accessModel ​

方法签名返回值描述
accessModel(modelInfo: modelInfoParams)PromiseLike<accessResult>判断是否已缓存此模型，返回是否存储，若已缓存返回模型参数

参数说明：

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