soft shadows & lighting

packages/viewer/src/components/viewer/index.tsx

@@ -1,13 +1,14 @@
 'use client'
 
 import { CeilingSystem, ItemSystem, RoofSystem, SlabSystem, WallSystem } from '@pascal-app/core'
-import { Bvh, Environment } from '@react-three/drei'
+import { Bvh } from '@react-three/drei'
 import { Canvas, extend, type ThreeToJSXElements } from '@react-three/fiber'
 import * as THREE from 'three/webgpu'
 import { GuideSystem } from '../../systems/guide/guide-system'
 import { LevelSystem } from '../../systems/level/level-system'
 import { ScanSystem } from '../../systems/scan/scan-system'
 import { SceneRenderer } from '../renderers/scene-renderer'
+import { Lights } from './lights'
 import PostProcessing from './post-processing'
 import { SelectionManager } from './selection-manager'
 import { ViewerCamera } from './viewer-camera'
@@ -26,38 +27,44 @@ interface ViewerProps {
 const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default' }) => {
   return (
     <Canvas
-        className={'bg-[#303035]'}
-        gl={async (props) => {
-          const renderer = new THREE.WebGPURenderer(props as any)
-          await renderer.init()
-          return renderer
-        }}
-        shadows
-        camera={{ position: [50, 50, 50], fov: 50 }}
-      >
-        <color attach="background" args={['#ececec']} />
-        <ViewerCamera />
+      className={'bg-[#303035]'}
+      gl={async (props) => {
+        const renderer = new THREE.WebGPURenderer(props as any)
+        await renderer.init()
+        renderer.toneMapping = THREE.ACESFilmicToneMapping
+        renderer.toneMappingExposure = 1.2
+        return renderer
+      }}
+      shadows={{
+        type: THREE.PCFShadowMap,
+        enabled: true,
+      }}
+      camera={{ position: [50, 50, 50], fov: 50 }}
+    >
+      <color attach="background" args={['#ececec']} />
+      <ViewerCamera />
 
-        <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow />
-        <Environment preset="sunset" environmentIntensity={0.3} />
-        <Bvh>
-          <SceneRenderer />
-        </Bvh>
+      {/* <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow
+        /> */}
+      <Lights />
+      <Bvh>
+        <SceneRenderer />
+      </Bvh>
 
-        {/* Default Systems */}
-        <LevelSystem />
-        <GuideSystem />
-        <ScanSystem />
-        {/* Core systems */}
-        <CeilingSystem />
-        <ItemSystem />
-        <RoofSystem />
-        <SlabSystem />
-        <WallSystem />
-        <PostProcessing />
+      {/* Default Systems */}
+      <LevelSystem />
+      <GuideSystem />
+      <ScanSystem />
+      {/* Core systems */}
+      <CeilingSystem />
+      <ItemSystem />
+      <RoofSystem />
+      <SlabSystem />
+      <WallSystem />
+      <PostProcessing />
 
-        {selectionManager === 'default' && <SelectionManager />}
-        {children}
+      {selectionManager === 'default' && <SelectionManager />}
+      {children}
     </Canvas>
   )
 }