ianmethyst
/
museo.red
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update plaza models and add camera controls

Browse Source
master
Ian Mancini 4 years ago
parent fdbc1b7145
commit fa7da7fcd5
9 changed files with 894 additions and 258 deletions
Show Stats Download Patch File Download Diff File

BIN
packages/client/public/model/plaza.glb (Stored with Git LFS)
View File

Binary file not shown.

BIN
packages/client/public/model/plaza_collision.glb (Stored with Git LFS)
View File

Binary file not shown.

130
packages/client/src/components/Museo.tsx
Unescape View File

@ -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 (
<mesh ref={ref}>
<boxBufferGeometry attach="geometry" />
</mesh>
)
}
import Player from './Player'
const Museo: React.FC = () => {
return (
<Box w="100vw" h="100vh">
<Canvas>
<Canvas shadowMap>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Suspense fallback={null}>
<Plaza />
<Physics>
<Physics
gravity={[0, 0, 0]}
iterations={10}
step={1 / 60}
size={10}
broadphase="SAP"
axisIndex={1}
defaultContactMaterial={{
friction: 0,
restitution: 0,
}}
>
<PlazaCollision />
<Cube />
<Player />
</Physics>
</Suspense>
<OrbitControls />
<Sky
distance={550000}
azimuth={0.25}
@ -133,6 +42,7 @@ const Museo: React.FC = () => {
turbidity={8}
rayleigh={2.9}
/>
<PointerLockControls />
</Canvas>
</Box>
)

84
packages/client/src/components/Player.tsx
Unescape View File

@ -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<string, string> = {
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 <mesh ref={ref} />
}
export default Player

737
packages/client/src/models/Plaza.js
Unescape View File

@ -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 (
<group ref={group} {...props}>
<group position={[1.74, 1.21, -17.68]} scale={[4.95, 3.08, 4.95]}>
<mesh material={materials.marble} geometry={nodes.Circle002_0.geometry} />
<mesh
material={materials.metal_glass}
geometry={nodes['Circle.002_1_1'].geometry}
/>
<mesh material={materials.dirt} geometry={nodes['Circle.002_2_2'].geometry} />
</group>
<mesh
material={materials.metal_glass}
geometry={nodes.arti_logo.geometry}
position={[1.76, 4.63, -22.92]}
rotation={[1.22, 0, 0]}
/>
<mesh
material={materials.marble}
geometry={nodes.logo_holder.geometry}
position={[1.76, 4.63, -22.98]}
rotation={[Math.PI / 2, 0, 0]}
scale={[1.45, 1.45, 1.45]}
/>
<group position={[1.67, 1.05, -2.56]}>
<mesh material={materials.sidewalk} geometry={nodes.street_1_0.geometry} />
<mesh material={materials.cordon} geometry={nodes.street_2_1.geometry} />
<mesh material={materials.asfalt} geometry={nodes.street_3_2.geometry} />
</group>
<group position={[1.73, 1.23, 8.19]}>
<mesh material={materials.grass} geometry={nodes.Plane001_0.geometry} />
<mesh material={materials.dirt} geometry={nodes['Plane.001_1_1'].geometry} />
</group>
<group position={[1.74, 1.23, 5.99]}>
<mesh material={materials.marble} geometry={nodes.cerca_mesh_0.geometry} />
<mesh material={materials.green_metal} geometry={nodes.cerca_mesh_1_1.geometry} />
</group>
<group position={[3.9, 1.96, 32.88]}>
<mesh material={materials.marble} geometry={nodes.fuente_mesh_0.geometry} />
<mesh material={materials.water} geometry={nodes.fuente_mesh_1_1.geometry} />
</group>
<group position={[1.74, 1.23, 5.99]}>
<mesh material={materials.marble} geometry={nodes.Cube001_0.geometry} />
<mesh
material={materials.green_metal}
geometry={nodes['Cube.001_1_1'].geometry}
/>
</group>
<mesh
material={materials.metal}
geometry={nodes.hamacas.geometry}
position={[-8.76, 1.14, 41.32]}
rotation={[0, 0.44, 0]}
/>
<mesh
material={materials.metal}
geometry={nodes.tobogan.geometry}
position={[-2.87, 1.56, 44.11]}
rotation={[0, 1.23, 0]}
/>
<mesh
material={materials.marble}
geometry={nodes.stairs.geometry}
position={[16.93, 1.28, 47.71]}
rotation={[0, 0.7, 0]}
/>
<group position={[3.88, 1.23, 8.19]} scale={[0.52, 0.52, 0.52]}>
<mesh material={materials.black_metal} geometry={nodes.lamp_mesh_0.geometry} />
<mesh
material={materials['Material.001']}
geometry={nodes.lamp_mesh_1_1.geometry}
/>
</group>
<group position={[-0.74, 1.23, 14.7]} scale={[0.52, 0.52, 0.52]}>
<mesh material={materials.black_metal} geometry={nodes.lamp_mesh_0.geometry} />
<mesh
material={materials['Material.001']}
geometry={nodes.lamp_mesh_1_1.geometry}
/>
</group>
<group position={[9.95, 1.23, 22.25]} scale={[0.52, 0.52, 0.52]}>
<mesh material={materials.black_metal} geometry={nodes.lamp_mesh_0.geometry} />
<mesh
material={materials['Material.001']}
geometry={nodes.lamp_mesh_1_1.geometry}
/>
</group>
<group position={[-10.51, 1.23, 26.5]} scale={[0.52, 0.52, 0.52]}>
<mesh material={materials.black_metal} geometry={nodes.lamp_mesh_0.geometry} />
<mesh
material={materials['Material.001']}
geometry={nodes.lamp_mesh_1_1.geometry}
/>
</group>
<group position={[-10.45, 1.23, 37.21]} scale={[0.52, 0.52, 0.52]}>
<mesh material={materials.black_metal} geometry={nodes.lamp_mesh_0.geometry} />
<mesh
material={materials['Material.001']}
geometry={nodes.lamp_mesh_1_1.geometry}
/>
</group>
<group
position={[5.22, 1.23, 46.12]}
rotation={[0, 0, 0]}
scale={[0.52, 0.52, 0.52]}
>
<mesh material={materials.black_metal} geometry={nodes.lamp_mesh_0.geometry} />
<mesh
material={materials['Material.001']}
geometry={nodes.lamp_mesh_1_1.geometry}
/>
</group>
<group position={[18.58, 1.23, 44.21]} scale={[0.52, 0.52, 0.52]}>
<mesh material={materials.black_metal} geometry={nodes.lamp_mesh_0.geometry} />
<mesh
material={materials['Material.001']}
geometry={nodes.lamp_mesh_1_1.geometry}
/>
</group>
<group position={[17.99, 1.23, 33.81]} scale={[0.52, 0.52, 0.52]}>
<mesh material={materials.black_metal} geometry={nodes.lamp_mesh_0.geometry} />
<mesh
material={materials['Material.001']}
geometry={nodes.lamp_mesh_1_1.geometry}
/>
</group>
<group position={[15.98, 2.06, 16.67]} scale={[0.22, 0.22, 0.22]}>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[22.05, 2.06, 24.28]}
rotation={[0, -0.96, 0]}
scale={[0.26, 0.26, 0.26]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[23.87, 2.06, 46.97]}
rotation={[-Math.PI, 0.5, -Math.PI]}
scale={[0.31, 0.31, 0.31]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[12.23, 2.06, 54.7]}
rotation={[0, 0.46, 0]}
scale={[0.3, 0.3, 0.3]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[-5.28, 2.06, 52.57]}
rotation={[Math.PI, -1.11, Math.PI]}
scale={[0.38, 0.38, 0.38]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[-18.09, 2.06, 35.88]}
rotation={[-Math.PI, 1.09, -Math.PI]}
scale={[0.32, 0.32, 0.32]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[-14.78, 2.06, 13.7]}
rotation={[Math.PI, -0.47, Math.PI]}
scale={[0.33, 0.33, 0.33]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[37.86, 2.06, 14.53]}
rotation={[0, -0.96, 0]}
scale={[0.36, 0.36, 0.36]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[42.77, 2.06, 43.25]}
rotation={[0, 1.08, 0]}
scale={[0.36, 0.36, 0.36]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[34.67, 2.06, 67.05]}
rotation={[0, -0.79, 0]}
scale={[0.36, 0.36, 0.36]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[-21.15, 2.06, 64.7]}
rotation={[-3.14, 1.19, -3.14]}
scale={[0.36, 0.36, 0.36]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[-38.93, 2.06, 22.77]}
rotation={[0, 0.58, 0]}
scale={[0.48, 0.48, 0.48]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[-37.82, 2.06, 53.64]}
rotation={[-Math.PI, 0.92, -Math.PI]}
scale={[0.29, 0.29, 0.29]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[-12.86, 2.05, 48.27]}
rotation={[0, 1.02, 0]}
scale={[0.48, 0.48, 0.48]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[-43.48, 2.05, 73.17]}
rotation={[-3.14, -1.23, 3.14]}
scale={[0.41, 0.41, 0.41]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group
position={[0.75, 2.06, 71.09]}
rotation={[-Math.PI, 0.28, -Math.PI]}
scale={[0.38, 0.38, 0.38]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type2_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type2_1_1.geometry} />
</group>
<group position={[-19.97, 2.06, 22.05]} scale={[0.25, 0.25, 0.25]}>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[-31.53, 2.06, 32.77]}
rotation={[-Math.PI, 1.19, -Math.PI]}
scale={[0.26, 0.26, 0.26]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[-19.93, 2.06, 46.88]}
rotation={[3.14, -0.15, -3.14]}
scale={[0.25, 0.25, 0.25]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[0.65, 2.06, 53.59]}
rotation={[0, -0.99, 0]}
scale={[0.25, 0.25, 0.25]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[22.52, 2.06, 57.64]}
rotation={[-Math.PI, -0.58, -Math.PI]}
scale={[0.25, 0.25, 0.25]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[34.72, 2.06, 46.72]}
rotation={[0, -0.75, 0]}
scale={[0.31, 0.31, 0.31]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[28.33, 2.06, 35.81]}
rotation={[0, -1.56, 0]}
scale={[0.2, 0.2, 0.2]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[9.86, 2.06, 66.88]}
rotation={[0, -0.52, 0]}
scale={[0.3, 0.3, 0.3]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[-7.56, 2.06, 61.91]}
rotation={[-Math.PI, 1.25, -Math.PI]}
scale={[0.3, 0.3, 0.3]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[-29.94, 2.06, 46.43]}
rotation={[0, -1.54, 0]}
scale={[0.43, 0.43, 0.43]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[27.42, 2.06, 16.19]}
rotation={[0, 1.4, 0]}
scale={[0.22, 0.22, 0.22]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[-6.12, 2.06, 18.7]}
rotation={[0, 1.4, 0]}
scale={[0.21, 0.21, 0.21]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[-18.34, 2.05, 55.81]}
rotation={[3.14, -1.45, 3.14]}
scale={[0.31, 0.31, 0.31]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[34.61, 2.06, 30.68]}
rotation={[0, 0.08, 0]}
scale={[0.31, 0.31, 0.31]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group
position={[6.72, 2.06, 53.77]}
rotation={[-Math.PI, -0.47, -Math.PI]}
scale={[0.23, 0.23, 0.23]}
>
<mesh material={materials.wood} geometry={nodes.Cube008_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.008_1_1'].geometry} />
</group>
<group position={[-25.85, 2.06, 14.73]} scale={[0.22, 0.22, 0.22]}>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[-18.58, 2.06, 28.07]}
rotation={[0, -0.78, 0]}
scale={[0.15, 0.15, 0.15]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[-22.21, 3.87, 40.68]}
rotation={[0, -0.55, 0]}
scale={[0.15, 0.15, 0.15]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[-27.51, 2.06, 25.62]}
rotation={[0, -1.04, 0]}
scale={[0.15, 0.15, 0.15]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[-29.46, 2.06, 55.87]}
rotation={[Math.PI, -0.86, Math.PI]}
scale={[0.18, 0.18, 0.18]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[-13.65, 2.06, 59.88]}
rotation={[Math.PI, -0.86, Math.PI]}
scale={[0.15, 0.15, 0.15]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[3.17, 2.06, 62.84]}
rotation={[-Math.PI, 1.49, -Math.PI]}
scale={[0.2, 0.2, 0.2]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[20.96, 2.06, 64.77]}
rotation={[0, 0.29, 0]}
scale={[0.18, 0.18, 0.18]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[31.21, 2.06, 51.28]}
rotation={[-Math.PI, 0.11, -Math.PI]}
scale={[0.21, 0.21, 0.21]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[34.76, 2.06, 39.77]}
rotation={[0, 1.29, 0]}
scale={[0.14, 0.14, 0.14]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[22.9, 2.06, 38.98]}
rotation={[-Math.PI, 0.85, -Math.PI]}
scale={[0.2, 0.2, 0.2]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[22.69, 2.06, 30.17]}
rotation={[0, 1.27, 0]}
scale={[0.15, 0.15, 0.15]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[29.66, 2.06, 24.54]}
rotation={[0, 1.27, 0]}
scale={[0.21, 0.21, 0.21]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[43.4, 2.06, 23.06]}
rotation={[0, 1.27, 0]}
scale={[0.15, 0.15, 0.15]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[42.16, 2.06, 58.52]}
rotation={[0, 0.08, 0]}
scale={[0.23, 0.23, 0.23]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[21.39, 2.06, 72.23]}
rotation={[-Math.PI, 1.07, -Math.PI]}
scale={[0.32, 0.32, 0.32]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[-6.51, 2.06, 72.22]}
rotation={[0, -0.13, 0]}
scale={[0.32, 0.32, 0.32]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[-37.11, 2.06, 33.55]}
rotation={[0, -1.28, 0]}
scale={[0.32, 0.32, 0.32]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[-27.67, 2.05, 59.96]}
rotation={[0, 0.71, 0]}
scale={[0.18, 0.18, 0.18]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<group
position={[13.71, 1.23, 48.82]}
rotation={[-Math.PI, 0.85, -Math.PI]}
scale={[0.15, 0.15, 0.15]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type4_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type4_1_1.geometry} />
</group>
<mesh
material={materials.leaves}
geometry={nodes.tree054.geometry}
position={[-15.45, 2.07, 25.91]}
rotation={[0, 1.23, 0]}
scale={[0.17, 0.17, 0.17]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree055.geometry}
position={[-19.55, 2.07, 42.35]}
rotation={[0, -0.97, 0]}
scale={[0.23, 0.23, 0.23]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree056.geometry}
position={[-2.37, 2.08, 62.43]}
rotation={[-Math.PI, 0.47, -Math.PI]}
scale={[0.29, 0.29, 0.29]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree057.geometry}
position={[26.08, 2.08, 56.59]}
rotation={[-Math.PI, -0.77, -Math.PI]}
scale={[0.35, 0.35, 0.35]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree058.geometry}
position={[18.37, 2.07, 23.06]}
rotation={[-Math.PI, 0.42, -Math.PI]}
scale={[0.18, 0.18, 0.18]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree059.geometry}
position={[-4.64, 2.07, 9.26]}
rotation={[-Math.PI, 0.21, -Math.PI]}
scale={[0.24, 0.24, 0.24]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree060.geometry}
position={[-26.37, 2.07, 50.36]}
rotation={[0, -1.2, 0]}
scale={[0.24, 0.24, 0.24]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree067.geometry}
position={[31.21, 2.07, 28.95]}
rotation={[0, -1.32, 0]}
scale={[0.22, 0.22, 0.22]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree068.geometry}
position={[32.27, 2.07, 44.07]}
rotation={[0, -0.55, 0]}
scale={[0.26, 0.26, 0.26]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree069.geometry}
position={[9.03, 2.08, 75.58]}
rotation={[-Math.PI, 0.13, -Math.PI]}
scale={[0.35, 0.35, 0.35]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree070.geometry}
position={[-35.22, 2.08, 68.19]}
rotation={[-0.02, 1.54, 0.02]}
scale={[0.46, 0.46, 0.46]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree003.geometry}
position={[-23.02, 2.08, 11.39]}
rotation={[-Math.PI, 1.04, -Math.PI]}
scale={[0.3, 0.3, 0.3]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree062.geometry}
position={[-34.79, 2.28, 16.97]}
scale={[0.22, 0.22, 0.22]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree063.geometry}
position={[-9.68, 2.27, 51.99]}
rotation={[3.14, -0.66, 3.14]}
scale={[0.22, 0.22, 0.22]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree064.geometry}
position={[25.47, 2.28, 37.14]}
rotation={[Math.PI, -0.66, Math.PI]}
scale={[0.18, 0.18, 0.18]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree065.geometry}
position={[3.83, 2.24, 54.96]}
rotation={[-Math.PI, 0.21, -Math.PI]}
scale={[0.18, 0.18, 0.18]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree066.geometry}
position={[12.42, 2.24, 63.79]}
rotation={[-Math.PI, 1.06, -Math.PI]}
scale={[0.18, 0.18, 0.18]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree074.geometry}
position={[-24.35, 2.06, 33.83]}
scale={[0.22, 0.22, 0.22]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree075.geometry}
position={[-39.05, 2.06, 41.36]}
scale={[0.22, 0.22, 0.22]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree076.geometry}
position={[18.59, 2.06, 61.16]}
rotation={[-Math.PI, 0.34, -Math.PI]}
scale={[0.3, 0.3, 0.3]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree077.geometry}
position={[-15.49, 2.06, 69.98]}
rotation={[-Math.PI, 1.12, -Math.PI]}
scale={[0.44, 0.44, 0.44]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree078.geometry}
position={[22.29, 2.06, 10.03]}
rotation={[-Math.PI, 1.12, -Math.PI]}
scale={[0.32, 0.32, 0.32]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree079.geometry}
position={[44.19, 2.06, 32.3]}
rotation={[-Math.PI, 1.12, -Math.PI]}
scale={[0.27, 0.27, 0.27]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree080.geometry}
position={[14.82, 2.06, 12.69]}
rotation={[-Math.PI, 1.12, -Math.PI]}
scale={[0.2, 0.2, 0.2]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree081.geometry}
position={[32.32, 2.06, 60.58]}
rotation={[-Math.PI, 1.12, -Math.PI]}
scale={[0.27, 0.27, 0.27]}
/>
<mesh
material={materials.leaves}
geometry={nodes.tree082.geometry}
position={[36.49, 2.06, 34.34]}
rotation={[-Math.PI, 1.12, -Math.PI]}
scale={[0.27, 0.27, 0.27]}
/>
<group
position={[-15.46, 2.06, 8.63]}
rotation={[-Math.PI, -0.01, -Math.PI]}
scale={[0.29, 0.29, 0.29]}
>
<mesh material={materials.wood} geometry={nodes.tree_mesh_type1_0.geometry} />
<mesh material={materials.leaves} geometry={nodes.tree_mesh_type1_1_1.geometry} />
</group>
<mesh
material={materials.wood}
geometry={nodes.trunk_mesh.geometry}
position={[16.02, 1.19, 46.32]}
rotation={[1.76, -0.48, 0.4]}
scale={[0.3, 0.3, 0.3]}
/>
<group
position={[45.09, 2.06, 72.04]}
rotation={[0, -0.33, 0]}
scale={[0.36, 0.36, 0.36]}
>
<mesh material={materials.wood} geometry={nodes.Cube018_0.geometry} />
<mesh material={materials.leaves} geometry={nodes['Cube.018_1_1'].geometry} />
</group>
</group>
)
}
useGLTF.preload('/plaza.glb')

95
packages/client/src/models/Plaza.tsx
Unescape View File

@ -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<THREE.Group>()
const { nodes, materials } = useGLTF('/model/plaza.glb') as GLTFResult
return (
<group ref={group} {...props}>
<group position={[-2.5, 0, -35.03]} scale={[4.85, 4.85, 4.85]}>
<mesh material={materials.grass} geometry={nodes.Plane001_0.geometry} />
<mesh material={materials.dirt} geometry={nodes['Plane.001_1_1'].geometry} />
</group>
<group position={[3.08, 1.63, 20.73]} scale={[7.68, 7.68, 7.68]}>
<mesh material={materials.marble} geometry={nodes.Circle001_0.geometry} />
<mesh material={materials.water} geometry={nodes['Circle.001_1_1'].geometry} />
</group>
<mesh
material={materials.marble}
geometry={nodes.staris.geometry}
position={[36.56, 0.12, 66.47]}
rotation={[0, 0.7, 0]}
/>
<mesh
material={materials.metal}
geometry={nodes.hamacas.geometry}
position={[-29.43, -0.24, 50.05]}
rotation={[0, 0.44, 0]}
scale={[0.15, 0.15, 0.15]}
/>
<mesh
material={materials.metal}
geometry={nodes.tobogan.geometry}
position={[-14.31, 0.83, 57.21]}
rotation={[0, 1.23, 0]}
scale={[1.11, 1.11, 1.11]}
/>
<group position={[-2.47, 0, -40.7]} scale={[1.71, 1.71, 1.71]}>
<mesh material={materials.marble} geometry={nodes.Cube001_0.geometry} />
<mesh
material={materials.green_metal}
geometry={nodes['Cube.001_1_1'].geometry}
/>
</group>
<group position={[-2.47, 0, -40.7]}>
<mesh material={materials.marble} geometry={nodes.Cube002_0.geometry} />
<mesh
material={materials.green_metal}
geometry={nodes['Cube.002_1_1'].geometry}
/>
</group>
<group position={[-2.57, -0.8, -74.66]} scale={[66.57, 8.47, 8.47]}>
<mesh material={materials.sidewalk} geometry={nodes.Plane004_0.geometry} />
<mesh material={materials.asfalt} geometry={nodes['Plane.004_1_1'].geometry} />
<mesh material={materials.cordon} geometry={nodes['Plane.004_2_2'].geometry} />
</group>
</group>
)
}
useGLTF.preload('/plaza.glb')

41
packages/client/src/models/PlazaCollision.tsx
Unescape View File

@ -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<THREE.Group>()
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 (
<group ref={group} {...props}>
<mesh ref={ref} geometry={nodes.collision_mesh.geometry}>
<meshStandardMaterial color="orange" wireframe />
</mesh>
</group>
)
}
useGLTF.preload('/plaza_collision.glb')

47
packages/client/src/models/Plaza_collision.tsx
Unescape View File

@ -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<THREE.Group>()
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 (
<group ref={group} {...props}>
<mesh ref={ref} material={material} geometry={nodes.collision_mesh_park.geometry} />
</group>
)
}
useGLTF.preload('/model/plaza_collision.glb')

10
packages/client/tsconfig.json
Unescape View File

@ -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"]
}

Write Preview
Loading…
Cancel
Save