From c81980321ecd44b7514739b5071ae3dadf358be6 Mon Sep 17 00:00:00 2001 From: Ian Mancini Date: Mon, 9 Nov 2020 14:22:47 -0300 Subject: [PATCH] Add postprocessing and envMap --- .gitattributes | 1 + packages/client/package-lock.json | 14 ++++++++ packages/client/package.json | 1 + packages/client/public/env/nx.png | 3 ++ packages/client/public/env/ny.png | 3 ++ packages/client/public/env/nz.png | 3 ++ packages/client/public/env/px.png | 3 ++ packages/client/public/env/py.png | 3 ++ packages/client/public/env/pz.png | 3 ++ packages/client/src/components/Museo.tsx | 45 +++++++++++++++++++----- 10 files changed, 71 insertions(+), 8 deletions(-) create mode 100644 packages/client/public/env/nx.png create mode 100644 packages/client/public/env/ny.png create mode 100644 packages/client/public/env/nz.png create mode 100644 packages/client/public/env/px.png create mode 100644 packages/client/public/env/py.png create mode 100644 packages/client/public/env/pz.png diff --git a/.gitattributes b/.gitattributes index de5d942..e621493 100644 --- a/.gitattributes +++ b/.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 diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json index 8964b9c..0bef5c9 100644 --- a/packages/client/package-lock.json +++ b/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", diff --git a/packages/client/package.json b/packages/client/package.json index d1ac3c5..0937b05 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/public/env/nx.png b/packages/client/public/env/nx.png new file mode 100644 index 0000000..3b05bdf --- /dev/null +++ b/packages/client/public/env/nx.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:527d029bb343725a32de4ea043b521b74f4fe096100279e6d4b9460124c23157 +size 94362 diff --git a/packages/client/public/env/ny.png b/packages/client/public/env/ny.png new file mode 100644 index 0000000..1473619 --- /dev/null +++ b/packages/client/public/env/ny.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a467c122fab545c1d353d8ca5695cd3162d77efdb798833432dc89541725dc4a +size 137347 diff --git a/packages/client/public/env/nz.png b/packages/client/public/env/nz.png new file mode 100644 index 0000000..3e54600 --- /dev/null +++ b/packages/client/public/env/nz.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bb967bf790009c0bacb9e996b64ad661d9231b42fc37a028b7f13e0690d327a0 +size 92840 diff --git a/packages/client/public/env/px.png b/packages/client/public/env/px.png new file mode 100644 index 0000000..f6afcb5 --- /dev/null +++ b/packages/client/public/env/px.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ead472e75a158a056e229862a6fdfdababb71ac6c67dff92a58e3301d77e20b2 +size 100053 diff --git a/packages/client/public/env/py.png b/packages/client/public/env/py.png new file mode 100644 index 0000000..61958b7 --- /dev/null +++ b/packages/client/public/env/py.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:811a506ea6f7fef6a6cfc750995895b0f51c4eb331eaee70aaae7dc9c765cf23 +size 46064 diff --git a/packages/client/public/env/pz.png b/packages/client/public/env/pz.png new file mode 100644 index 0000000..f898dce --- /dev/null +++ b/packages/client/public/env/pz.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4e18cc6b3656d4fa66c58933be5e6769d0674eee0e2cc0c0007b5c3d3ff1c729 +size 99395 diff --git a/packages/client/src/components/Museo.tsx b/packages/client/src/components/Museo.tsx index 20f1558..e9a1dfd 100644 --- a/packages/client/src/components/Museo.tsx +++ b/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 ( - - - + + + + + + { turbidity={8} rayleigh={2.9} /> + + + + + + +