parent
1c758b4243
commit
a2a7fee16c
@ -0,0 +1,30 @@
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import { PointerLockControls } from '@react-three/drei'
|
||||
|
||||
import api from '../Store'
|
||||
|
||||
const Controls: React.FC = () => {
|
||||
const ref = useRef<null | PointerLockControls>(null)
|
||||
const setPointerLockControls = api.getState().setPointerLockControls
|
||||
const setPointerLockStatus = api.getState().setPointerLockStatus
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
setPointerLockControls(ref.current)
|
||||
|
||||
const onLock = () => setPointerLockStatus(true)
|
||||
const onUnlock = () => setPointerLockStatus(false)
|
||||
|
||||
ref.current.addEventListener?.('lock', onLock)
|
||||
ref.current.addEventListener?.('unlock', onUnlock)
|
||||
return () => {
|
||||
ref.current?.removeEventListener?.('lock', onLock)
|
||||
ref.current?.removeEventListener?.('unlock', onUnlock)
|
||||
}
|
||||
}
|
||||
}, [ref, ref.current])
|
||||
|
||||
return <PointerLockControls ref={ref} />
|
||||
}
|
||||
|
||||
export default Controls
|
@ -0,0 +1,18 @@
|
||||
import create from 'zustand'
|
||||
import { PointerLockControls } from '@react-three/drei'
|
||||
|
||||
type State = {
|
||||
pointerLockControls: PointerLockControls | undefined
|
||||
pointerLocked: boolean
|
||||
setPointerLockStatus: (status: boolean) => void
|
||||
setPointerLockControls: (controls: PointerLockControls) => void
|
||||
}
|
||||
|
||||
const useStore = create<State>((set) => ({
|
||||
pointerLockControls: undefined,
|
||||
pointerLocked: false,
|
||||
setPointerLockStatus: (status) => set(() => ({ pointerLocked: status })),
|
||||
setPointerLockControls: (controls) => set(() => ({ pointerLockControls: controls })),
|
||||
}))
|
||||
|
||||
export default useStore
|
@ -0,0 +1,60 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
Button,
|
||||
Kbd,
|
||||
useToast,
|
||||
} from '@chakra-ui/react'
|
||||
|
||||
import useStore from '../Store'
|
||||
|
||||
const MenuOverlay: React.FC = () => {
|
||||
const [helpToastShown, setHelpToastShown] = useState<boolean>(false)
|
||||
const pointerLockControls = useStore((state) => state.pointerLockControls)
|
||||
const pointerLocked = useStore((state) => state.pointerLocked)
|
||||
const toast = useToast()
|
||||
|
||||
useEffect(() => {
|
||||
if (!helpToastShown && pointerLocked) {
|
||||
toast({
|
||||
description: 'Para volver al menú, pulsá ESC',
|
||||
duration: 5000,
|
||||
isClosable: false,
|
||||
})
|
||||
setHelpToastShown(true)
|
||||
}
|
||||
}, [pointerLocked, helpToastShown])
|
||||
|
||||
const lockControls = () => {
|
||||
if (pointerLockControls && !pointerLocked) {
|
||||
pointerLockControls.lock?.()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal isOpen={!pointerLocked} onClose={() => undefined}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>museo.red</ModalHeader>
|
||||
<ModalBody>
|
||||
Usa las teclas <Kbd>W</Kbd>, <Kbd>A</Kbd> <Kbd>S</Kbd> y <Kbd>D</Kbd> para
|
||||
moverte. Usá el mouse para mirar al rededor
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button colorScheme="blue" mx="auto" onClick={lockControls}>
|
||||
Continuar
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuOverlay
|
Loading…
Reference in new issue