案例展示

工艺仿真场景

<template>
    <div style="position: relative">
        <div id="TO" :style="{ width: width + '%',height: height + 'px' }"></div>
        <el-button type="primary" @click="startSim" size="small" class="startBtn">开始仿真</el-button>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import {Physics} from './utils/Physics'
import {Plc} from "./utils/Plc";
import sceneData from "./utils/sceneData.js"
import plcInfo from "./utils/plcInfo.js";

const props = defineProps({
  width: {
    type: Number,
    default: 100,
  },
  height: {
    type: Number,
    default: 400,
  },
});
let TO = null
let physicsWorld = null
onMounted(() => {
    let sceneDom = document.getElementById("TO")
    TO = new ThingOrigin("easyBuild", sceneDom, sceneData)
    physicsWorld = TO.physics.initWorld();
});

const startSim = () => {
    Physics.initPhysicsWorld(sceneData.physicsSim,sceneData.modelList,TO,physicsWorld)
    Physics.startPhysicsSim()

    Plc.init(TO, 1,20,plcInfo,sceneData.modelList, sceneData.animationList,'dev');
    Plc.start();
}


</script>

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

.startBtn{
    position: absolute;
    top: 10px;
    right: 10px;
}

</style>