Hermes
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { Canvas } from '@react-three/fiber'
|
|
import { XR, createXRStore } from '@react-three/xr'
|
|
import { Box, Plane, Text } from '@react-three/drei'
|
|
|
|
// Cria a store de estado para o WebXR
|
|
const store = createXRStore()
|
|
|
|
export default function App() {
|
|
return (
|
|
<>
|
|
{/* Botão de sobreposição para entrar em VR */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
pointerEvents: 'none', // Deixa o clique passar para o Canvas 3D
|
|
zIndex: 10,
|
|
}}
|
|
>
|
|
<button
|
|
onClick={() => store.enterVR()}
|
|
style={{
|
|
pointerEvents: 'auto',
|
|
padding: '16px 32px',
|
|
fontSize: '1.2rem',
|
|
backgroundColor: '#0ea5e9',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '12px',
|
|
cursor: 'pointer',
|
|
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
|
|
fontWeight: 'bold',
|
|
}}
|
|
>
|
|
Entrar em Realidade Virtual (Quest 3)
|
|
</button>
|
|
</div>
|
|
|
|
{/* Canvas 3D que ocupa a tela toda */}
|
|
<Canvas style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#1e293b' }}>
|
|
<XR store={store}>
|
|
<ambientLight intensity={0.6} />
|
|
<directionalLight position={[10, 10, 10]} intensity={1.5} castShadow />
|
|
|
|
{/* Chão */}
|
|
<Plane args={[20, 20]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
|
|
<meshStandardMaterial color="#475569" />
|
|
</Plane>
|
|
|
|
{/* Mesa (Representação) */}
|
|
<Box position={[0, 0.5, -1]} args={[2, 1, 1]} castShadow receiveShadow>
|
|
<meshStandardMaterial color="#8B4513" />
|
|
</Box>
|
|
|
|
{/* Cubo interativo em cima da mesa */}
|
|
<Box position={[0, 1.15, -1]} args={[0.3, 0.3, 0.3]} castShadow receiveShadow>
|
|
<meshStandardMaterial color="#f59e0b" />
|
|
</Box>
|
|
|
|
{/* Instruções Flutuantes no Mundo 3D */}
|
|
<Text position={[0, 2, -2]} fontSize={0.2} color="white" anchorX="center" anchorY="middle">
|
|
Laboratório de Alinhamento XR
|
|
</Text>
|
|
|
|
</XR>
|
|
</Canvas>
|
|
</>
|
|
)
|
|
}
|