BakeShadows

Cientos provides a component called BakeShadows. Basically this component set the renderer.shadowMap.autoUpdate to false, so the shadows are casted just in the first frame which is really great for performance, the downside of this method is that the shadows will not be updated.

Basic usage

<script setup lang="ts">
import { shallowRef } from 'vue'
import { BakeShadows } from '@tresjs/cientos'
import { TresCanvas, useRenderLoop } from '@tresjs/core'

const cubeRef = shallowRef()

const { onLoop } = useRenderLoop()

onLoop(({ elapsed }) => {
  if (cubeRef.value) {
    cubeRef.value.rotation.y = elapsed * 0.5
    cubeRef.value.rotation.x = elapsed * 0.5
  }
})
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    shadows
  >
    <TresPerspectiveCamera
      :position="[0, 2, 5]"
      :look-at="[0, 0, 0]"
    />
    <BakeShadows />
    <TresMesh
      ref="cubeRef"
      cast-shadow
    >
      <TresBoxGeometry />
      <TresMeshStandardMaterial :color="0x00ff00" />
    </TresMesh>
    <TresMesh
      receive-shadow
      :position="[0, -2, 0]"
      :rotation-x="-Math.PI / 2"
    >
      <TresPlaneGeometry :args="[5, 5]" />
      <TresMeshStandardMaterial :color="0xf7f7f7" />
    </TresMesh>
    <TresDirectionalLight
      cast-shadow
      :position="[0, 10, 0]"
    />
  </TresCanvas>
</template>

WARNING

You have to set the shadows in the TresCanvas (renderer), your light sources and objects to receive and cast accordantly as you normally would do.