<template>
|
<div id="threeBox" class="appBox">
|
<div class="menuButton">
|
<button @click="setModelPlay(1)" v-show="!stratPlay">启动</button>
|
<button @click="setModelPlay(2)" v-show="stratPlay">停止</button>
|
<button @click="setModelPlay(3)">加速</button>
|
<button @click="setModelPlay(4)">减速</button>
|
<!-- <button @click="setModelPlay(5)">复位</button> -->
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref } from "vue";
|
import mapThree from "./assets/js/mapThree.js";
|
const stratPlay = ref(false);
|
const setModelPlay = (item) => {
|
switch (item) {
|
case 1:
|
stratPlay.value = true;
|
mapThree.setModelStart();
|
|
break;
|
case 2:
|
stratPlay.value = false;
|
mapThree.setModelClosed();
|
break;
|
case 3:
|
mapThree.setModeladdSpeed();
|
break;
|
case 4:
|
mapThree.setModeldelSpeed();
|
break;
|
case 5:
|
stratPlay.value = false;
|
mapThree.setModelreFreash();
|
break;
|
}
|
};
|
onMounted(() => {
|
mapThree.init();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.appBox {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
.menuButton {
|
position: absolute;
|
z-index: 99999;
|
top: 10px;
|
left: 10px;
|
|
background: rgba(0, 0, 0, 0.5);
|
button {
|
margin: 10px;
|
height: 10px;
|
font-size: 12px;
|
line-height: 2px;
|
padding: 10px;
|
}
|
}
|
}
|
</style>
|
