---
---
<canvas id="subdivide-demo" style="width:100%;height:400px;border-radius:8px;background:#1a1a2e;display:block;"></canvas>

<script>
  async function init() {
    const THREE = await import('three')
    const { OrbitControls } = await import('three/examples/jsm/controls/OrbitControls.js')
    const { icosphere } = await import('shapecraft')
    const { toThreeMesh } = await import('shapecraft/three')

    const canvas = document.getElementById('subdivide-demo') as HTMLCanvasElement
    if (!canvas) return

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
    renderer.setSize(canvas.clientWidth, canvas.clientHeight)
    const scene = new THREE.Scene()
    scene.background = new THREE.Color(0x2a2a3a)
    const camera = new THREE.PerspectiveCamera(50, canvas.clientWidth / canvas.clientHeight, 0.1, 100)
    camera.position.set(4, 2, 4)
    const controls = new OrbitControls(camera, canvas)
    controls.target.set(0, 0.5, 0)
    controls.enableDamping = true
    controls.update()

    scene.add(new THREE.HemisphereLight(0x87ceeb, 0x3a5a2a, 0.6))
    const sun = new THREE.DirectionalLight(0xfff4e0, 1.2)
    sun.position.set(5, 8, 5)
    scene.add(sun)

    scene.add(toThreeMesh(
      icosphere({ radius: 0.5, subdivisions: 0 }).translate(-2, 0.5, 0).vertexColor('#cc4444')
    ))
    scene.add(toThreeMesh(
      icosphere({ radius: 0.5, subdivisions: 0 })
        .subdivideAdaptive(0.3).spherize(0.5)
        .translate(0, 0.5, 0).vertexColor('#44cc44')
    ))
    scene.add(toThreeMesh(
      icosphere({ radius: 0.5, subdivisions: 0 })
        .subdivideAdaptive(0.3).spherize(0.5)
        .jitter(0.04, { seed: 3 })
        .translate(2, 0.5, 0).vertexColor('#4444cc')
    ))

    ;(function animate() {
      requestAnimationFrame(animate)
      controls.update()
      renderer.render(scene, camera)
    })()
  }
  init()
</script>
