<Float>

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<div class="relative h-full w-full ">
  <Canvas>
    <Scene />
  </Canvas>
</div>

<script lang="ts">
  import { T } from '@threlte/core'
  import { Float } from '@threlte/extras'
  import { onDestroy } from 'svelte'
  import { spring } from 'svelte/motion'
  import { Color, MeshPhysicalMaterial, type BufferGeometry } from 'three'

  export let geometry: BufferGeometry

  const red = new Color(0xfe3d00)
  const blue = new Color(0x0000ff)

  let material = new MeshPhysicalMaterial({
    color: red,
    reflectivity: 1,
    metalness: 0.9,
    roughness: 0.2
  })
  onDestroy(() => {
    material.dispose()
  })

  const scale = spring(1)

  const onPointerEnter = () => {
    material.color = blue
    scale.set(1.1)
  }

  const onPointerLeave = () => {
    material.color = red
    scale.set(1)
  }
</script>

<Float
  floatIntensity={5}
  scale={$scale}
  rotationIntensity={2}
  rotationSpeed={[1, 0.5, 0.2]}
>
  <T.Mesh
    {geometry}
    {material}
    on:pointerenter={onPointerEnter}
    on:pointerleave={onPointerLeave}
  />
</Float>

<script lang="ts">
  import { T } from '@threlte/core'
  import { Environment, Float, Grid, interactivity, useGltf } from '@threlte/extras'
  import type { Mesh } from 'three'
  import Blob from './Blob.svelte'

  type Nodes = 'ball-1' | 'ball-2' | 'ball-3' | 'ball-4' | 'ball-5'

  const gltf = useGltf<{
    nodes: Record<Nodes, Mesh>
    materials: {}
  }>('/models/blobs/blobs.glb', {
    useDraco: true
  })

  interactivity()
</script>

<Environment
  path="/hdr/"
  files="shanghai_riverside_1k.hdr"
/>

<Float
  rotationIntensity={0.15}
  rotationSpeed={2}
>
  <T.PerspectiveCamera
    makeDefault
    position.y={10}
    position.z={10}
    fov={90}
    on:create={({ ref }) => {
      ref.lookAt(0, 0, 0)
    }}
  />
</Float>

<T.DirectionalLight
  position.y={10}
  position.z={10}
/>

<T.AmbientLight intensity={0.3} />

<Grid
  position.y={-10}
  sectionThickness={1}
  infiniteGrid
  cellColor="#dddddd"
  sectionColor="#ffffff"
  sectionSize={10}
  cellSize={2}
/>

{#if $gltf}
  {#each Object.values($gltf.nodes) as node}
    {#if node.geometry}
      <Blob geometry={node.geometry} />
    {/if}
  {/each}
{/if}