<template>
  <div class="panel-box panel-left">
    <view-title height="50%" title="无人机信息">
      <model-collada
        @load="onLoad"
        src="src/assets/images/uav-model.dae"
        :rotation="rotation"
        :position="position"
        :height="100"
        :lights="lights"
        :backgroundAlpha="0"
        :controls-options="{
          enableRotate: true,  // 是否可旋转
          enableZoom: false,    // 是否可缩放
          enablePan: false      // 是否可移动（鼠标右键可以移动模型）
}"
      />
    </view-title>
    <view-title height="50%" title="无人机实时状态"></view-title>
  </div>
</template>

<script setup>
import { ViewTitle } from "@/views/components/map";
import { ModelCollada } from "vue-3d-model";



const onLoad = () => {
  rotate();
};

function rotate() {
  requestAnimationFrame(rotate);
  rotation.y += 0.01;
}
const rotation = reactive({
  x: 0.5,
  y: 0,
  z: 0,
});
const position = {
  x: 0,
  y: 0,
  z: 0,
};

const lights = [
  {
    type: "HemisphereLight",
    position: { x: 0, y: 15, z: 50},
    skyColor: 0xffd700,
    groundColor: 0xffd700,
    intensity: 0.2,
  },
  {
    type: "DirectionalLight",
    position: { x: 0.2, y: 20, z: 1},
    color: 0xffffff,
    intensity: 0.8,
  },
];
</script>

<style scoped>
.panel-left {
}
</style>
