Grid

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 { BlendFunction } from 'postprocessing'
import { EffectComposerPmndrs, GridPmndrs } from '@tresjs/post-processing'

import '@tresjs/leches/styles'

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

const { blendFunction, scale, lineWidth } = useControls({
  blendFunction: {
    options: Object.keys(BlendFunction).map(key => ({
      text: key,
      value: BlendFunction[key as keyof typeof BlendFunction],
    })),
    value: BlendFunction.OVERLAY,
  },
  scale: { value: 0.25, step: 0.01, min: 0.0, max: 2.0 },
  lineWidth: { value: 0.1, step: 0.01, max: 2.0 },
})
</script>

<template>
  <div class="aspect-16/9">
    <TresCanvas
      v-bind="gl"
    >
      <TresPerspectiveCamera :position="[5, 5, 5]" />
      <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>
          <GridPmndrs
            :blendFunction="Number(blendFunction)"
            :scale="scale"
            :lineWidth="lineWidth"
          />
        </EffectComposerPmndrs>
      </Suspense>
    </TresCanvas>
  </div>
  <TresLeches :float="false" />
</template>

The GridEffect effect is part of the postprocessing package. It renders a grid that can be scaled or adjusted to achieve a variety of visual effects.

Usage

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

<script setup lang="ts">
import { EffectComposerPmndrs, GridPmndrs } from '@tresjs/post-processing/pmndrs'

const gl = {
  toneMapping: NoToneMapping,
  multisampling: 8,
}

const effectProps = {
  blendFunction: BlendFunction.OVERLAY,
  scale: 0.25,
  lineWidth: 0.1,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera />

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

    <Suspense>
      <EffectComposerPmndrs>
        <GridPmndrs v-bind="effectProps" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>

Props

Prop	Description	Default
blendFunction	Defines how the effect blends with the original scene. See the BlendFunction options.	BlendFunction.OVERLAY
scale	The grid scale, which can be used to adjust the spacing effect.	1.0
lineWidth	The width of the lines in the grid pattern.	1.0

Further Reading

For more details, see the GridEffect documentation