From 640a352c732cd354527be879ff9db754a444eee4 Mon Sep 17 00:00:00 2001 From: Ian Mancini Date: Sat, 12 Dec 2020 05:26:23 -0300 Subject: [PATCH] Add new models, jump and save last position --- packages/client/public/model/Museum.tsx | 59 +++++++++++++ packages/client/public/model/computer.glb | 3 - packages/client/public/model/entrance.glb | 3 + .../public/model/entrance_collisions.glb | 3 + packages/client/public/model/museum.glb | 3 + .../client/public/model/museum_collisions.glb | 3 + .../client/public/model/park_collisions.glb | 3 + packages/client/public/model/park_props.glb | 3 + packages/client/public/model/plaza.glb | 3 - packages/client/public/model/street.glb | 3 + .../client/public/model/street_collisions.glb | 3 + packages/client/public/model/terrain.glb | 3 + packages/client/public/model/trees.glb | 3 + packages/client/src/3d/Lighting.tsx | 2 +- packages/client/src/3d/Player.tsx | 51 ++++++----- packages/client/src/3d/World.tsx | 24 +++++ packages/client/src/3d/index.tsx | 30 +------ packages/client/src/3d/models/Entrance.tsx | 38 ++++++++ .../src/3d/models/Entrance_collisions.tsx | 34 +++++++ packages/client/src/3d/models/Human.tsx | 9 +- packages/client/src/3d/models/Museum.tsx | 43 +++++++++ .../src/3d/models/Museum_collisions.tsx | 38 ++++++++ .../client/src/3d/models/Park_collisions.tsx | 34 +++++++ packages/client/src/3d/models/Park_props.tsx | 88 +++++++++++++++++++ packages/client/src/3d/models/Street.tsx | 34 +++++++ .../src/3d/models/Street_collisions.tsx | 34 +++++++ packages/client/src/3d/models/Terrain.tsx | 32 +++++++ packages/client/src/3d/models/Trees.js | 19 ++++ .../client/src/3d/models/WorldCollisions.tsx | 33 ++----- packages/client/src/components/Museo.tsx | 8 +- packages/client/src/store.ts | 4 + packages/server/src/index.js | 14 +++ packages/server/src/models/user.js | 1 + 33 files changed, 582 insertions(+), 83 deletions(-) create mode 100644 packages/client/public/model/Museum.tsx delete mode 100644 packages/client/public/model/computer.glb create mode 100644 packages/client/public/model/entrance.glb create mode 100644 packages/client/public/model/entrance_collisions.glb create mode 100644 packages/client/public/model/museum.glb create mode 100644 packages/client/public/model/museum_collisions.glb create mode 100644 packages/client/public/model/park_collisions.glb create mode 100644 packages/client/public/model/park_props.glb delete mode 100644 packages/client/public/model/plaza.glb create mode 100644 packages/client/public/model/street.glb create mode 100644 packages/client/public/model/street_collisions.glb create mode 100644 packages/client/public/model/terrain.glb create mode 100644 packages/client/public/model/trees.glb create mode 100644 packages/client/src/3d/World.tsx create mode 100644 packages/client/src/3d/models/Entrance.tsx create mode 100644 packages/client/src/3d/models/Entrance_collisions.tsx create mode 100644 packages/client/src/3d/models/Museum.tsx create mode 100644 packages/client/src/3d/models/Museum_collisions.tsx create mode 100644 packages/client/src/3d/models/Park_collisions.tsx create mode 100644 packages/client/src/3d/models/Park_props.tsx create mode 100644 packages/client/src/3d/models/Street.tsx create mode 100644 packages/client/src/3d/models/Street_collisions.tsx create mode 100644 packages/client/src/3d/models/Terrain.tsx create mode 100644 packages/client/src/3d/models/Trees.js diff --git a/packages/client/public/model/Museum.tsx b/packages/client/public/model/Museum.tsx new file mode 100644 index 0000000..6b6e3e1 --- /dev/null +++ b/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() + const { nodes, materials } = useGLTF('/museum.glb') as GLTFResult + return ( + + + + + + + + + + + + + + + + + + + + + ) +} + +useGLTF.preload('/museum.glb') diff --git a/packages/client/public/model/computer.glb b/packages/client/public/model/computer.glb deleted file mode 100644 index cf7fd39..0000000 --- a/packages/client/public/model/computer.glb +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c2acd2ad993e0575f951559ca7e6ea56b1404cb0f99807934b6d730b616a4121 -size 154232 diff --git a/packages/client/public/model/entrance.glb b/packages/client/public/model/entrance.glb new file mode 100644 index 0000000..50fd49b --- /dev/null +++ b/packages/client/public/model/entrance.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:49a475691a1f107d2ffd65c2e38b82c7cd94470dd9be5a603dc04a87651db3a6 +size 1294000 diff --git a/packages/client/public/model/entrance_collisions.glb b/packages/client/public/model/entrance_collisions.glb new file mode 100644 index 0000000..15183a2 --- /dev/null +++ b/packages/client/public/model/entrance_collisions.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0167ba244b901500d28b094c4aecdd068c07e0872f406409137982ec57d13a38 +size 6472 diff --git a/packages/client/public/model/museum.glb b/packages/client/public/model/museum.glb new file mode 100644 index 0000000..3ae3c8e --- /dev/null +++ b/packages/client/public/model/museum.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:31ed6980df6bad6de645855e040f406b9d980aeaa7eaa5422f07e601f1e13f3a +size 4218792 diff --git a/packages/client/public/model/museum_collisions.glb b/packages/client/public/model/museum_collisions.glb new file mode 100644 index 0000000..67292ef --- /dev/null +++ b/packages/client/public/model/museum_collisions.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c700527a8de0df2949a3049d51c7e2a5f3e5f8ffd215c7dfd69c9e5e96b843c4 +size 47932 diff --git a/packages/client/public/model/park_collisions.glb b/packages/client/public/model/park_collisions.glb new file mode 100644 index 0000000..71c7500 --- /dev/null +++ b/packages/client/public/model/park_collisions.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:87bc99d61c4baa3ea7b29573811581844bbca221a30d667c26669ed3954c106f +size 18732 diff --git a/packages/client/public/model/park_props.glb b/packages/client/public/model/park_props.glb new file mode 100644 index 0000000..feb0550 --- /dev/null +++ b/packages/client/public/model/park_props.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f4a26de1f869999b0839befa4b01641f898f2ae0731711a9489e5d80bff43ddf +size 84540 diff --git a/packages/client/public/model/plaza.glb b/packages/client/public/model/plaza.glb deleted file mode 100644 index 8807153..0000000 --- a/packages/client/public/model/plaza.glb +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8877f5e5c693be45c61c8cb8843516eddc7c70fdf6958583283382dafd421270 -size 1837816 diff --git a/packages/client/public/model/street.glb b/packages/client/public/model/street.glb new file mode 100644 index 0000000..7b93b55 --- /dev/null +++ b/packages/client/public/model/street.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:999add9c1410ab26ad951b2238a17250efe042d889dddcc51b78d532f28a34f6 +size 8484 diff --git a/packages/client/public/model/street_collisions.glb b/packages/client/public/model/street_collisions.glb new file mode 100644 index 0000000..01329ff --- /dev/null +++ b/packages/client/public/model/street_collisions.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:915e23ce32b2011dd83808e9238c3a00e25ac7f1d312057d87b142d73b337afa +size 6788 diff --git a/packages/client/public/model/terrain.glb b/packages/client/public/model/terrain.glb new file mode 100644 index 0000000..66af7b3 --- /dev/null +++ b/packages/client/public/model/terrain.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cfcd0716ed997661b3b5b3f22ffd18dc2e047019f1f9688ef0c78cf11f153ef0 +size 23320 diff --git a/packages/client/public/model/trees.glb b/packages/client/public/model/trees.glb new file mode 100644 index 0000000..25b8554 --- /dev/null +++ b/packages/client/public/model/trees.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8d8890f7cbb585f36bbd3fbb8201d479e84f31d081e289f68859c161218b397c +size 491776 diff --git a/packages/client/src/3d/Lighting.tsx b/packages/client/src/3d/Lighting.tsx index b77b11a..4f4f4f3 100644 --- a/packages/client/src/3d/Lighting.tsx +++ b/packages/client/src/3d/Lighting.tsx @@ -8,7 +8,7 @@ const Lighting: React.FC = () => { { 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() @@ -110,12 +111,13 @@ const Player = () => { const speed = useRef(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() 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( - collisionsRef.current, - false, - ) + intersections = bottomRaycaster.current.intersectObject(collisionsRef.current, true) + + 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 - groupRef.current.position.y = intersections[0].point.y + HEIGHT + if (velocity.current.y <= 0 && intersections[0].distance < 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 = () => { { + return ( + <> + + + + + + + + + ) +} + +export default World diff --git a/packages/client/src/3d/index.tsx b/packages/client/src/3d/index.tsx index 27d9e8e..94fca10 100644 --- a/packages/client/src/3d/index.tsx +++ b/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 - - EN CONSTRUCCIÓN - - diff --git a/packages/client/src/3d/models/Entrance.tsx b/packages/client/src/3d/models/Entrance.tsx new file mode 100644 index 0000000..4ef93e3 --- /dev/null +++ b/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() + const { scene, materials } = useGLTF('/model/entrance.glb') as GLTFResult + return ( + + + + ) +} + +useGLTF.preload('/model/entrance.glb') diff --git a/packages/client/src/3d/models/Entrance_collisions.tsx b/packages/client/src/3d/models/Entrance_collisions.tsx new file mode 100644 index 0000000..2d59892 --- /dev/null +++ b/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() + const { nodes, materials } = useGLTF('/model/entrance_collisions.glb') as GLTFResult + return ( + + + + ) +} + +useGLTF.preload('/model/entrance_collisions.glb') diff --git a/packages/client/src/3d/models/Human.tsx b/packages/client/src/3d/models/Human.tsx index 2ec4954..b38ddc5 100644 --- a/packages/client/src/3d/models/Human.tsx +++ b/packages/client/src/3d/models/Human.tsx @@ -107,8 +107,13 @@ const Human: React.FC = ({ 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], diff --git a/packages/client/src/3d/models/Museum.tsx b/packages/client/src/3d/models/Museum.tsx new file mode 100644 index 0000000..648d580 --- /dev/null +++ b/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() + const { scene } = useGLTF('/model/museum.glb') as GLTFResult + + return ( + + + + ) +} + +useGLTF.preload('/model/museum.glb') diff --git a/packages/client/src/3d/models/Museum_collisions.tsx b/packages/client/src/3d/models/Museum_collisions.tsx new file mode 100644 index 0000000..ae3c573 --- /dev/null +++ b/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() + const { nodes, materials } = useGLTF('/model/museum_collisions.glb') as GLTFResult + return ( + + + + + + ) +} + +useGLTF.preload('/model/museum_collisions.glb') diff --git a/packages/client/src/3d/models/Park_collisions.tsx b/packages/client/src/3d/models/Park_collisions.tsx new file mode 100644 index 0000000..760b039 --- /dev/null +++ b/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() + const { nodes, materials } = useGLTF('/model/park_collisions.glb') as GLTFResult + return ( + + + + ) +} + +useGLTF.preload('/model/park_collisions.glb') diff --git a/packages/client/src/3d/models/Park_props.tsx b/packages/client/src/3d/models/Park_props.tsx new file mode 100644 index 0000000..20977fb --- /dev/null +++ b/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() + const { nodes, materials } = useGLTF('/model/park_props.glb') as GLTFResult + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +useGLTF.preload('/model/park_props.glb') diff --git a/packages/client/src/3d/models/Street.tsx b/packages/client/src/3d/models/Street.tsx new file mode 100644 index 0000000..2b822a1 --- /dev/null +++ b/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() + const { scene } = useGLTF('/model/street.glb') as GLTFResult + return ( + + + + ) +} + +useGLTF.preload('/model/street.glb') diff --git a/packages/client/src/3d/models/Street_collisions.tsx b/packages/client/src/3d/models/Street_collisions.tsx new file mode 100644 index 0000000..c1f5ac2 --- /dev/null +++ b/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() + const { nodes, materials } = useGLTF('/model/street_collisions.glb') as GLTFResult + return ( + + + + ) +} + +useGLTF.preload('/model/street_collisions.glb') diff --git a/packages/client/src/3d/models/Terrain.tsx b/packages/client/src/3d/models/Terrain.tsx new file mode 100644 index 0000000..114887d --- /dev/null +++ b/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() + const { scene, materials } = useGLTF('/model/terrain.glb') as GLTFResult + return ( + + + + ) +} + +useGLTF.preload('/model/terrain.glb') diff --git a/packages/client/src/3d/models/Trees.js b/packages/client/src/3d/models/Trees.js new file mode 100644 index 0000000..a5009c0 --- /dev/null +++ b/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 ( + + + + ) +} + +useGLTF.preload('/model/trees.glb') diff --git a/packages/client/src/3d/models/WorldCollisions.tsx b/packages/client/src/3d/models/WorldCollisions.tsx index 96cc7b5..327247e 100644 --- a/packages/client/src/3d/models/WorldCollisions.tsx +++ b/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 { GLTF } from 'three/examples/jsm/loaders/GLTFLoader' +import ParkCollisions from './Park_collisions' +import StreetCollisions from './Street_collisions' +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) => { - const { nodes } = useGLTF('/model/plaza_collision.glb') as GLTFResult - const material = new MeshBasicMaterial({ wireframe: true, color: 0xffff00, }) return ( - - + + + + + ) }, ) -useGLTF.preload('/model/collision_mesh.glb') - export default Model diff --git a/packages/client/src/components/Museo.tsx b/packages/client/src/components/Museo.tsx index 05c1263..55c397d 100644 --- a/packages/client/src/components/Museo.tsx +++ b/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() diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index 71fc4bb..0395297 100644 --- a/packages/client/src/store.ts +++ b/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((set) => ({ @@ -37,9 +39,11 @@ const useStore = create((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 diff --git a/packages/server/src/index.js b/packages/server/src/index.js index 4984953..38ea813 100644 --- a/packages/server/src/index.js +++ b/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() { diff --git a/packages/server/src/models/user.js b/packages/server/src/models/user.js index 9a6b3a3..9bcf1e7 100644 --- a/packages/server/src/models/user.js +++ b/packages/server/src/models/user.js @@ -19,6 +19,7 @@ const userSchema = new Schema( required: true, }, photo: String, + lastLocation: Object, }, { timestamps: true }, )