main.js

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