File size: 2,144 Bytes
9bad642 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
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); |