← ARFX 🧊 Build AR
🧊

Build AR

Construtor de blocos 3D com as maos — pinca, arraste e construa com profundidade real

Construir →

Sobre

Construtor de blocos 3D em realidade aumentada controlado pelas maos com MediaPipe Hands e renderizado com Three.js. Faca o gesto de pinca (polegar + indicador) para comecar a construir — enquanto mantiver a pinca, arraste a mao e blocos vao sendo criados no caminho, conectados uns aos outros. Solte a pinca para parar. Os blocos tem auto-stack: quando a posicao ja esta ocupada, o novo bloco e colocado em cima automaticamente, permitindo construir torres e estruturas verticais. Sua mao aparece como esqueleto neon — cyan quando solta, magenta quando em pinca. O sistema usa o giroscopio do celular para controlar a perspectiva da camera 3D: incline o aparelho para ver sua construcao de diferentes angulos, revelando a profundidade real dos blocos. 8 cores neon disponiveis, undo ilimitado e funcao limpar. Blocos com material Phong brilhante, emissao neon pulsante e wireframe nas bordas. Grid de chao com linhas neon e iluminacao 3D completa (ambiente + direcional + point light). Camera AR de fundo com overlay escuro. Fallback: dois dedos na tela para orbitar, scroll para zoom, botao direito do mouse para girar.

Como Usar

1. Abra a experiencia — permita camera e aguarde o MediaPipe Hands carregar.

2. Faca pinca — junte polegar e indicador. O esqueleto da mao muda de cyan para magenta e um cursor aparece.

3. Arraste construindo — mantenha a pinca e mova a mao. Blocos neon vao surgindo no caminho, conectados.

4. Empilhe — passe por uma posicao ja ocupada e o bloco sobe automaticamente, criando altura.

5. Mova o celular — incline pra ver sua construcao de diferentes angulos. O giroscopio controla a camera 3D.

6. Troque cores — toque no botao COR e escolha entre 8 cores neon.

7. Desfaca / Limpe — DESFAZER remove o ultimo bloco, LIMPAR apaga tudo.

Fallback: Dois dedos na tela para girar a camera, scroll para zoom.

AR 3D Builder Three.js MediaPipe Hands Pinch Gesture Giroscopio WebGL Neon Blocks Auto-Stack Camera AR
Crie um construtor de blocos 3D em AR controlado pelas maos com estilo neon. Use Three.js para renderizacao 3D (WebGL) com camera transparente sobre video da camera do celular. Use MediaPipe Hands (21 landmarks, maxNumHands:1) para detectar gesto de pinca (distancia polegar tip 4 + indicador tip 8 menor que 0.07). Quando em pinca, a posicao do midpoint polegar-indicador (espelhada) mapeia para grid 20x20. Enquanto mantiver pinca, arraste a mao para criar blocos conectados no caminho com cooldown de 4 frames. Auto-stack: se posicao ja tem bloco, novo bloco vai em cima (gy++). Soltar pinca para de construir. Grid 20x20x20 com blocos de 0.5 unidades. Cada bloco: BoxGeometry 0.92*size, MeshPhongMaterial com emissive neon pulsante (sin*0.15), EdgesGeometry wireframe com LineBasicMaterial transparente. 8 cores neon selecionaveis: cyan, magenta, verde, laranja, vermelho, amarelo, azul, branco. Giroscopio do celular (DeviceOrientationEvent) controla orbita da camera 3D — beta mapeia angulo vertical, gamma mapeia angulo horizontal. Smooth com lerp 0.08. Fallback: dois toques para orbitar, scroll para zoom, botao direito do mouse. Iluminacao: AmbientLight + DirectionalLight + PointLight cyan. GridHelper no chao com cores neon. Camera de fundo com overlay escuro 75%. Esqueleto neon da mao: cyan quando solta, magenta quando em pinca. Cursor crosshair pulsante na posicao de pinca. HUD com botoes DESFAZER (undo stack), COR (picker), LIMPAR. Sons retro para place/undo/clear. Tudo em um unico arquivo HTML.