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;
let 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",
      position: {
        x: 0,
        y: 0,
        z: 0,
      },
      scale: {
        x: 1,
        y: 1,
        z: 1,
      },
      rotation: {
        x: 0,
        y: 0,
        z: 0,
      }
    }
  ).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展示爆炸图（流程）

参数说明：

参数名类型是否必选描述
originObject3D是目标克隆模型
explodeInfoexplodeInfo是爆炸信息参数