Add postprocessing and envMap

.gitattributes

@@ -1 +1,2 @@
 packages/client/public/model/*.glb filter=lfs diff=lfs merge=lfs -text
+packages/client/public/env/*.png filter=lfs diff=lfs merge=lfs -text

packages/client/package-lock.json

@@ -2533,6 +2533,15 @@
         "zustand": "^3.0.3"
       }
     },
+    "@react-three/postprocessing": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@react-three/postprocessing/-/postprocessing-1.5.0.tgz",
+      "integrity": "sha512-sV0qoGfjCVBk/193gevMEIhJ/ocjk1LUzrpuaa0wvRvcVk17bF1586opGas8WGd5jNmz6dzq8qKYCYDr4hXz5Q==",
+      "requires": {
+        "postprocessing": "^6.17.1",
+        "react-merge-refs": "^1.1.0"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -12325,6 +12334,11 @@
         "uniq": "^1.0.1"
       }
     },
+    "postprocessing": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.18.0.tgz",
+      "integrity": "sha512-AUmV+465StCApG6QG5J7lSYn1DmtwLDcaIQ7+aoyXsnw3qmhM3u31Xr0qpWrEmLDW52bQ9VntVCdXixHT5BUuA=="
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

packages/client/package.json

@@ -7,6 +7,7 @@
     "@loadable/component": "^5.14.1",
     "@react-three/cannon": "^0.5.3",
     "@react-three/drei": "^2.2.2",
+    "@react-three/postprocessing": "^1.5.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

packages/client/src/components/Museo.tsx

@@ -1,20 +1,32 @@
-import React, { Suspense } from 'react'
 import { Box } from '@chakra-ui/core'
-import { OrbitControls, Sky } from '@react-three/drei'
+import { Physics } from '@react-three/cannon'
+import { PointerLockControls, Sky } from '@react-three/drei'
+import { Environment } from '@react-three/drei/Environment'
+import {
+  Bloom,
+  DepthOfField,
+  EffectComposer,
+  Vignette,
+} from '@react-three/postprocessing'
+import React, { Suspense } from 'react'
 import { Canvas } from 'react-three-fiber'
-import { PointerLockControls } from '@react-three/drei'
-
 import Plaza from '../models/Plaza'
 import PlazaCollision from '../models/Plaza_collision'
-import { Physics } from '@react-three/cannon'
 import Player from './Player'
 
 const Museo: React.FC = () => {
   return (
     <Box w="100vw" h="100vh">
-      <Canvas shadowMap>
-        <ambientLight />
-        <pointLight position={[10, 10, 10]} />
+      <Canvas colorManagement>
+        <ambientLight color={0xd3840e} />
+        <pointLight position={[0, 20, -30]} color={0xd3840e} />
+        <Suspense fallback={null}>
+          <Environment
+            background={false}
+            files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
+            path={'env/'}
+          />
+        </Suspense>
         <Suspense fallback={null}>
           <Plaza />
           <Physics
@@ -42,6 +54,23 @@ const Museo: React.FC = () => {
           turbidity={8}
           rayleigh={2.9}
         />
+        <Suspense fallback={null}>
+          <EffectComposer>
+            <DepthOfField
+              focusDistance={0}
+              focalLength={0.15}
+              bokehScale={2}
+              height={480}
+            />
+            <Vignette eskil={false} offset={0.1} darkness={0.8} />
+            <Bloom
+              luminanceThreshold={0.7}
+              luminanceSmoothing={0.9}
+              height={300}
+              opacity={3}
+            />
+          </EffectComposer>
+        </Suspense>
         <PointerLockControls />
       </Canvas>
     </Box>