<Sparkles>

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

<div>
  <Canvas>
    <Scene />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import Sphere from './Sphere.svelte'
  import { T } from '@threlte/core'
  import { Environment, OrbitControls } from '@threlte/extras'
</script>

<T.PerspectiveCamera
  makeDefault
  position={[0, 5, 12]}
  fov={30}
>
  <OrbitControls
    enableDamping
    autoRotateSpeed={0.85}
    zoomSpeed={0.75}
    minPolarAngle={Math.PI / 2.5}
    maxPolarAngle={Math.PI / 2.55}
  />
</T.PerspectiveCamera>

<Environment
  url="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/evening_road_01_2k.hdr"
  isBackground={false}
/>

<T.GridHelper />

<Sphere
  color="white"
  amount={50}
  emissive="green"
  position={[1, 1, -1]}
/>
<Sphere
  color="white"
  amount={30}
  emissive="purple"
  position={[-1.5, 0.5, -2]}
  size={0.5}
/>
<Sphere
  color="lightpink"
  amount={20}
  emissive="orange"
  position={[-1, 0.25, 1]}
  size={0.25}
/>

<script lang="ts">
  import { T } from '@threlte/core'
  import { Sparkles } from '@threlte/extras'

  interface Props {
    size?: number
    amount?: number
    color?: string
    emissive?: string
    [key: string]: any
  }

  let { size = 1, count = 100, color = 'white', emissive = 'white', ...rest }: Props = $props()
</script>

<T.Mesh {...rest}>
  <T.SphereGeometry args={[size, 64, 64]} />
  <T.MeshStandardMaterial
    roughness={0}
    metalness={0.1}
    {color}
    emissive={emissive || color}
    envMapIntensity={0.2}
  />
  <Sparkles
    {count}
    scale={size * 2}
    size={6}
    speed={0.4}
    color="white"
  />
</T.Mesh>