案例展示

缓存模型，方便下次快速加载模型

模型格式

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

<template>
  <div id="TO" v-loading="loading"></div>
</template>

<script setup>
import { ref,onMounted } from "vue";
const loading = ref(false);
onMounted(async () => {
  //初始化场景
  let TO = new ThingOrigin("fileModel", document.getElementById("TO"));
  let modelInfo = {
    "id": 3012, //模型id
    "modelName": "ABB机器人-1", //模型名称
    "modelType": "gltf", //模型类型
    "base": {
      "modelUrl": `${import.meta.env.BASE_URL}models/abb.gltf`//模型地址
    },
    "userData": {}//自定义数据
  }
  loading.value = true;
  //判断是否已缓存此模型，返回是否存储，若已缓存返回模型参数
  const accessModel = await TO.indexedDB.accessModel(modelInfo);

  let modelUrl = null;

  //如果缓存了直接导入
  if (accessModel.info.saved) {
    modelUrl = accessModel.modelUrl;
    //导入模型
    TO.model.initFileModel(accessModel.info, modelUrl).then((model) => {
      loading.value = false;
      TO.scene.add(model.scene);
    });
  } else {
    //未缓存则先缓存再导入
    //向indexedDB数据表中，存储模型
    const insertModel = await TO.indexedDB.insertModel(modelInfo);
    //判断是否缓存完成
    if (insertModel.info.saved) {
      modelUrl = insertModel.modelUrl;
      //导入模型
      TO.model.initFileModel(insertModel.info, modelUrl).then((model) => {
        loading.value = false;
        TO.scene.add(model.scene);
      });
    }
  }
});
</script>

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

API 介绍

indexedDB.accessModel

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

indexedDB.insertModel

方法签名	返回值	描述
insertModel(modelInfo: modelInfoParams)	Promise<modelInfoParams>	向indexedDB数据表中，存储模型

参数说明：

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