feat: add BakeShadows component

playground/src/pages/misc/BakeShadows.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { CameraControls, vLightHelper, BakeShadows } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { NoToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+  shadows: true,
+}
+
+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
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <CameraControls />
+    <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
+      v-light-helper
+      cast-shadow
+      :position="[0, 10, 0]"
+    />
+  </TresCanvas>
+</template>

playground/src/router/routes/misc.ts

@@ -19,4 +19,9 @@ export const miscRoutes = [
     name: 'Stats',
     component: () => import('../../pages/misc/StatsDemo.vue'),
   },
+  {
+    path: '/misc/bake-shadows',
+    name: 'BakeShadows',
+    component: () => import('../../pages/misc/BakeShadows.vue'),
+  },
 ]

src/core/misc/BakeShadows.ts

@@ -0,0 +1,17 @@
+import { defineComponent, watchEffect } from 'vue'
+import { useTresContext } from '@tresjs/core'
+
+export const BakeShadows = defineComponent({
+  name: 'BakeShadows',
+
+  setup() {
+    const { renderer } = useTresContext()
+
+    watchEffect(() => {
+      renderer.value.shadowMap.autoUpdate = false
+      renderer.value.shadowMap.needsUpdate = true
+    })
+
+    return null
+  },
+})

src/core/misc/index.ts

@@ -1,5 +1,6 @@
 import { Stats } from './Stats'
 import { StatsGl } from './StatsGl'
+import { BakeShadows } from './BakeShadows'
 import Html from './html/HTML.vue'
 
-export { Html, Stats, StatsGl }
+export { Html, Stats, StatsGl, BakeShadows }