Add new models, jump and save last position

packages/client/public/model/Museum.tsx

@@ -0,0 +1,59 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    entry_windows_mesh: THREE.Mesh
+    entry_windows_mesh_1: THREE.Mesh
+    dome_ground_mesh027: THREE.Mesh
+    ['dome_ground_mesh.027_1']: THREE.Mesh
+    dome_ground_mesh011: THREE.Mesh
+    ['dome_ground_mesh.011_1']: THREE.Mesh
+    dome_ground_mesh021: THREE.Mesh
+    ['dome_ground_mesh.021_1']: THREE.Mesh
+  }
+  materials: {
+    dome_glass: THREE.MeshStandardMaterial
+    metal_glass: THREE.MeshStandardMaterial
+    marble: THREE.MeshStandardMaterial
+    wooden_floor: THREE.MeshStandardMaterial
+    painting: THREE.MeshStandardMaterial
+    wood: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/museum.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group position={[-5.44, 3.26, -141.11]}>
+        <group position={[0, 11.49, 0]} scale={[2.41, 1.5, 2.41]}>
+          <mesh material={materials.dome_glass} geometry={nodes.entry_windows_mesh.geometry} />
+          <mesh material={materials.metal_glass} geometry={nodes.entry_windows_mesh_1.geometry} />
+        </group>
+        <group position={[0, 0, 0]} scale={[12.83, 7.98, 12.83]}>
+          <mesh material={materials.metal_glass} geometry={nodes.dome_ground_mesh027.geometry} />
+          <mesh material={materials.dome_glass} geometry={nodes['dome_ground_mesh.027_1'].geometry} />
+        </group>
+        <group position={[0, 0, 0]} scale={[12.83, 7.98, 12.83]}>
+          <mesh material={materials.marble} geometry={nodes.dome_ground_mesh011.geometry} />
+          <mesh material={materials.wooden_floor} geometry={nodes['dome_ground_mesh.011_1'].geometry} />
+        </group>
+        <group position={[0, 2.43, 0]} scale={[12.83, 7.98, 12.83]}>
+          <mesh material={materials.painting} geometry={nodes.dome_ground_mesh021.geometry} />
+          <mesh material={materials.wood} geometry={nodes['dome_ground_mesh.021_1'].geometry} />
+        </group>
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/museum.glb')

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

@@ -8,7 +8,7 @@ const Lighting: React.FC = () => {
       <ambientLight color={0xd3840e} />
       <pointLight position={[0, 20, -30]} color={0xd3840e} />
       <Sky
-        distance={500}
+        distance={1000}
         azimuth={0.25}
         mieDirectionalG={0.83}
         mieCoefficient={0.008}

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

@@ -20,7 +20,7 @@ import { ActionName } from './models/Human'
 
 const SPEED = 0.8
 export const HEIGHT = 1.5
-const CIRCLE_RADIUS = 1.0
+const CIRCLE_RADIUS = 0.5
 const CIRCLE_SEGMENTS = 8
 const InitialPosition = new Vector3(49.92, 3.15, 34.52)
 
@@ -96,8 +96,9 @@ const upVector = new Vector3(0, 1, 0)
 // TODO Improve physics in player
 const Player = () => {
   const socket = useStore((state) => state.socket)
+  const initialTransform = useStore((state) => state.initialTransform)
   const pointerLocked = useStore((state) => state.pointerLocked)
-  const { forward, backward, left, right, run } = usePlayerControls()
+  const { jump, forward, backward, left, right, run } = usePlayerControls()
   const { camera } = useThree()
 
   const groupRef = useRef<Group>()
@@ -110,12 +111,13 @@ const Player = () => {
   const speed = useRef<number>(SPEED)
 
   const bottomRaycaster = useRef(
-    new Raycaster(new Vector3(), new Vector3(0, -1, 0), 0, HEIGHT + 0.5),
+    new Raycaster(new Vector3(), new Vector3(0, -1, 0), 0, HEIGHT + 1),
   )
 
   const collisionCircle = useRef<Mesh>()
   const collisionCircleGeometry = new CircleGeometry(CIRCLE_RADIUS, CIRCLE_SEGMENTS)
   collisionCircleGeometry.rotateX(Math.PI / 2)
+  collisionCircle
   const collisionCircleMaterial = new MeshBasicMaterial({
     color: 0xff0000,
     wireframe: true,
@@ -127,20 +129,28 @@ const Player = () => {
       .map((_, i) => {
         const vert = collisionCircleGeometry.vertices[i + 1].clone()
         const direction = vert.sub(collisionCircleGeometry.vertices[0]).normalize()
-
         return new Raycaster(new Vector3(), direction, 0, CIRCLE_RADIUS)
       }),
   )
 
+  useEffect(() => {
+    if (initialTransform && groupRef.current) {
+      groupRef.current.position.fromArray(initialTransform.position)
+      camera.quaternion.fromArray(initialTransform.rotation)
+    }
+  }, [initialTransform, groupRef.current])
+
   useEffect(() => {
     const socketEmitTransformInterval = setInterval(() => {
       if (socket && groupRef.current && camera) {
         const cameraRotation = camera.quaternion.toArray()
-        const [x, , z] = direction.current.toArray()
+        const [x, y, z] = direction.current.toArray()
 
         let anim = animations.idle
 
-        if (x === 0 && z === 0) {
+        if (velocity.current.y > 0) {
+          anim = animations.jump
+        } else if (x === 0 && z === 0) {
           const rotationAngle = relativeAngle(
             upVector,
             camera.quaternion,
@@ -209,18 +219,22 @@ const Player = () => {
       bottomRaycaster.current.ray.origin.copy(groupRef.current.position)
 
       let intersections = []
-      intersections = bottomRaycaster.current.intersectObject(
+      intersections = bottomRaycaster.current.intersectObject(collisionsRef.current, true)
-        collisionsRef.current,
+
-        false,
+      if (jump && velocity.current.y === 0) {
-      )
+        velocity.current.y = 4
+      }
 
       if (intersections.length < 1) {
-        velocity.current.y -= 9.8 * 5 * delta
+        velocity.current.y -= 9.8 * 8 * delta
       } else {
-        velocity.current.y = 0
+        if (velocity.current.y <= 0 && intersections[0].distance < HEIGHT) {
-        groupRef.current.position.y = intersections[0].point.y + HEIGHT
+          velocity.current.y = 0
+          groupRef.current.position.y = intersections[0].point.y + HEIGHT
+        }
       }
 
+      // Reset
       if (groupRef.current.position.y < -50) {
         groupRef.current.position.copy(InitialPosition)
         velocity.current.y = 0
@@ -246,11 +260,12 @@ const Player = () => {
       if (collisionCircleGeometry.vertices) {
         for (let i = 0; i < CIRCLE_SEGMENTS; i++) {
           wallRaycasters.current[i].ray.origin.copy(groupRef.current.position)
+          wallRaycasters.current[i].ray.origin.y -= HEIGHT * 0.6
 
           let wallIntersections = []
           wallIntersections = wallRaycasters.current[i].intersectObject(
             collisionsRef.current,
-            false,
+            true,
           )
 
           if (
@@ -259,7 +274,7 @@ const Player = () => {
           ) {
             const distance = CIRCLE_RADIUS - wallIntersections[0].distance
 
-            currentPositionClone.current.copy(groupRef.current.position)
+            currentPositionClone.current.copy(wallRaycasters.current[i].ray.origin)
             const direction = wallIntersections[0].point
               .sub(currentPositionClone.current)
               .normalize()
@@ -275,10 +290,6 @@ const Player = () => {
       moveRight(-velocity.current.z * speed.current)
       groupRef.current.position.y += velocity.current.y * delta
     }
-
-    // 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])
   })
   return (
     <>
@@ -286,7 +297,7 @@ const Player = () => {
         <FirstPersonCamera position={[0, -0.1, 0]} />
         <mesh
           ref={collisionCircle}
-          position={[0, -HEIGHT / 2, 0]}
+          position={[0, -HEIGHT * 0.1, 0]}
           geometry={collisionCircleGeometry}
           material={collisionCircleMaterial}
           visible={false}

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import Terrain from './models/Terrain'
+import ParkProps from './models/Park_props'
+import Street from './models/Street'
+import Trees from './models/Trees'
+import Entrance from './models/Entrance'
+import Museum from './models/Museum'
+
+const World: React.FC = () => {
+  return (
+    <>
+      <Terrain />
+      <ParkProps />
+      <Trees />
+      <Entrance />
+      <Museum />
+
+      <Street />
+    </>
+  )
+}
+
+export default World

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

@@ -1,32 +1,15 @@
 import React, { Suspense } from 'react'
 import { useThree } from 'react-three-fiber'
 import { Stats, Text } from '@react-three/drei'
-import { Euler, Quaternion } from 'three'
 
-import World from './models/World'
+import World from './World'
 import Player from './Player'
 import Lighting from './Lighting'
 import Effects from './Effects'
 import Controls from './Controls'
 import Users from './Users'
-import Computer from './models/Computer'
 import { useEffect } from 'react'
 
-const computerPositions = [
-  {
-    rotation: [0, 0.9340353012084961, 0, 0.35718077421188354],
-    translation: [-26.65045738220215, 3.425341844558716, -113.49897766113281],
-  },
-  {
-    rotation: [0, 0.9848144054412842, 0, 0.17361053824424744],
-    translation: [-17.151742935180664, 3.4566614627838135, -108.55608367919922],
-  },
-  {
-    rotation: [0, 0, 0, 0],
-    translation: [-33.87189483642578, 3.452946424484253, -121.23444366455078],
-  },
-]
-
 const Scene: React.FC = () => {
   // addAfterEffect(() => {
   //   console.log(gl.info.render);
@@ -57,17 +40,6 @@ const Scene: React.FC = () => {
           ARTIFICIOS 2020
         </Text>
 
-        <Text
-          position={[-5.640829086303711, 6, -72.78675842285156]}
-          color="white"
-          fontSize={1.0}
-          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
-          anchorX="center"
-          anchorY="middle"
-        >
-          EN CONSTRUCCIÓN
-        </Text>
-
         <Users />
         <Effects />
       </Suspense>

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

@@ -0,0 +1,38 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    Cube009: THREE.Mesh
+    ['Cube.009_1']: THREE.Mesh
+    ['Cube.009_2']: THREE.Mesh
+    ['Cube.009_3']: THREE.Mesh
+    ['Cube.009_4']: THREE.Mesh
+  }
+  materials: {
+    marble: THREE.MeshStandardMaterial
+    black: THREE.MeshStandardMaterial
+    metal_glass: THREE.MeshStandardMaterial
+    sidewalk: THREE.MeshStandardMaterial
+    green_metal: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { scene, materials } = useGLTF('/model/entrance.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <primitive object={scene} dispose={null} matrixAutoUpdate={false} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/entrance.glb')

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

@@ -0,0 +1,34 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    collisions_entrance: THREE.Mesh
+  }
+  materials: {
+    collision: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/entrance_collisions.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <mesh
+        material={materials.collision}
+        geometry={nodes.collisions_entrance.geometry}
+        position={[-5.45, 1.02, -33.08]}
+      />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/entrance_collisions.glb')

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

@@ -107,8 +107,13 @@ const Human: React.FC<JSX.IntrinsicElements['group'] & { id: number }> = ({
 
         newAction.enabled = true
         newAction.setEffectiveTimeScale(1)
-        newAction.setEffectiveWeight(1)
+
-        previousAction.crossFadeTo(newAction, 0.2, true)
+        const weight = state.animation === 'turn_left' || 'turn_right' ? 0.5 : 1
+        const time = state.animation === 'jump' ? 0 : 0.2
+
+        newAction.setEffectiveWeight(weight)
+
+        previousAction.crossFadeTo(newAction, time, true)
         currentAnimation.current = state.animation
       },
       (state) => state?.userTransforms?.[id],

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

@@ -0,0 +1,43 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    entry_windows_mesh: THREE.Mesh
+    entry_windows_mesh_1: THREE.Mesh
+    dome_ground_mesh027: THREE.Mesh
+    ['dome_ground_mesh.027_1']: THREE.Mesh
+    dome_ground_mesh011: THREE.Mesh
+    ['dome_ground_mesh.011_1']: THREE.Mesh
+    dome_ground_mesh021: THREE.Mesh
+    ['dome_ground_mesh.021_1']: THREE.Mesh
+  }
+  materials: {
+    dome_glass: THREE.MeshStandardMaterial
+    metal_glass: THREE.MeshStandardMaterial
+    marble: THREE.MeshStandardMaterial
+    wooden_floor: THREE.MeshStandardMaterial
+    painting: THREE.MeshStandardMaterial
+    wood: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { scene } = useGLTF('/model/museum.glb') as GLTFResult
+
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <primitive object={scene} dispose={null} matrixAutoUpdate={false} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/museum.glb')

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

@@ -0,0 +1,38 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    museum_collision: THREE.Mesh
+  }
+  materials: {
+    collision: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/museum_collisions.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group position={[-5.44, 3.26, -141.11]}>
+        <mesh
+          material={materials.collision}
+          geometry={nodes.museum_collision.geometry}
+          position={[0, 0, 0]}
+          rotation={[0, -Math.PI / 2, 0]}
+          scale={[6.03, 3.75, 6.03]}
+        />
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/model/museum_collisions.glb')

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

@@ -0,0 +1,34 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    collisions001: THREE.Mesh
+  }
+  materials: {
+    collision: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/park_collisions.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <mesh
+        material={materials.collision}
+        geometry={nodes.collisions001.geometry}
+        position={[-5.45, 1.23, -33.08]}
+      />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/park_collisions.glb')

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

@@ -0,0 +1,88 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    fuente_mesh: THREE.Mesh
+    fuente_mesh_1: THREE.Mesh
+    hamacas: THREE.Mesh
+    lamp_mesh: THREE.Mesh
+    lamp_mesh_1: THREE.Mesh
+  }
+  materials: {
+    marble: THREE.MeshStandardMaterial
+    water: THREE.MeshStandardMaterial
+    black_metal: THREE.MeshStandardMaterial
+    ['Material.001']: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/park_props.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group position={[44.71, 1.96, 24.73]}>
+        <mesh material={materials.marble} geometry={nodes.fuente_mesh.geometry} />
+        <mesh material={materials.water} geometry={nodes.fuente_mesh_1.geometry} />
+      </group>
+      <mesh
+        material={materials.black_metal}
+        geometry={nodes.hamacas.geometry}
+        position={[32.05, 1.14, 33.16]}
+        rotation={[0, 0.44, 0]}
+      />
+      <group position={[17.11, 1.22, -25.95]} scale={[0.52, 0.52, 0.52]}>
+        <mesh material={materials.black_metal} geometry={nodes.lamp_mesh.geometry} />
+        <mesh
+          material={materials['Material.001']}
+          geometry={nodes.lamp_mesh_1.geometry}
+        />
+      </group>
+      <group position={[40.48, 1.22, -2.41]} scale={[0.52, 0.52, 0.52]}>
+        <mesh material={materials.black_metal} geometry={nodes.lamp_mesh.geometry} />
+        <mesh
+          material={materials['Material.001']}
+          geometry={nodes.lamp_mesh_1.geometry}
+        />
+      </group>
+      <group position={[50.76, 1.23, 14.09]} scale={[0.52, 0.52, 0.52]}>
+        <mesh material={materials.black_metal} geometry={nodes.lamp_mesh.geometry} />
+        <mesh
+          material={materials['Material.001']}
+          geometry={nodes.lamp_mesh_1.geometry}
+        />
+      </group>
+      <group position={[38.38, 1.22, -21.31]} scale={[0.52, 0.52, 0.52]}>
+        <mesh material={materials.black_metal} geometry={nodes.lamp_mesh.geometry} />
+        <mesh
+          material={materials['Material.001']}
+          geometry={nodes.lamp_mesh_1.geometry}
+        />
+      </group>
+      <group position={[30.36, 1.23, 29.05]} scale={[0.52, 0.52, 0.52]}>
+        <mesh material={materials.black_metal} geometry={nodes.lamp_mesh.geometry} />
+        <mesh
+          material={materials['Material.001']}
+          geometry={nodes.lamp_mesh_1.geometry}
+        />
+      </group>
+      <group position={[59.38, 1.23, 36.05]} scale={[0.52, 0.52, 0.52]}>
+        <mesh material={materials.black_metal} geometry={nodes.lamp_mesh.geometry} />
+        <mesh
+          material={materials['Material.001']}
+          geometry={nodes.lamp_mesh_1.geometry}
+        />
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/model/park_props.glb')

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

@@ -0,0 +1,34 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    street_1: THREE.Mesh
+    street_2: THREE.Mesh
+    street_3: THREE.Mesh
+  }
+  materials: {
+    sidewalk: THREE.MeshStandardMaterial
+    cordon: THREE.MeshStandardMaterial
+    asfalt: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { scene } = useGLTF('/model/street.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <primitive object={scene} dispose={null} matrixAutoUpdate={false} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/street.glb')

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

@@ -0,0 +1,34 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    collisions_street: THREE.Mesh
+  }
+  materials: {
+    collision: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/street_collisions.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <mesh
+        material={materials.collision}
+        geometry={nodes.collisions_street.geometry}
+        position={[-5.45, 1.23, -33.08]}
+      />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/street_collisions.glb')

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

@@ -0,0 +1,32 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import * as THREE from 'three'
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    park_ground_mesh: THREE.Mesh
+    park_ground_mesh_1: THREE.Mesh
+  }
+  materials: {
+    grass: THREE.MeshStandardMaterial
+    dirt: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { scene, materials } = useGLTF('/model/terrain.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <primitive object={scene} dispose={null} matrixAutoUpdate={false} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/terrain.glb')

packages/client/src/3d/models/Trees.js

@@ -0,0 +1,19 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+
+export default function Model(props) {
+  const group = useRef()
+  const { scene } = useGLTF('/model/trees.glb')
+
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <primitive object={scene} dispose={null} matrixAutoUpdate={false} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/trees.glb')

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

@@ -2,43 +2,28 @@
 auto-generated by: https://github.com/pmndrs/gltfjsx
 */
 import React, { forwardRef, ForwardedRef } from 'react'
-import { useGLTF } from '@react-three/drei/useGLTF'
+import ParkCollisions from './Park_collisions'
-
+import StreetCollisions from './Street_collisions'
-import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+import MuseumCollisions from './Museum_collisions'
+import EntranceCollsions from './Entrance_collisions'
 import { Mesh, MeshBasicMaterial } from 'three'
 
-type GLTFResult = GLTF & {
-  nodes: {
-    collisions: THREE.Mesh
-  }
-  materials: {
-    collision: THREE.MeshStandardMaterial
-  }
-}
-
 const Model = forwardRef(
   (props: JSX.IntrinsicElements['group'], ref: ForwardedRef<Mesh>) => {
-    const { nodes } = useGLTF('/model/plaza_collision.glb') as GLTFResult
-
     const material = new MeshBasicMaterial({
       wireframe: true,
       color: 0xffff00,
     })
 
     return (
-      <group {...props} dispose={null}>
+      <group ref={ref} {...props} dispose={null}>
-        <mesh
+        <ParkCollisions />
-          ref={ref}
+        <EntranceCollsions />
-          material={material}
+        <MuseumCollisions />
-          geometry={nodes.collisions.geometry}
+        <StreetCollisions />
-          visible={true}
-          position={[-5.31, 1.23, -32.92]}
-        />
       </group>
     )
   },
 )
 
-useGLTF.preload('/model/collision_mesh.glb')
-
 export default Model

packages/client/src/components/Museo.tsx

@@ -8,7 +8,7 @@ import MenuOverlay from './MenuOverlay'
 import Error from './Error'
 import Scene from '../3d'
 
-import useStore, { UserTransforms } from '../store'
+import useStore, { Transform, UserTransforms } from '../store'
 import useLogin from '../hooks/useLogin'
 import { Redirect } from 'react-router-dom'
 
@@ -19,6 +19,7 @@ const Museo: React.FC = () => {
   const setError = useStore((state) => state.setError)
   const error = useStore((state) => state.error)
   const setUserTransforms = useStore((state) => state.setUserTransforms)
+  const setInitialTransform = useStore((state) => state.setInitialTransform)
 
   useEffect(() => {
     if (!response || isLoading) {
@@ -31,6 +32,11 @@ const Museo: React.FC = () => {
     socket.on('broadcast-transforms', (payload: UserTransforms) => {
       setUserTransforms(payload)
     })
+    socket.on('initial-transform', (payload: Transform | null) => {
+      if (payload) {
+        setInitialTransform(payload)
+      }
+    })
 
     return () => {
       socket.close()

packages/client/src/store.ts

@@ -25,8 +25,10 @@ export type State = {
   setSocket: (socket: Socket | null) => void
   error: Error
   setError: (error: Error) => void
+  initialTransform: null | Transform
   userTransforms: UserTransforms | null
   setUserTransforms: (userTransforms: UserTransforms) => void
+  setInitialTransform: (initialTransform: Transform) => void
 }
 
 const useStore = create<State>((set) => ({
@@ -37,9 +39,11 @@ const useStore = create<State>((set) => ({
   socket: null,
   setSocket: (socket) => set(() => ({ socket })),
   error: null,
+  initialTransform: null,
   setError: (error) => set(() => ({ error })),
   userTransforms: null,
   setUserTransforms: (userTransforms) => set(() => ({ userTransforms })),
+  setInitialTransform: (initialTransform) => set(() => ({ initialTransform })),
 }))
 
 export default useStore

packages/server/src/index.js

@@ -22,6 +22,7 @@ import logger, { morganStream } from './logger'
 
 import passport from 'passport'
 import mongoose from 'mongoose'
+import UserModel from './models/user'
 
 import redisClient, {
   asyncHEXISTS,
@@ -138,9 +139,22 @@ io.on('connection', async (socket) => {
 
   socket.on('disconnect', async () => {
     logger.debug(`User with id ${socket.id} disconnected`)
+    const user = await UserModel.findById(socket.request.user._id)
+
+    if (user) {
+      const transform = await asyncHGET('transform', String(socket.id))
+      user.lastLocation = JSON.parse(transform)
+      user.save()
+    }
+
     await asyncHDEL('transform', String(socket.id))
     await asyncHDEL('socket', String(socket.request.user._id))
   })
+
+  const user = await UserModel.findById(socket.request.user._id)
+  if (user) {
+    socket.emit('initial-transform', user.lastLocation)
+  }
 })
 
 async function broadcastTransforms() {

packages/server/src/models/user.js

@@ -19,6 +19,7 @@ const userSchema = new Schema(
       required: true,
     },
     photo: String,
+    lastLocation: Object,
   },
   { timestamps: true },
 )