Refactor 3D code

packages/client/src/3d/Effects.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import {
+  Bloom,
+  DepthOfField,
+  EffectComposer,
+  Vignette,
+} from '@react-three/postprocessing'
+
+// TODO Explore drei/three own's EffectComposer
+const Effects: React.FC = () => {
+  return (
+    <EffectComposer>
+      <DepthOfField
+        focusDistance={0}
+        focalLength={0.15}
+        bokehScale={2.5}
+        width={window.innerWidth / 2}
+        height={window.innerHeight / 2}
+      />
+      <Vignette eskil={false} offset={0.1} darkness={0.8} />
+      <Bloom luminanceThreshold={0.7} luminanceSmoothing={0.5} height={300} opacity={3} />
+    </EffectComposer>
+  )
+}
+
+export default Effects

packages/client/src/3d/Lighting.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Sky } from '@react-three/drei'
+
+// TODO add props to change lighting according to real world time
+const Lighting: React.FC = () => {
+  return (
+    <>
+      <ambientLight color={0xd3840e} />
+      <pointLight position={[0, 20, -30]} color={0xd3840e} />
+      <Sky
+        distance={5500}
+        azimuth={0.25}
+        mieDirectionalG={0.83}
+        mieCoefficient={0.008}
+        inclination={0.5}
+        turbidity={8}
+        rayleigh={2.9}
+      />
+    </>
+  )
+}
+
+export default Lighting

packages/client/src/3d/Player.tsx

@@ -44,6 +44,7 @@ const usePlayerControls = () => {
   return movement
 }
 
+// TODO Improve physics in player
 const Player = (props: SphereProps) => {
   const [ref, api] = useSphere(() => ({
     type: 'Dynamic',
@@ -75,6 +76,8 @@ const Player = (props: SphereProps) => {
     } else {
       api.velocity.set(0, 0, 0)
     }
+
+    // TODO enable jump if cheating
     //if (jump && Math.abs(parseFloat(velocity.current[1].toFixed(2))) < 0.05)
     //  api.velocity.set(velocity.current[0], 10, velocity.current[2])
   })

packages/client/src/3d/index.tsx

@@ -0,0 +1,38 @@
+import React, { Suspense } from 'react'
+import { Physics } from '@react-three/cannon'
+import { PointerLockControls } from '@react-three/drei'
+
+import World from './models/World'
+import WorldCollisions from './models/WorldCollisions'
+import Player from './Player'
+import Lighting from './Lighting'
+import Effects from './Effects'
+
+const Scene: React.FC = () => {
+  return (
+    <>
+      <Lighting />
+
+      <Suspense fallback={null}>
+        <World />
+        <Physics
+          gravity={[0, 0, 0]}
+          iterations={2}
+          size={10}
+          defaultContactMaterial={{
+            friction: 0,
+            restitution: 0,
+          }}
+        >
+          <WorldCollisions />
+          <Player />
+        </Physics>
+        <Effects />
+      </Suspense>
+
+      <PointerLockControls />
+    </>
+  )
+}
+
+export default Scene

packages/client/src/3d/models/WorldCollisions.tsx

@@ -10,7 +10,7 @@ import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
 
 type GLTFResult = GLTF & {
   nodes: {
-    collision_mesh: THREE.Mesh
+    collisions: THREE.Mesh
   }
   materials: {
     collision: THREE.MeshStandardMaterial
@@ -26,7 +26,7 @@ export default function Model(props: JSX.IntrinsicElements['group']) {
     color: 0xffff00,
   })
 
-  const geometry = nodes.collision_mesh.geometry as THREE.BufferGeometry
+  const geometry = nodes.collisions.geometry as THREE.BufferGeometry
 
   if (geometry.index === null) return null
 
@@ -45,7 +45,7 @@ export default function Model(props: JSX.IntrinsicElements['group']) {
       <mesh
         ref={ref}
         material={material}
-        geometry={nodes.collision_mesh.geometry}
+        geometry={nodes.collisions.geometry}
         visible={false}
       />
     </group>

packages/client/src/components/Museo.tsx

@@ -1,69 +1,15 @@
+import React from 'react'
+
 import { Box } from '@chakra-ui/core'
-import { Physics } from '@react-three/cannon'
-import { PointerLockControls, Sky } from '@react-three/drei'
-import {
-  Bloom,
-  DepthOfField,
-  EffectComposer,
-  Vignette,
-} from '@react-three/postprocessing'
-import React, { Suspense } from 'react'
 import { Canvas } from 'react-three-fiber'
-import Plaza from '../models/Plaza'
-import PlazaCollision from '../models/Plaza_collision'
-import Player from './Player'
+
+import Scene from '../3d'
 
 const Museo: React.FC = () => {
   return (
     <Box w="100vw" h="100vh">
       <Canvas colorManagement>
-        <ambientLight color={0xd3840e} />
-        <pointLight position={[0, 20, -30]} color={0xd3840e} />
-        <Suspense fallback={null}>
-          <Plaza />
-          <Physics
-            gravity={[0, 0, 0]}
-            iterations={2}
-            step={1 / 60}
-            size={10}
-            broadphase="Naive"
-            defaultContactMaterial={{
-              friction: 0,
-              restitution: 0,
-            }}
-          >
-            <PlazaCollision />
-            <Player />
-          </Physics>
-        </Suspense>
-        <Sky
-          distance={550000}
-          azimuth={0.25}
-          mieDirectionalG={0.83}
-          mieCoefficient={0.008}
-          inclination={0.5}
-          turbidity={8}
-          rayleigh={2.9}
-        />
-        <Suspense fallback={null}>
-          <EffectComposer multisampling={16}>
-            <DepthOfField
-              focusDistance={0}
-              focalLength={0.15}
-              bokehScale={2.5}
-              width={window.innerWidth / 2}
-              height={window.innerHeight / 2}
-            />
-            <Vignette eskil={false} offset={0.1} darkness={0.8} />
-            <Bloom
-              luminanceThreshold={0.7}
-              luminanceSmoothing={0.9}
-              height={300}
-              opacity={1}
-            />
-          </EffectComposer>
-        </Suspense>
-        <PointerLockControls />
+        <Scene />
       </Canvas>
     </Box>
   )