Spaces:
Running
Running
| import { useState, useEffect } from 'alpinejs' | |
| import { Tone } from 'three' | |
| function main() { | |
| const [imageUrl, setImageUrl] = useState('') | |
| const scene = new THREE.Scene() | |
| const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000) | |
| const renderer = new THREE.WebGLRenderer() | |
| const geometry = new THREE.BoxGeometry(1, 1, 1) | |
| const material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF }) | |
| const cube = new THREE.Mesh(geometry, material) | |
| scene.add(cube) | |
| renderer.setSize(window.innerWidth, window.innerHeight) | |
| document.body.appendChild(renderer.domElement) | |
| const animate = () => { | |
| requestAnimationFrame(animate) | |
| cube.rotation.x += 0.01 | |
| cube.rotation.y += 0.02 | |
| renderer.render(scene, camera) | |
| } | |
| animate() | |
| } | |
| function generateImage() { | |
| const url = new URL('http://example.com/blob/') | |
| url.pathname = '/api/image' | |
| const body = new Blob([imageUrl]) | |
| const request = new Request(url, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'image/jpeg', | |
| }, | |
| body, | |
| }) | |
| return fetch(request) | |
| .then((response) => { | |
| if (!response.ok) { | |
| throw new Error(`${response.status} ${response.statusText}`) | |
| } | |
| return response.blob() | |
| }) | |
| .then((blob) => { | |
| const image = document.createElement('img') | |
| image.src = window.URL.createObjectURL(blob) | |
| document.body.appendChild(image) | |
| }) | |
| } | |
| document.addEventListener('DOMContentLoaded', () => { | |
| main() | |
| document.getElementById('generate-image').addEventListener('click', generateImage) | |
| }) |