window.addEventListener("load", function () {
  setTimeout(() => {
    let canvas_space_plane = new Plane_Three_Sketch({
      dom: document.getElementById("canvas-new-service-hero-scene"),
    });

    const cameraTransitionDuration = 2;

    gsap
      .timeline({
        delay: 1.5,
        onStart: () => {
          gsap.to(".hero_hero_scene", {
            opacity: 1,
          });
          setTimeout(() => {
            canvas_space_plane.createBoxes();
          }, 500);
        },
        onComplete: () => {
          setTimeout(() => {
            canvas_space_plane.cursor_tracking_mode = true;
            canvas_space_plane.initRaycaster();
          }, 250);
          setTimeout(() => {
            // console.log("hey");
            // canvas_space_plane.gui.open();
          }, 1000);
        },
      })

      .from(
        canvas_space_plane.camera.position,
        {
          x: 2.5,
          y: 2.5,
          z: 3,
          duration: cameraTransitionDuration,
          ease: "power3.inOut",
        },
        "<"
      )
      .from(
        canvas_space_plane.controls.target,
        {
          x: 0,
          y: 0,
          z: 0,
          duration: cameraTransitionDuration,
          ease: "power3.inOut",
        },
        "<"
      );
  }, 500);
});