feat(web): add tone mapping and brightness to 3D scene

The EffectComposer disables three's tone mapping, leaving colors flat and washed out. Add ACES filmic tone mapping plus a small brightness lift so cards match their source images.
This commit is contained in:
2026-08-15 12:25:18 +08:00
parent 7ff8e3c51d
commit fc9f756d52
3 changed files with 8 additions and 1 deletions
+4 -1
View File
@@ -2,7 +2,8 @@ import { Suspense, useEffect, useRef, useState, type ReactNode } from 'react';
import { Icon } from '@iconify/react';
import { Canvas } from '@react-three/fiber';
import { Bounds, ContactShadows, OrbitControls, useProgress } from '@react-three/drei';
import { EffectComposer, Vignette } from '@react-three/postprocessing';
import { BrightnessContrast, EffectComposer, ToneMapping, Vignette } from '@react-three/postprocessing';
import { ToneMappingMode } from 'postprocessing';
/**
* Shared 3D scene wrapper for object viewers. Provides a consistent camera,
@@ -120,6 +121,8 @@ export default function Scene({
/>
<EffectComposer>
<ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
<BrightnessContrast brightness={0.06} contrast={0} />
<Vignette eskil={false} offset={0.25} darkness={0.6} />
</EffectComposer>
</Canvas>