parent
8714685ed6
commit
fdbc1b7145
Binary file not shown.
@ -0,0 +1,141 @@
|
|||||||
|
import React, { useRef, useState, Suspense, useEffect } 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 Plaza from '../models/Plaza'
|
||||||
|
import PlazaCollision from '../models/PlazaCollision'
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Museo: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<Box w="100vw" h="100vh">
|
||||||
|
<Canvas>
|
||||||
|
<ambientLight />
|
||||||
|
<pointLight position={[10, 10, 10]} />
|
||||||
|
<Suspense fallback={null}>
|
||||||
|
<Plaza />
|
||||||
|
<Physics>
|
||||||
|
<PlazaCollision />
|
||||||
|
<Cube />
|
||||||
|
</Physics>
|
||||||
|
</Suspense>
|
||||||
|
<OrbitControls />
|
||||||
|
<Sky
|
||||||
|
distance={550000}
|
||||||
|
azimuth={0.25}
|
||||||
|
mieDirectionalG={0.83}
|
||||||
|
mieCoefficient={0.008}
|
||||||
|
inclination={0.5}
|
||||||
|
turbidity={8}
|
||||||
|
rayleigh={2.9}
|
||||||
|
/>
|
||||||
|
</Canvas>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Museo
|
@ -0,0 +1,95 @@
|
|||||||
|
/*
|
||||||
|
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')
|
@ -0,0 +1,41 @@
|
|||||||
|
/*
|
||||||
|
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')
|
Loading…
Reference in new issue