| 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); |