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'
import { ElButton, ElInput, ElCard } from 'element-plus'
let time = 2000
let original, TO
onMounted(() => {
    // 初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        helper: {
            // 辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 0,
                y: 50,
                z: 100
            }
        }
    })

    //导入模型
    TO.model
        .loadModel({
            modelName: 'fileModel-abb', //模型名称
            base: {
                modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/56201403' //模型地址
            },
            modelType: 'gltf' //模型类型
        })
        .then((model) => {
            //添加模型到场景中
            TO.scene.add(model)
            //获取模型
            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是-