<template>
  <div><ThreeBase></ThreeBase></div>
  <!-- <a-drawer v-model:open="drawer" placement="right" :mask="false">
    <RobotMenu @sliderInput="sliderInput" @switchChange="switchChange" />
  </a-drawer>
  <div class="btn" v-show="!drawer">
    <a-button type="primary" circle size="large" @click="drawerSwitch" />
  </div>
  <Robot3d ref="Robot3dRef" /> -->
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import ThreeBase from './base/index.vue'
  import Robot3d from './Robot3d/index.vue';
  import RobotMenu from './Menu/index.vue';
  const Robot3dRef = ref();
  const switchChange = (e) => {
    Robot3dRef.value.setControlsEnabled(e);
  };
  const sliderInput = (e, name, direction) => {
    Robot3dRef.value.setRobotRotation(e, name, direction);
  };

  const drawer = ref(false);
  const drawerSwitch = () => {
    drawer.value = !drawer.value;
  };
  defineOptions({
    name: 'index',
  });
</script>

<style lang="less" scoped></style>
