feat: configure shadow map settings for better shadow quality

This commit is contained in:
Tom Boullay
2026-05-14 00:17:33 +02:00
parent c6f60d1ca7
commit 4516cf4ec6
+20 -1
View File
@@ -1,4 +1,4 @@
import { useRef } from "react";
import { useEffect, useRef } from "react";
import { useFrame } from "@react-three/fiber";
import type { AmbientLight, DirectionalLight } from "three";
import {
@@ -23,6 +23,11 @@ import {
} from "@/data/world/lightingConfig";
import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
const SHADOW_MAP_SIZE = 2048;
const SHADOW_CAMERA_SIZE = 100;
const SHADOW_CAMERA_NEAR = 0.5;
const SHADOW_CAMERA_FAR = 200;
type LightingState = {
ambientIntensity: number;
sunIntensity: number;
@@ -37,6 +42,20 @@ export function Lighting(): React.JSX.Element {
const ambient = useRef<AmbientLight>(null);
const sun = useRef<DirectionalLight>(null);
useEffect(() => {
if (!sun.current) return;
sun.current.shadow.mapSize.width = SHADOW_MAP_SIZE;
sun.current.shadow.mapSize.height = SHADOW_MAP_SIZE;
sun.current.shadow.camera.left = -SHADOW_CAMERA_SIZE;
sun.current.shadow.camera.right = SHADOW_CAMERA_SIZE;
sun.current.shadow.camera.top = SHADOW_CAMERA_SIZE;
sun.current.shadow.camera.bottom = -SHADOW_CAMERA_SIZE;
sun.current.shadow.camera.near = SHADOW_CAMERA_NEAR;
sun.current.shadow.camera.far = SHADOW_CAMERA_FAR;
sun.current.shadow.camera.updateProjectionMatrix();
}, []);
useDebugFolder("Lighting", (folder) => {
folder
.add(