From 7d9b5e49adcf61287ddcd26c987494ac0a7e3d40 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Sat, 15 Aug 2026 12:42:05 +0800
Subject: [PATCH] feat(web): light 3D scene with image-based lighting

Replace the hand-placed light rig with an Environment built from Lightformers, giving MeshStandardMaterial objects consistent PBR lighting and richer color. Keep ContactShadows, which needs no light.
---
 apps/web/src/components/viewers/Scene.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/viewers/Scene.tsx b/apps/web/src/components/viewers/Scene.tsx
index b559a33..a22482f 100644
--- a/apps/web/src/components/viewers/Scene.tsx
+++ b/apps/web/src/components/viewers/Scene.tsx
@@ -1,7 +1,7 @@
 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 { Bounds, ContactShadows, Environment, Lightformer, OrbitControls, useProgress } from '@react-three/drei';
 import { BrightnessContrast, EffectComposer, ToneMapping, Vignette } from '@react-three/postprocessing';
 import { ToneMappingMode } from 'postprocessing';
 
@@ -73,7 +73,7 @@ export default function Scene({
     <div
       ref={containerRef}
       className={`relative w-full overflow-hidden rounded-lg bg-linear-to-b from-zinc-300 to-zinc-400 ${
-        fill ? 'h-full min-h-0' : 'aspect-[3/4]'
+        fill ? 'h-full min-h-0' : 'aspect-3/4'
       }`}
     >
       <LoadingOverlay />
@@ -93,10 +93,12 @@ export default function Scene({
         dpr={[1, 2]}
         gl={{ antialias: true, alpha: true }}
       >
-        <ambientLight intensity={0.5} />
-        <directionalLight position={[4, 6, 3]} intensity={1.4} />
-        <directionalLight position={[-4, 2, -3]} intensity={0.4} color="#b3c7ff" />
-        <pointLight position={[0, 3, 0]} intensity={0.3} />
+        <ambientLight intensity={0.1} />
+
+        <Environment resolution={256}>
+          <Lightformer intensity={2} position={[0, 5, 0]} scale={[10, 10, 1]} />
+          <Lightformer intensity={1} color="#b3c7ff" position={[-5, 2, -1]} scale={[3, 3, 1]} />
+        </Environment>
 
         <Suspense fallback={null}>
           <Bounds fit={fit} observe={fit} clip={fit}>{children}</Bounds>
@@ -121,8 +123,8 @@ export default function Scene({
         />
 
         <EffectComposer>
-          <ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
-          <BrightnessContrast brightness={0.06} contrast={0} />
+          <ToneMapping mode={ToneMappingMode.AGX} />
+          <BrightnessContrast brightness={0.25} contrast={.5} />
           <Vignette eskil={false} offset={0.25} darkness={0.6} />
         </EffectComposer>
       </Canvas>