ThingOrigin.js

案例展示 ​

模型爆炸图效果

<template>
  <div style="position: relative;">
    <div id="TO"></div>

    <el-button type="primary" size="small" id="explode" @click="startExploded(2)">爆炸</el-button>
    <el-button type="primary" size="small" id="reset" @click="resetExplode">恢复</el-button>
  </div>
</template>

<script setup>
import { onMounted, nextTick } from 'vue';
let time = 2000;
let original, TO;
onMounted(() => {
  // 初始化场景
  TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
    helper: { // 辅助工具
      axes: {
        active: false,
      },
      grid: {
        active: false,
      },
    }
  })


  //导入模型
  TO.model.initFileModel(
    {
      modelName: "fileModel-abb", //模型名称
      base: {
        modelUrl: `${import.meta.env.BASE_URL}models/abb.gltf`  //模型地址
      },
      modelType: "gltf", //模型类型
    }
  ).then((model) => {
    //添加模型到场景中
    TO.scene.add(model.scene);
    //获取模型
    original = TO.scene.getObjectByProperty('name', 'fileModel-abb');
  });

});
//启动爆炸图
function startExploded(ratio) {
  nextTick(() => {
    TO.explode.explode(original, {
      ratio: ratio,
      time: time
    })
  })
}

//恢复
function resetExplode() {
  startExploded(0.5);
}


</script>

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

#explode {
  position: absolute;
  top: 10px;
  right: 70px;
}

#reset {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>

API 介绍 ​

explode.showExplode ​

方法签名返回值描述
showExplode(origin: Object3D, explodeInfo: explodeInfo)Object3D展示爆炸图（流程）

参数说明：

参数名说明类型必填默认值
origin目标克隆模型Object3D是-
explodeInfo爆炸信息参数explodeInfo是-

explodeInfo 参数说明：

参数名说明类型必填默认值
ratio爆炸系数number是-
time时间（毫秒）number是-