app.js

import { createApp, ref, onMounted } from "alpinejs";
import { gsap } from "gsap";
import { VisualRecognitionV3 } from "@WatsonService/watson-vision-combined";
import * as Three from "three";
import "../style/index.css";

const App = {
 setup() {
    const image = ref(null);
    const camera = ref(null);
    const renderer = ref(null);
    const scene = ref(null);

    onMounted(() => {
      const ctx = setupCanvas();
      init();
      animate();
    });

    function setupCanvas() {
      const ctx = document.createElement("canvas").getContext("2d");
      ctx.canvas.width = window.innerWidth;
      ctx.canvas.height = window.innerHeight;
      ctx.imageSmoothingEnabled = true;
      return ctx;
    }

    function init() {
      camera = Three.PerspectiveCamera(
        30,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      scene = new Three.Scene();

      const geometry = new Three.BoxGeometry(0.1, 0.1, 0.1);
      const material = new Three.MeshBasicMaterial({
        color: 0x000000,
        wireframe: true,
      });
      const cube = new Three.Mesh(geometry, material);
      scene.add(cube);

      renderer = new Three.WebGLRenderer({
        canvas: ctx.canvas,
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x000000, 1);

      document.body.appendChild(renderer.domElement);
    }

    function animate() {
      requestAnimationFrame(animate);

      const time = performance.now() * 0.3;
      camera.position.x = Math.sin(time) * 1;
      camera.position.y = Math.sin(time) * 1;
      camera.position.z = Math.sin(time) * 1;
      camera.lookAt(scene.position);

      renderer.render(scene, camera);
    }
 },
 methods: {
    generateImage() {
      image.value = new FormData();
      const request = new XMLHttpRequest();
      request.open("POST", "/api/generate", true);
      request.send(image.value);
      request.onload = () => {
        let img = new Image();
        img.src = URL.createObjectURL(request.response.image);
        document.body.appendChild(img);
      };
    },
 },
};

createApp(App);