God Rays

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { NoToneMapping } from 'three'
import { EffectComposerPmndrs, GodRaysPmndrs } from '@tresjs/post-processing'

const gl = {
  toneMapping: NoToneMapping,
}

const sphereMeshRef = ref(null)

const effectProps = {
  opacity: 0.8,
  exposure: 0.8,
  resolutionScale: 0.65,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- The lightSource (in this case a Sphere) -->
    <TresMesh ref="sphereMeshRef" :position="[-10, 8, 0]">
      <TresSphereGeometry :args="[2, 32, 32]" />
      <TresMeshBasicMaterial color="#FFDDAA" :transparent="true" />
    </TresMesh>

    <Suspense>
      <EffectComposerPmndrs>
        <GodRaysPmndrs
          v-bind="effectProps"
          :light-source="sphereMeshRef"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>