Sepia

Demo code

<script setup lang="ts">
import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { NoToneMapping } from 'three'
import { EffectComposerPmndrs, SepiaPmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'

import '@tresjs/leches/styles'

const gl = {
  clearColor: '#ffffff',
  toneMapping: NoToneMapping,
}

const glComposer = {
  multisampling: 4,
}

const { intensity, blendFunction } = useControls({
  intensity: { value: 1.0, step: 0.1, max: 5.0 },
  blendFunction: {
    options: Object.keys(BlendFunction).map(key => ({
      text: key,
      value: BlendFunction[key as keyof typeof BlendFunction],
    })),
    value: BlendFunction.NORMAL,
  },
})
</script>

<template>
  <div class="aspect-16/9">
    <TresCanvas
      v-bind="gl"
    >
      <TresPerspectiveCamera
        :position="[5, 5, 5]"
        :look-at="[0, 0, 0]"
      />
      <OrbitControls auto-rotate />

      <TresMesh :position="[0, .5, 0]">
        <TresBoxGeometry :args="[2, 2, 2]" />
        <TresMeshPhysicalMaterial color="black" :roughness=".25" />
      </TresMesh>

      <ContactShadows
        :opacity="1"
        :position-y="-.5"
      />

      <Suspense>
        <Environment background :blur=".5" preset="snow" />
      </Suspense>

      <Suspense>
        <EffectComposerPmndrs v-bind="glComposer">
          <SepiaPmndrs :intensity="intensity" :blendFunction="Number(blendFunction)" />
        </EffectComposerPmndrs>
      </Suspense>
    </TresCanvas>
  </div>

  <TresLeches :float="false" />
</template>

The Sepia effect is part of the postprocessing package. It applies a sepia tone to the scene, giving it a warm, antique appearance. This effect can enhance the visual appeal of your scene by adding a vintage or stylized touch.

Usage

The <SepiaPmndrs> component is easy to use and provides customizable options to suit different visual styles.

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

const gl = {
  toneMapping: NoToneMapping,
}
</script>

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

    <Suspense>
      <EffectComposerPmndrs>
        <SepiaPmndrs :intensity="2" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>

Props

Prop	Description	Default
blendFunction	Defines how the effect blends with the original scene. See the BlendFunction options.	BlendFunction.NORMAL
intensity	The intensity of the sepia effect.	1.0

Further Reading

For more details, see the Sepia documentation