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