From 0b2fb528b2bde085dca94c423599fe6572b1f02b Mon Sep 17 00:00:00 2001 From: Ian Mancini Date: Mon, 7 Dec 2020 13:16:27 -0300 Subject: [PATCH] Update museo model and remove garbage file --- packages/client/public/model/plaza.glb | 4 +- .../client/public/model/plaza_collision.glb | 4 +- "packages/client/src/3d/\n" | 231 ------------------ packages/client/src/3d/Lighting.tsx | 2 +- packages/client/src/3d/Player.tsx | 3 +- packages/client/src/components/Museo.tsx | 4 + packages/server/src/index.js | 12 +- 7 files changed, 17 insertions(+), 243 deletions(-) delete mode 100644 "packages/client/src/3d/\n" diff --git a/packages/client/public/model/plaza.glb b/packages/client/public/model/plaza.glb index af68db0..11df461 100644 --- a/packages/client/public/model/plaza.glb +++ b/packages/client/public/model/plaza.glb @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c53c1e68c1ccc285e026d89bffab492683f44e75d4732cb62c7d622f420ef24a -size 4137952 +oid sha256:98c7a7da54c4791d74089cb591413a94281cef0446b8932869293c438fd74310 +size 5132688 diff --git a/packages/client/public/model/plaza_collision.glb b/packages/client/public/model/plaza_collision.glb index 46c7688..f086f8e 100644 --- a/packages/client/public/model/plaza_collision.glb +++ b/packages/client/public/model/plaza_collision.glb @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2feeeffab32311190c899bbdcffff46b5e8d14f1f26d613592e322895a4970bf -size 102236 +oid sha256:104012d25bff99244754b5a186ade5a3d78f9c1b10f2e49f1c17f1d02f27ab59 +size 101792 diff --git "a/packages/client/src/3d/\n" "b/packages/client/src/3d/\n" deleted file mode 100644 index 27b0f54..0000000 --- "a/packages/client/src/3d/\n" +++ /dev/null @@ -1,231 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react' -import { useThree, useFrame } from 'react-three-fiber' -import { - Object3D, - Geometry, - Event, - Group, - PerspectiveCamera, - Vector3, - Raycaster, - Mesh, - CircleGeometry, -} from 'three' -import WorldCollisions from './models/WorldCollisions' - -import useStore from '../store' -import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial' - -const SPEED = 1 -const HEIGHT = 1.5 -const CIRCLE_RADIUS = 0.9 -const CIRCLE_SEGMENTS = 8 - -const keys: Record = { - KeyW: 'forward', - KeyS: 'backward', - KeyA: 'left', - KeyD: 'right', - ArrowUp: 'forward', - ArrowDown: 'backward', - ArrowLeft: 'left', - ArrowRight: 'right', - ShiftLeft: 'run', - Space: 'jump', -} -const moveFieldByKey = (key: string) => keys[key] - -function FirstPersonCamera(props: JSX.IntrinsicElements['perspectiveCamera']) { - const ref = useRef() - const { setDefaultCamera } = useThree() - // Make the camera known to the system - useEffect(() => { - if (ref.current) setDefaultCamera(ref.current) - }, [ref.current]) - // Update it every frame - useFrame(() => ref.current?.updateMatrixWorld()) - return -} - -const usePlayerControls = () => { - const [movement, setMovement] = useState({ - forward: false, - backward: false, - left: false, - right: false, - run: false, - jump: false, - }) - useEffect(() => { - const handleKeyDown = (e: Event) => { - setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: true })) - } - const handleKeyUp = (e: Event) => { - setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: false })) - } - document.addEventListener('keydown', handleKeyDown) - document.addEventListener('keyup', handleKeyUp) - return () => { - document.removeEventListener('keydown', handleKeyDown) - document.removeEventListener('keyup', handleKeyUp) - } - }, []) - return movement -} - -// TODO Improve physics in player -const Player = () => { - const socket = useStore((state) => state.socket) - const pointerLocked = useStore((state) => state.pointerLocked) - const { forward, backward, left, right, run } = usePlayerControls() - const { camera } = useThree() - const groupRef = useRef() - const collisionsRef = useRef>(null) - - const bottomRaycaster = useRef( - new Raycaster(new Vector3(), new Vector3(0, -1, 0), 0, HEIGHT + 0.5), - ) - - const collisionCircle = useRef() - const rotationObject = new Object3D() - rotationObject.rotation.x = Math.PI / 2 - rotationObject.updateMatrix() - const collisionCircleGeometry = new CircleGeometry(CIRCLE_RADIUS, CIRCLE_SEGMENTS) - collisionCircleGeometry.applyMatrix4(rotationObject.matrix) - const collisionCircleMaterial = new MeshBasicMaterial({ - color: 0xff0000, - wireframe: true, - }) - - const wallRaycasters = useRef( - Array(CIRCLE_SEGMENTS) - .fill(undefined) - .map(() => new Raycaster(new Vector3(), new Vector3(0, 0, -1), 0, CIRCLE_RADIUS)), - ) - - useEffect(() => { - const socketEmitTransformInterval = setInterval(() => { - if (socket && groupRef.current && camera) { - const cameraRotation = camera.rotation.toArray() - socket.emit('transform', { - position: [ - groupRef.current?.position.x, - groupRef.current?.position.y, - groupRef.current?.position.z, - ], - rotation: [cameraRotation[0], cameraRotation[1], cameraRotation[2]], - }) - } - }, 50) - - return () => { - clearInterval(socketEmitTransformInterval) - } - }, []) - - const velocity = useRef(new Vector3()) - const direction = useRef(new Vector3()) - const worldOrigin = useRef(new Vector3()) - - const moveForward = (distance: number) => { - if (groupRef.current) { - worldOrigin.current.setFromMatrixColumn(camera.matrix, 0) - worldOrigin.current.crossVectors(camera.up, worldOrigin.current) - groupRef.current.position.addScaledVector(worldOrigin.current, distance) - } - } - - const moveRight = (distance: number) => { - if (groupRef.current) { - worldOrigin.current.setFromMatrixColumn(camera.matrix, 0) - groupRef.current.position.addScaledVector(worldOrigin.current, distance) - } - } - - useFrame((_, delta) => { - if (!groupRef.current || !collisionsRef.current || !collisionCircle.current) return - - if (pointerLocked) { - // Slowdown - velocity.current.x -= velocity.current.x * 10.0 * delta - velocity.current.z -= velocity.current.z * 10.0 * delta - - // Fall - bottomRaycaster.current.ray.origin.copy(groupRef.current.position) - - let intersections = [] - intersections = bottomRaycaster.current.intersectObject( - collisionsRef.current, - false, - ) - - if (intersections.length < 1) { - velocity.current.y -= 9.8 * 10 * delta - } else { - velocity.current.y = 0 - groupRef.current.position.y = intersections[0].point.y + HEIGHT - } - - // Direction - direction.current.z = Number(forward) - Number(backward) - direction.current.x = Number(left) - Number(right) - direction.current.normalize() - - // Running - const speed = run ? 1.5 : 1 - - // Move - if (forward || backward) - velocity.current.z -= direction.current.z * SPEED * delta * speed - if (left || right) velocity.current.x -= direction.current.x * SPEED * delta * speed - - // Wall collisions - - const collisionCircleGeometry = collisionCircle.current.geometry as Geometry - - if (collisionCircleGeometry.vertices) { - for (let i = 0; i < CIRCLE_SEGMENTS; i++) { - const localVertex = collisionCircleGeometry.vertices[i + 1].clone() - console.log(i + 1, localVertex) - const globalVertex = localVertex.applyMatrix4(groupRef.current.matrix) - const directionVector = globalVertex.sub(collisionCircle.current.position) - - wallRaycasters.current[i].ray.origin.copy(collisionCircle.current.position) - wallRaycasters.current[i].ray.direction.copy(directionVector.normalize()) - - let wallIntersections = [] - wallIntersections = bottomRaycaster.current.intersectObject( - collisionsRef.current, - false, - ) - if (wallIntersections.length > 1) console.log(`${i} Hit`) - } - } - - // Apply speed - moveForward(-velocity.current.x * speed) - moveRight(-velocity.current.z * speed) - 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 ( - <> - - - - - - - ) -} - -export default Player diff --git a/packages/client/src/3d/Lighting.tsx b/packages/client/src/3d/Lighting.tsx index fb0d26a..b77b11a 100644 --- a/packages/client/src/3d/Lighting.tsx +++ b/packages/client/src/3d/Lighting.tsx @@ -8,7 +8,7 @@ const Lighting: React.FC = () => { = { KeyW: 'forward', @@ -223,7 +224,7 @@ const Player = () => { }) return ( <> - + {