案例展示

工艺仿真场景

<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(() => {
  // 初始化场景
  TO = new ThingOrigin("easyBuild", document.getElementById("TO"), sceneData)
  //初始化物理世界
  physicsWorld = TO.physics.initWorld();
});

const startSim = () => {
  //初始化物理模拟器
  Physics.initPhysicsWorld(sceneData.physicsSim, sceneData.modelList, TO, physicsWorld)
  //开始物理仿真
  Physics.startPhysicsSim()

  //初始化PLC
  Plc.init(TO, 1, 20, plcInfo, sceneData.modelList, sceneData.animationList, 'dev');
  //开始PLC仿真
  Plc.start();
}


</script>

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

.startBtn {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>