Dados utilizados
- Quadros da câmera do usuário, processados no navegador.
Case de projeto
3D Hands
Manipulação de um objeto 3D em WebGL com gestos da mão lidos pela câmera, no navegador.
Problema
Manipular um objeto 3D costuma exigir mouse, toque ou controle físico.
Gestos precisam de regras claras para não disparar ações por engano.
Solução
Arquitetura resumida
- Quadros da câmera do usuário, processados no navegador.
Decisões técnicas
- MediaPipe Hands rastreia até duas mãos e desenha os pontos em um overlay Canvas 2D.
- Regras classificam 7 gestos; os de segurar só disparam depois de 800 ms.
- Cada gesto move, aproxima, gira, reinicia ou troca forma e cor de um objeto em Three.js.
Resultado
- Tempo de quadro p50 da cena
- 16,7 ms
- Demo publicada, câmera sintética sem detecção / rAF por 10 s, Chromium 153 headless, Intel UHD, DPR 1 / 13 out. 2026
- Testes da versão Python
- 34
- Repositório público / pytest em tests/ / commit f481529
O projeto liga visão computacional e WebGL no navegador, com alternativa por teclado.
- WebGL com Three.js
- Visão computacional no navegador
- Interação sem contato
- Alternativa por teclado
Aprendizados e limitações
- Na produção de 6 jun. 2026, a confiança exibida é um valor fixo por gesto, exceto na pinça; a correção está em um PR ainda não publicado.
- O painel de posição, rotação e escala não é atualizado.
- O guia cita polegar para cima e movimento em Z, que o código não implementa.
- A versão web não tem testes; os 34 testes cobrem a versão Python.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
3D Hands manipula um objeto 3D em WebGL com gestos da mão lidos pela câmera, sem tocar no dispositivo.
O MediaPipe Hands rastreia até duas mãos; regras classificam 7 gestos, e os de segurar só disparam depois de 800 ms.
Cada gesto move, aproxima, gira, reinicia ou troca forma e cor do objeto em Three.js, e os mesmos comandos existem no teclado.
Esta descrição corresponde à produção de 6 jun. 2026; uma versão mais nova, com correções, ainda não foi publicada.
Site estático em JavaScript com Three.js e MediaPipe Hands carregados de CDN e overlay em Canvas 2D; versão desktop em Python com OpenCV e MediaPipe.
Funcionalidades e destaques
- 7 gestos por regra, incluindo duas mãos.
- 5 formas e 5 cores.
- Atalhos de teclado para as mesmas ações.
- Histórico dos últimos 12 gestos.
- Mensagens legíveis para erros de câmera.
- Rende a cena WebGL a 16,7 ms por quadro (p50) com câmera sintética.
- Exige 800 ms de gesto contínuo antes de ações de segurar.
- Oferece atalhos de teclado para quem não usa a câmera.
- Mantém uma versão desktop em Python com 34 testes.
Arquitetura técnica e dados
Arquitetura técnica
Como o case foi pensado como produto
Manipulação de um objeto 3D em WebGL com gestos da mão lidos pela câmera, no navegador.
Three.jsVisualizaçãoMediaPipe HandsIACanvas APIPlataforma webJavaScriptLinguagemPythonLinguagemOpenCVIAMediaPipeIA
Principais componentes
- 7 gestos por regra, incluindo duas mãos.
- 5 formas e 5 cores.
- Atalhos de teclado para as mesmas ações.
- Histórico dos últimos 12 gestos.
- Mensagens legíveis para erros de câmera.
Decisões técnicas
- WebGL com Three.js
- Visão computacional no navegador
- Interação sem contato
- Alternativa por teclado
Trade-offs
- Na produção de 6 jun. 2026, a confiança exibida é um valor fixo por gesto, exceto na pinça; a correção está em um PR ainda não publicado.
- O painel de posição, rotação e escala não é atualizado.
- O guia cita polegar para cima e movimento em Z, que o código não implementa.
- A versão web não tem testes; os 34 testes cobrem a versão Python.
Como executar
- npm install && npm run dev
- Desktop: pip install -r requirements.txt e python -m app.gesture_3d_main
- Testes da versão Python: pytest tests/ -v
Créditos
Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech
Próximo projetoNeuroFX Studio
Estúdio que escolhe efeitos visuais em Canvas pelos gestos da mão, com MediaPipe e processamento no navegador.
Ver case completo