<template>
  <div id="cesiumContainer" class="all"></div>
  <button id="explodeButton">Explode</button>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
  const viewer = new Cesium.Viewer("cesiumContainer", {
  })
  const modelUrl = '/src/model/卫星.gltf';
  const modelEntity = viewer.entities.add({
    name: "Cesium Air",
    position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
    model: {
      uri: modelUrl,
      scale: 2000.0
    }
  });

  // Fly the camera to the model
  viewer.flyTo(modelEntity);

  // Helper function to generate a random direction vector
  function getRandomDirection() {
    const theta = Math.random() * 2 * Math.PI;
    const phi = Math.acos(2 * Math.random() - 1);
    return new Cesium.Cartesian3(
      Math.sin(phi) * Math.cos(theta),
      Math.sin(phi) * Math.sin(theta),
      Math.cos(phi)
    );
  }

  // Function to perform the explosion effect
  function explodeModel(entity) {
    const duration = 3000; // Explosion duration in milliseconds
    const explosionDistance = 500; // Distance to move parts away from the center
    const startTime = Cesium.JulianDate.now();
    const endTime = Cesium.JulianDate.addSeconds(startTime, duration / 1000, new Cesium.JulianDate());

    viewer.clock.shouldAnimate = true; // Ensure the clock is running

    viewer.scene.preUpdate.addEventListener(function (scene, time) {
      const t = Cesium.JulianDate.secondsDifference(time, startTime) / (duration / 1000);
      if (t > 1.0) {
        viewer.scene.preUpdate.removeEventListener(this);
        return;
      }
      const distance = explosionDistance * t;
      const direction = getRandomDirection();
      const offset = Cesium.Cartesian3.multiplyByScalar(direction, distance, new Cesium.Cartesian3());
      entity.position = Cesium.Cartesian3.add(
        Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
        offset,
        new Cesium.Cartesian3()
      );
    });
  }

  // Add event listener to the explode button
  document.getElementById('explodeButton').addEventListener('click', function () {
    explodeModel(modelEntity);
  });
  // const modelUrl = '/src/model/卫星.gltf';
  // const model = viewer.entities.add({
  //   name: "Cesium Air",
  //   position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
  //   model: {
  //     uri: modelUrl,
  //     scale: 2000.0
  //   }
  // });

  // // Define explosion parameters
  // const explosionDistance = 500; // Distance to move parts away from the center
  // const explosionDuration = 3000; // Duration of the explosion in milliseconds

  // // Helper function to calculate random direction vector
  // function randomDirection() {
  //   const theta = Math.random() * 2 * Math.PI;
  //   const phi = Math.acos(2 * Math.random() - 1);
  //   const x = Math.sin(phi) * Math.cos(theta);
  //   const y = Math.sin(phi) * Math.sin(theta);
  //   const z = Math.cos(phi);
  //   return new Cesium.Cartesian3(x, y, z);
  // }

  // // Perform explosion effect
  // function explodeModel(model) {
  //   const start = Date.now();
  //   function update() {
  //     const now = Date.now();
  //     const elapsed = now - start;
  //     const t = Math.min(elapsed / explosionDuration, 1.0);
  //     const distance = explosionDistance * t;

  //     // Move the model parts (simple example, entire model moves)
  //     const direction = randomDirection();
  //     const translation = Cesium.Cartesian3.multiplyByScalar(direction, distance, new Cesium.Cartesian3());
  //     model.position = Cesium.Cartesian3.add(model.position.getValue(Cesium.JulianDate.now()), translation, new Cesium.Cartesian3());

  //     if (t < 1.0) {
  //       requestAnimationFrame(update);
  //     }
  //   }
  //   update();
  // }

  // // Add button to trigger explosion
  // const button = document.createElement('button');
  // button.textContent = 'Explode';
  // button.style.position = 'absolute';
  // button.style.top = '10px';
  // button.style.left = '10px';
  // button.onclick = () => explodeModel(model);
  // document.body.appendChild(button);
  // viewer.zoomTo(model)
})
</script>



<style>
.all {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%
}

.cesium-viewer-bottom {
  display: none;
}

button {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 88;
}
</style>
