diff --git a/packages/client/public/model/plaza.glb b/packages/client/public/model/plaza.glb
index b7dc8cb..5d6d59b 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:31000701e7067f7364b971b3485626df44bd4b563b7e6391d091806b5a697ba2
-size 613400
+oid sha256:5331920875cb4cc0ca50db48372c1d60d8c6b0802c679ca0ce05ff38cab9ca01
+size 1838292
diff --git a/packages/client/public/model/plaza_collision.glb b/packages/client/public/model/plaza_collision.glb
index 591e32f..8052e4b 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:6960fa465de78a2c11378864a94b1b9f1c93c860b06468ce723e78f481e6fd48
-size 1112
+oid sha256:b6ccd4532e8d1d43c5db2568c3065345b3988edfe923e84b9b837e101df4e837
+size 14896
diff --git a/packages/client/src/components/Museo.tsx b/packages/client/src/components/Museo.tsx
index 1cc18a3..20f1558 100644
--- a/packages/client/src/components/Museo.tsx
+++ b/packages/client/src/components/Museo.tsx
@@ -1,129 +1,38 @@
-import React, { useRef, useState, Suspense, useEffect } from 'react'
+import React, { Suspense } from 'react'
import { Box } from '@chakra-ui/core'
import { OrbitControls, Sky } from '@react-three/drei'
-import { Canvas, useFrame } from 'react-three-fiber'
-import { useSphere } from '@react-three/cannon'
+import { Canvas } from 'react-three-fiber'
+import { PointerLockControls } from '@react-three/drei'
import Plaza from '../models/Plaza'
-import PlazaCollision from '../models/PlazaCollision'
+import PlazaCollision from '../models/Plaza_collision'
import { Physics } from '@react-three/cannon'
-import { Event } from 'three'
-
-function Cube() {
- const [ref, api] = useSphere(() => ({
- fixedRotation: true,
- mass: 1,
- position: [0, 20, 0],
- }))
- const velocity = useRef([0, 0, 0])
-
- const [moveForward, setMoveForward] = useState(false)
- const [moveBackwards, setMoveBackwards] = useState(false)
- const [moveLeft, setMoveLeft] = useState(false)
- const [moveRight, setMoveRight] = useState(false)
-
- useEffect(() => {
- api.velocity.subscribe((v) => (velocity.current = v))
-
- const onKeyDown = (event: Event) => {
- switch (event.keyCode) {
- case 38: // up
- case 87: // w
- setMoveForward(true)
- break
-
- case 37: // left
- case 65: // a
- setMoveLeft(true)
- break
-
- case 40: // down
- case 83: // s
- setMoveBackwards(true)
- break
-
- case 39: // right
- case 68: // d
- setMoveRight(true)
- break
- }
- }
-
- const onKeyUp = (event: Event) => {
- switch (event.keyCode) {
- case 38: // up
- case 87: // w
- setMoveForward(false)
- break
-
- case 37: // left
- case 65: // a
- setMoveLeft(false)
- break
-
- case 40: // down
- case 83: // s
- setMoveBackwards(false)
- break
-
- case 39: // right
- case 68: // d
- setMoveRight(false)
- break
- }
- }
-
- document.addEventListener('keydown', onKeyDown, false)
- document.addEventListener('keyup', onKeyUp, false)
- }, [])
-
- useFrame(() => {
- if (api && ref.current) {
- let x, z
- x = z = 0
-
- if (moveForward) {
- z += -5
- }
- if (moveBackwards) {
- z += 5
- }
- if (moveLeft) {
- x += -5
- }
- if (moveRight) {
- x += 5
- }
-
- console.log(x, z)
-
- if (x != 0 || z != 0) {
- api.velocity.set(x, velocity.current[1], z)
- }
- }
- })
-
- return (
-
-
-
- )
-}
+import Player from './Player'
const Museo: React.FC = () => {
return (
-
)
diff --git a/packages/client/src/components/Player.tsx b/packages/client/src/components/Player.tsx
new file mode 100644
index 0000000..8475e6c
--- /dev/null
+++ b/packages/client/src/components/Player.tsx
@@ -0,0 +1,84 @@
+import * as THREE from 'three'
+import React, { useEffect, useRef, useState } from 'react'
+import { SphereProps, useSphere } from '@react-three/cannon'
+import { useThree, useFrame } from 'react-three-fiber'
+import { Event } from 'three'
+
+const SPEED = 5
+const keys: Record = {
+ KeyW: 'forward',
+ KeyS: 'backward',
+ KeyA: 'left',
+ KeyD: 'right',
+ ShiftLeft: 'running',
+ Space: 'jump',
+}
+const moveFieldByKey = (key: string) => keys[key]
+const direction = new THREE.Vector3()
+const frontVector = new THREE.Vector3()
+const sideVector = new THREE.Vector3()
+
+const usePlayerControls = () => {
+ const [movement, setMovement] = useState({
+ forward: false,
+ backward: false,
+ left: false,
+ right: false,
+ running: false,
+ jump: false,
+ })
+ useEffect(() => {
+ const handleKeyDown = (e: Event) => {
+ console.log(e.code)
+ 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
+}
+
+const Player = (props: SphereProps) => {
+ const [ref, api] = useSphere(() => ({
+ type: 'Dynamic',
+ fixedRotation: true,
+ position: [0, 4, 0],
+ mass: 9,
+ linearDamping: 0,
+ angularDamping: 0,
+ material: { friction: 0, restitution: 0 },
+ ...props,
+ }))
+ const { forward, backward, left, right, running, jump } = usePlayerControls()
+ const { camera } = useThree()
+ const velocity = useRef([0, 0, 0])
+ useEffect(() => void api.velocity.subscribe((v) => (velocity.current = v)), [])
+ useFrame(() => {
+ if (!ref.current) return
+ camera.position.copy(ref.current.position)
+ frontVector.set(0, 0, Number(backward) - Number(forward))
+ sideVector.set(Number(left) - Number(right), 0, 0)
+ direction
+ .subVectors(frontVector, sideVector)
+ .normalize()
+ .multiplyScalar(running ? SPEED * 2 : SPEED)
+ .applyEuler(camera.rotation)
+
+ if (forward || backward || left || right) {
+ api.velocity.set(direction.x, -2, direction.z)
+ } else {
+ api.velocity.set(0, 0, 0)
+ }
+ //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/models/Plaza.js b/packages/client/src/models/Plaza.js
new file mode 100644
index 0000000..3b6ec0d
--- /dev/null
+++ b/packages/client/src/models/Plaza.js
@@ -0,0 +1,737 @@
+/*
+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 { nodes, materials } = useGLTF('/model/plaza.glb')
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+useGLTF.preload('/plaza.glb')
diff --git a/packages/client/src/models/Plaza.tsx b/packages/client/src/models/Plaza.tsx
deleted file mode 100644
index b07a3ef..0000000
--- a/packages/client/src/models/Plaza.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
-auto-generated by: https://github.com/pmndrs/gltfjsx
-*/
-import React, { useRef } from 'react'
-import { useGLTF } from '@react-three/drei/useGLTF'
-
-import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
-
-type GLTFResult = GLTF & {
- nodes: {
- Plane001_0: THREE.Mesh
- ['Plane.001_1_1']: THREE.Mesh
- Circle001_0: THREE.Mesh
- ['Circle.001_1_1']: THREE.Mesh
- staris: THREE.Mesh
- hamacas: THREE.Mesh
- tobogan: THREE.Mesh
- Cube001_0: THREE.Mesh
- ['Cube.001_1_1']: THREE.Mesh
- Cube002_0: THREE.Mesh
- ['Cube.002_1_1']: THREE.Mesh
- Plane004_0: THREE.Mesh
- ['Plane.004_1_1']: THREE.Mesh
- ['Plane.004_2_2']: THREE.Mesh
- }
- materials: {
- grass: THREE.MeshStandardMaterial
- dirt: THREE.MeshStandardMaterial
- marble: THREE.MeshStandardMaterial
- water: THREE.MeshStandardMaterial
- metal: THREE.MeshStandardMaterial
- green_metal: THREE.MeshStandardMaterial
- sidewalk: THREE.MeshStandardMaterial
- asfalt: THREE.MeshStandardMaterial
- cordon: THREE.MeshStandardMaterial
- }
-}
-
-export default function Model(props: JSX.IntrinsicElements['group']) {
- const group = useRef()
- const { nodes, materials } = useGLTF('/model/plaza.glb') as GLTFResult
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-useGLTF.preload('/plaza.glb')
diff --git a/packages/client/src/models/PlazaCollision.tsx b/packages/client/src/models/PlazaCollision.tsx
deleted file mode 100644
index 951bc4e..0000000
--- a/packages/client/src/models/PlazaCollision.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-auto-generated by: https://github.com/pmndrs/gltfjsx
-*/
-import React, { MutableRefObject, useRef } from 'react'
-import { useGLTF } from '@react-three/drei/useGLTF'
-import { Physics, useConvexPolyhedron } from '@react-three/cannon'
-
-import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
-import * as THREE from 'three'
-
-type GLTFResult = GLTF & {
- nodes: {
- collision_mesh: THREE.Mesh
- }
- materials: {}
-}
-
-export default function Model(props: JSX.IntrinsicElements['group']) {
- const group = useRef()
- const { nodes, materials } = useGLTF('/model/plaza_collision.glb') as GLTFResult
-
- if (nodes.collision_mesh.geometry === undefined) return null
-
- const [ref] = useConvexPolyhedron(() => ({
- args: new THREE.Geometry().fromBufferGeometry(
- nodes.collision_mesh.geometry as THREE.BufferGeometry,
- ),
- type: 'Static',
- position: [-2.5, 0, -35.03],
- }))
-
- return (
-
-
-
-
-
- )
-}
-
-useGLTF.preload('/plaza_collision.glb')
diff --git a/packages/client/src/models/Plaza_collision.tsx b/packages/client/src/models/Plaza_collision.tsx
new file mode 100644
index 0000000..99e2e2b
--- /dev/null
+++ b/packages/client/src/models/Plaza_collision.tsx
@@ -0,0 +1,47 @@
+/*
+auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei/useGLTF'
+import * as THREE from 'three'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+import { useTrimesh } from '@react-three/cannon'
+
+type GLTFResult = GLTF & {
+ nodes: {
+ collision_mesh_park: THREE.Mesh
+ }
+ materials: {
+ collision: THREE.MeshStandardMaterial
+ }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+ const group = useRef()
+ const { nodes } = useGLTF('/model/plaza_collision.glb') as GLTFResult
+
+ const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xffff00 })
+
+ const geometry = nodes.collision_mesh_park.geometry as THREE.BufferGeometry
+
+ if (geometry.index === null) return null
+
+ const vertices = geometry.attributes.position.array
+ const indices = geometry.index.array
+
+ // @ts-ignore
+ const [ref] = useTrimesh(() => ({
+ type: 'Static',
+ position: [1.75, 1.5, 8.2],
+ args: [vertices, indices],
+ }))
+
+ return (
+
+
+
+ )
+}
+
+useGLTF.preload('/model/plaza_collision.glb')
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
index 7b1d3c6..1d693b2 100644
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -20,7 +16,5 @@
"noEmit": true,
"jsx": "react"
},
- "include": [
- "src"
- ]
+ "include": ["src"]
}