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 (
)