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