comiit1
This commit is contained in:
Hermes
+62
-109
@@ -1,122 +1,75 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
import { Canvas } from '@react-three/fiber'
|
||||
import { XR, createXRStore } from '@react-three/xr'
|
||||
import { Box, Plane, Text } from '@react-three/drei'
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
// Cria a store de estado para o WebXR
|
||||
const store = createXRStore()
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div className="hero">
|
||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||
<img src={reactLogo} className="framework" alt="React logo" />
|
||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
{/* 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
|
||||
type="button"
|
||||
className="counter"
|
||||
onClick={() => setCount((count) => count + 1)}
|
||||
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',
|
||||
}}
|
||||
>
|
||||
Count is {count}
|
||||
Entrar em Realidade Virtual (Quest 3)
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="ticks"></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>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{/* Mesa (Representação) */}
|
||||
<Box position={[0, 0.5, -1]} args={[2, 1, 1]} castShadow receiveShadow>
|
||||
<meshStandardMaterial color="#8B4513" />
|
||||
</Box>
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
{/* 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
Reference in New Issue
Block a user