diff --git a/packages/client/src/3d/Effects.tsx b/packages/client/src/3d/Effects.tsx new file mode 100644 index 0000000..d87e2de --- /dev/null +++ b/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 ( + + + + + + ) +} + +export default Effects diff --git a/packages/client/src/3d/Lighting.tsx b/packages/client/src/3d/Lighting.tsx new file mode 100644 index 0000000..fb0d26a --- /dev/null +++ b/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 ( + <> + + + + + ) +} + +export default Lighting diff --git a/packages/client/src/components/Player.tsx b/packages/client/src/3d/Player.tsx similarity index 97% rename from packages/client/src/components/Player.tsx rename to packages/client/src/3d/Player.tsx index fc61096..ae0a3f4 100644 --- a/packages/client/src/components/Player.tsx +++ b/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]) }) diff --git a/packages/client/src/3d/index.tsx b/packages/client/src/3d/index.tsx new file mode 100644 index 0000000..0b394ac --- /dev/null +++ b/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 ( + <> + + + + + + + + + + + + + + ) +} + +export default Scene diff --git a/packages/client/src/models/Plaza.js b/packages/client/src/3d/models/World.js similarity index 100% rename from packages/client/src/models/Plaza.js rename to packages/client/src/3d/models/World.js diff --git a/packages/client/src/models/Plaza_collision.tsx b/packages/client/src/3d/models/WorldCollisions.tsx similarity index 88% rename from packages/client/src/models/Plaza_collision.tsx rename to packages/client/src/3d/models/WorldCollisions.tsx index 3556b14..c627583 100644 --- a/packages/client/src/models/Plaza_collision.tsx +++ b/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']) { diff --git a/packages/client/src/components/Museo.tsx b/packages/client/src/components/Museo.tsx index ff438c9..0968df7 100644 --- a/packages/client/src/components/Museo.tsx +++ b/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 ( - - - - - - - - - - - - - - - - - - + )