<template>
  <div class="container" id="cesiumContainer"></div>
</template>
<script setup lang="ts">
import '../utils/NoNeed'
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

window.Cesium = Cesium

let viewer: Cesium.Viewer

onMounted(async () => {
  viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
    selectionIndicator: false,
    shadows: true,
    shouldAnimate: true
  })

  viewer.entities.removeAll()

  const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000)

  const heading = Cesium.Math.toRadians(135)
  const pitch = 0
  const roll = 0
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)

  const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

  const url = '/model/Cesium_Air.glb'

  const entity = viewer.entities.add({
    name: url,
    position,
    orientation,
    model: {
      uri: url,
      minimumPixelSize: 128,
      maximumScale: 20000
    }
  })
  viewer.trackedEntity = entity

  window.viewer = viewer
})
</script>
<style lang="less" scoped>
.container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>