ADICIONA MENU AO SIDEBAR - ( TECLA  N -NA VIEWPORT 3D )

...

Crie um Blender Python Script - adicione menu de ferramentas ao menu lateral N da viewport

• LABEL TITULO NOME DO TOOLSET - "Felpudo NPC Tools"

• BOTAO RESET SCENE OBJECT NAMES - renomeia todos objetos da cena como felpudo.001 em diante - nome unico - com dialogbox de confirmação

• BOTAO RESET SCENE MATERIALS - apaga todos os materias da cena e remove todos os materiais de todos os objetos da cena - use box de confirmação

...

EXECUTE O SCRIPT PYTHON NO BLENDER E VEJA O RESULTADO:

Crie um addon completo em Python para Blender chamado Felpudo NPC Tools, destinado ao painel N (Sidebar) do 3D Viewport, na categoria Felpudo.

IMPORTANTE: gere o script Python completo, pronto para colar e executar no Blender. Não entregue trechos, pseudocódigo ou explicações. Preserve exatamente todas as funcionalidades descritas abaixo e não altere, remova ou simplifique nenhuma funcionalidade.

1. RENAME OBJECTS

Criar uma seção Rename Objects com:

• Campo de texto Prefix, valor padrão felpudo.

• Campo de texto Object Name.

• Botão OK.

• Checkbox Hide objects after rename.

O botão OK deve renomear os objetos selecionados usando:

PREFIX_NOMEOBJETO

Quando houver vários objetos selecionados, adicionar numeração .001, .002, .003 etc., garantindo nomes únicos.

Usar nomes temporários durante renomeações em lote para evitar conflitos de nomes entre objetos.

Sufixos

Criar botões:

• _OLHO

• _SOBRANCELHA

• _PALP. UP

• _PALP. DOWN

• _ESQ

• _DIR

Os botões devem adicionar respectivamente:

• _OLHO

• _SOBRANCELHA

• _PALPEBRA_CIMA

• _PALPEBRA_BAIXO

• _ESQ

• _DIR

O sufixo só deve ser acrescentado se o objeto ainda não terminar com ele.

O checkbox Hide objects after rename também deve funcionar nos botões de sufixo.

REMOVE DIGITS

Adicionar o botão REMOVE DIGITS.

Ele deve remover todos os caracteres numéricos 0–9 dos nomes dos objetos selecionados.

O checkbox Hide objects after rename também deve funcionar nessa operação.

RENAME MESHES

Adicionar o botão RENAME MESHES.

Para cada objeto selecionado que possua dados de mesh, renomear o datablock da mesh (obj.data.name) para o mesmo nome do objeto.

RENAME MATERIALS

Adicionar o botão RENAME MATERIALS.

Para cada objeto selecionado, renomear os materiais atribuídos a ele usando o nome do objeto.

SET VIEWPORT COLORS

Logo abaixo de RENAME MATERIALS, adicionar o botão:

SET VIEWPORT COLORS

Esse botão deve ser uma ação manual.

Para os objetos selecionados, pegar a cor Base Color do shader Principled BSDF de seus materiais e copiar essa cor para material.diffuse_color, permitindo que a cor do material seja utilizada também como Viewport Color.

Essa operação NÃO deve ser automática.

SHOW HIDDEN OBJECTS

Adicionar o botão:

SHOW HIDDEN OBJECTS

Ele deve funcionar exatamente como o comando Alt+H do Blender, mostrando novamente todos os objetos ocultos através de:

for obj in bpy.context.scene.objects:

    obj.hide_set(False)

REGRA CRÍTICA SOBRE HIDE

O checkbox Hide objects after rename deve executar somente o equivalente ao comando H do Blender.

Portanto, ao esconder objetos, usar exclusivamente:

obj.hide_set(True)

NÃO usar:

obj.hide_viewport = True

O comportamento deve ser equivalente ao H do Blender, permitindo que o Alt+H / SHOW HIDDEN OBJECTS revele os objetos novamente.

Não misturar hide_set() com hide_viewport nessa funcionalidade.

2. ANIMATION SETS

Criar uma seção Animation Sets com os seguintes botões:

• Entrada → frames 0–30

• Idle → frames 31–90

• Walk → frames 91–110

• Run → frames 110–120

• Backflip → frames 121–150

Ao clicar em um botão:

1. Definir scene.frame_start.

2. Definir scene.frame_end.

3. Ir para o frame inicial.

4. Reproduzir a animação.

3. SCENE RESET

Criar uma seção Scene Reset.

RESET SCENE OBJECT NAMES

Criar o botão:

RESET SCENE OBJECT NAMES

Ao clicar:

• Exibir confirmação antes de executar.

• Renomear todos os objetos da cena para:

  • felpudo.001

  • felpudo.002

  • felpudo.003

  • etc.

• Garantir nomes únicos.

• Aplicar a todos os objetos da cena, não apenas aos selecionados.

RESET SCENE MATERIALS

Criar o botão:

RESET SCENE MATERIALS

Ao clicar:

• Exibir confirmação.

• Remover todos os materiais dos slots dos objetos.

• Remover os datablocks de materiais da cena.

4. COLOR PALETTE

Criar uma seção Color Palette com um slider inteiro de 0–23.

O slider deve aplicar automaticamente a paleta ao ser alterado.

Não criar botão Apply.

A alteração do slider deve imediatamente executar a aplicação das cores.

Aplicar a cor aos objetos cujo nome contenha:

• CORPO

• ASA

• PALPEBRA

Usar os materiais desses objetos.

Comportamento

CORPO

Aplicar a cor selecionada da paleta ao Base Color do Principled BSDF.

Definir:

Roughness = 0.42

ASA

Gerar uma versão mais escura da cor do corpo.

Definir:

Roughness = 0.25

PALPEBRA

Gerar uma versão ainda mais escura da cor do corpo.

Não alterar a roughness da pálpebra.

Para gerar as cores relacionadas, utilizar HSV, dobrando a saturação e reduzindo o valor de brilho conforme os parâmetros abaixo:

def felpudo_related_color(body_color, darkness):

    r = body_color[0]

    g = body_color[1]

    b = body_color[2]

    h, s, v = colorsys.rgb_to_hsv(r, g, b)

    s = min(1.0, s * 2.0)

    v = v * (1.0 - darkness)

    v = max(0.0, min(1.0, v))

    r, g, b = colorsys.hsv_to_rgb(h, s, v)

    return (r, g, b, 1.0)

Para as cores não especiais:

wing_color = felpudo_related_color(body_color, 0.825)

eyelid_color = felpudo_related_color(body_color, 0.75)

EXCEÇÃO OBRIGATÓRIA DA PALETA — ÍNDICE 0

A cor 0 deve preservar exatamente estas cores:

Body:

#529219FF

Wing:

#376A0DFF

Eyelid:

#2C5040FF

Não recalcular essas três cores através da função HSV.

5. PALETA DE 24 CORES

Usar exatamente esta lista:

FELPUDO_COLOR_PALETTE = [

    (0x52 / 255, 0x92 / 255, 0x19 / 255, 1.0),  # 00 original green

    (0xE8 / 255, 0x1B / 255, 0x23 / 255, 1.0),  # 01 red

    (0xFF / 255, 0xD9 / 255, 0x00 / 255, 1.0),  # 02 yellow

    (0x20 / 255, 0x78 / 255, 0xE8 / 255, 1.0),  # 03 blue

    (0x08 / 255, 0x08 / 255, 0x0A / 255, 1.0),  # 04 black

    (0xA9 / 255, 0x16 / 255, 0x1C / 255, 1.0),  # 05 dark red

    (0xFF / 255, 0xFF / 255, 0xF5 / 255, 1.0),  # 06 white

    (0x3C / 255, 0xC6 / 255, 0x39 / 255, 1.0),  # 07 green

    (0x00 / 255, 0xD4 / 255, 0xC7 / 255, 1.0),  # 08 turquoise

    (0xFF / 255, 0x76 / 255, 0x00 / 255, 1.0),  # 09 orange

    (0xFF / 255, 0x3B / 255, 0x91 / 255, 1.0),  # 10 pink

    (0x8B / 255, 0x32 / 255, 0xD6 / 255, 1.0),  # 11 purple

    (0x00 / 255, 0x66 / 255, 0xD9 / 255, 1.0),  # 12 strong blue

    (0x6E / 255, 0xC9 / 255, 0x24 / 255, 1.0),  # 13 pig green

    (0x39 / 255, 0x8A / 255, 0x20 / 255, 1.0),  # 14 dark green

    (0xFF / 255, 0x4D / 255, 0x00 / 255, 1.0),  # 15 strong orange

    (0xFF / 255, 0xB8 / 255, 0x00 / 255, 1.0),  # 16 gold yellow

    (0x3D / 255, 0xB9 / 255, 0xFF / 255, 1.0),  # 17 light blue

    (0x00 / 255, 0xE5 / 255, 0xFF / 255, 1.0),  # 18 cyan

    (0xE8 / 255, 0x00 / 255, 0xA8 / 255, 1.0),  # 19 magenta

    (0xA8 / 255, 0x00 / 255, 0xFF / 255, 1.0),  # 20 vibrant purple

    (0xFF / 255, 0x28 / 255, 0x28 / 255, 1.0),  # 21 vivid red

    (0xA8 / 255, 0xE6 / 255, 0x00 / 255, 1.0),  # 22 lime

    (0xFF / 255, 0xC4 / 255, 0x00 / 255, 1.0),  # 23 orange-yellow

]

6. EYE TEXTURE

Criar uma seção Eye Texture com um slider inteiro de 0–4.

A textura deve ser aplicada automaticamente quando o slider mudar.

Não criar botão APPLY EYE TEXTURE.

As imagens estão na mesma pasta do arquivo .blend.

Usar exatamente estes arquivos:

EYE_TEXTURES = [

    "mapaOlhoVerde.jpg",

    "mapaOlhoAzul.jpg",

    "mapaOlhoAmarelo.jpg",

    "mapaOlhoVermelho.jpg",

    "mapaOlhoMarrom.jpg",

]

Ao alterar o slider:

1. Localizar a pasta do arquivo .blend.

2. Localizar a imagem correspondente.

3. Carregar a imagem.

4. Aplicá-la ao Base Color do Principled BSDF.

5. Aplicar somente aos objetos cujo nome contenha OLHO ou EYE.

Se a imagem não existir, simplesmente não executar a aplicação e não interromper o addon.

O slider deve possuir uma callback update que execute automaticamente a aplicação da textura.

7. ESTRUTURA TÉCNICA

Usar:

import bpy

import os

import colorsys

Criar funções auxiliares para:

• localizar o Principled BSDF;

• definir Base Color;

• copiar Base Color para Viewport Color;

• calcular cores relacionadas;

• renomear objetos evitando conflitos;

• esconder objetos usando exclusivamente hide_set(True);

• mostrar objetos usando hide_set(False);

• aplicar a paleta;

• aplicar textura dos olhos.

Criar operadores Blender separados para cada função.

Criar propriedades da cena:

felpudo_prefix

felpudo_object_name

felpudo_hide_after_rename

felpudo_color_index

felpudo_eye_texture_index

Tanto felpudo_color_index quanto felpudo_eye_texture_index devem possuir callbacks update para aplicação automática.

Criar um painel com:

bl_space_type = 'VIEW_3D'

bl_region_type = 'UI'

E categoria:

bl_category = "Felpudo"

Nome do painel:

Felpudo NPC Tools

Registrar e desregistrar corretamente todos os operadores, propriedades e classes.

Usar confirmação para as duas operações de RESET.

O resultado final deve ser um único script Python completo, autocontido e funcional, pronto para ser executado no Blender.

NÃO modificar nenhuma funcionalidade especificada acima.

NÃO adicionar funcionalidades extras.

NÃO remover funcionalidades.

NÃO substituir o comportamento do hide_set(True) por hide_viewport.

O comportamento do Hide objects after rename deve ser exatamente equivalente ao comando H, e SHOW HIDDEN OBJECTS deve ser equivalente ao Alt+H.

Exemplo prático travado

PROMPT TRAVADO:

Crie APENAS um cubo vermelho #FF0000 girando no centro da tela.

Canvas ocupa 100% da tela.

Uma única luz direcional branca.

Fundo preto sólido.

REGRAS ABSOLUTAS: PROIBIDO adicionar OrbitControls, PROIBIDO adicionar qualquer elemento HTML, texto, botão ou painel. PROIBIDO adicionar chão, grid ou segundo objeto. Entregue SOMENTE o cubo.

Se você me mandar assim, eu não vou colocar nem o controle de arrastar o mouse.

DICA PARA GERAÇÃO DE APLICAÇÕES

Para travar e fazer eu gerar SÓ o que você escreveu, use o modo "lista fechada". É o oposto do prompt criativo.

Use essa estrutura:

Template anti-invenção

CRIE APENAS ISTO - NADA A MAIS:

[seu objeto principal aqui]

REGRAS ABSOLUTAS:

1. PROIBIDO adicionar UI, HUD, botões, painéis, textos, legendas, gradientes, ícones

2. PROIBIDO adicionar luzes, objetos, chão ou efeitos que não estão na lista acima

3. PROIBIDO inferir features - se não está escrito, não existe

4. O código deve conter SOMENTE o necessário para renderizar o item descrito

5. Fundo: [defina - ex: #000000 liso]

Se precisar de algo que não está listado, NÃO crie, deixe vazio.

Por que funciona

Eu sou treinado para ser "útil" e completar. Quando você diz "um carro", eu penso "vou colocar um painel de cor, um chão bonito, um botão de reset". Para bloquear isso, você tem que usar linguagem de negação forte.

3 truques que travam de verdade:

1. Use "APENAS" e "SOMENTE" no início

Ruim: "Crie um cubo 3D"

Bom: "Crie APENAS um cubo 3D. SOMENTE o cubo."

2. Liste o que é PROIBIDO explicitamente

"PROIBIDO: OrbitControls extras, grid helper, stats, dat.GUI, botões HTML, CSS adicional"

3. Defina o que é o vazio

Se você não disser o que fazer com o resto, eu invento.

"Todo o resto da tela deve ser vazio. Sem UI overlay. Sem HTML fora do canvas."

A estrutura que mais funciona pra IA gerar uma aplicação WebGL/3D boa tem 6 blocos. 

Se você mandar assim, eela já cria direto com `Three.js` + React. Veja a fórmula que eu uso:

Copie e preencha:

1. O QUE É: [tipo de app + objetivo em 1 frase]

2. STACK: [Three.js / R3F / Babylon - se não souber, eu uso Three.js]

3. CENA: [o que tem na cena, estilo visual, referências]

4. INTERAÇÃO: [como o usuário mexe - orbit, drag, click, WASD, VR?]

5. LÓGICA: [o que precisa acontecer - física, dados, animação]

6. VISUAL / UI: [cores, HUD, responsivo, performance]

```

Detalhando cada bloco

1. O QUE É

Não diga só "um jogo 3D". Diga o loop.

Ex: "um visualizador de tênis 3D que gira 360° para e-commerce" é 10x melhor que "site 3D de tênis"

2. STACK

Se você não definir, meu padrão é:

- Three.js com React Three Fiber (R3F) - melhor custo/benefício

- `drei` para controles prontos

- `gsap` para animações suaves

Se precisar de física pesada, fale: `rapier` ou `cannon-es`. Se precisar de shaders, fale: `GLSL custom`.

3. CENA

Me diga 3 coisas:

- Objetos: o que tem? Ex: 1 tênis, 2 luzes, chão infinito

- Estilo: realista PBR? low-poly? cyberpunk? voxel?

- Iluminação: studio? HDR? noite com neon?

4. INTERAÇÃO

- Câmera: `OrbitControls`, primeira pessoa, fixa?

- Input: mouse drag, scroll para zoom, clique para trocar material, WASD?

- Mobile: tem que funcionar no toque?

5. LÓGICA

É aqui que a maioria esquece. Ex:

- "ao clicar no tênis, troca a cor"

- "carregar modelo .glb de URL"

- "física de gravidade nos cubos"

6. VISUAL / UI

- Cores, tipografia, tem painel HTML por cima?

- Precisa ser leve? < 5mb? 60fps obrigatório?

Exemplo de prompt perfeito (pronto pra colar)

Crie uma aplicação WebGL 3D de um showroom de carros.

Cena: 1 carro esportivo low-poly no centro, chão reflexivo, fundo estúdio escuro com HDR, 2 spotlights.

Interação: OrbitControls com damping, scroll para zoom limitado, clique no carro troca a cor (vermelho, preto, prata).

Lógica: carregar modelo GLB, rotação automática lenta quando parado.

UI: painel minimalista no canto inferior com 3 bolinhas de cor, título em branco, totalmente responsivo.

Performance: 60fps, sombras suaves, sem post-processing pesado.

crie uma arte layout

adicione algumas UIs sobre esta tela / use estilo ui ios 6/7 - iphone 3 4 5...

- imagem logotipo - top left align - 15% do tamanho do palco (alterne com transicao entre 3 logotipos aprendaprogramar escoladovideogame e metaversosteam)

- grid de cores - paleta com 12 cores primarias - top right align - slots esfericos - estilo materiais 3d

- slider com label "cor dos olhos" - bottom right align

- dropdownlist - bottom left align - "clipes de animação"

- switchbutton - bottoncenteralign - handtrack

# CRIE O APP WEBGL COMPLETO — FELPUDONPC | 3D VIEWER PRO 1.0

Crie um app WebGL completo, funcional e pronto para publicação em S3, compatível com Desktop, iOS, Android e Meta Quest / WebXR.

## STACK OBRIGATÓRIA

Three.js r160 (three + OrbitControls + GLTFLoader via importmap), JavaScript, HTML, CSS, MediaPipe Hands (hands + camera_utils + drawing_utils via CDN), WebXR. Projeto em arquivo único HTML, sem dependências locais.

## REGRA FUNDAMENTAL

Carregue TUDO por URL absoluta, nunca por arquivo local:

GLB: https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/FelpudoNPC_Final.glb

Logos (nesta ordem):

1 https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/logo+metaverso+steam.png

2 https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/logo+escola+do+videogame.png

3 https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/logo+aprenda+programar.png

Olhos:

Amarelo https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/mapaOlhoAmarelo.jpg

Azul https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/mapaOlhoAzul.jpg

Marrom https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/mapaOlhoMarrom.jpg

Verde https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/mapaOlhoVerde.jpg

Vermelho https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/mapaOlhoVermelho.jpg

Título HTML: FelpudoNPC | 3D Viewer Pro 1.0

Hospedagem final: https://felpudo.s3.sa-east-1.amazonaws.com/FelpudoNPC_WebGL/Felpudo-3d-Viewer-Webgl.html

## OBJETIVO E VIEWPORT

Visualizador 3D do mascote Felpudo com viewport estilo Blender: grid 3D, câmera orbital, fundo #2b2b2f ou #3c3c3c, modelo centralizado. Preservar geometria, materiais, rig, hierarquia e nomes do GLB.

Iluminação estilo Super Mario Galaxy: realista, suave, cinematográfica. PBR com MeshStandardMaterial/Physical quando apropriado. Luzes: Ambient 0.8, Directional key 2,5,3 intensidade 1.2 com sombras 1024 PCFSoft, Hemisphere e Fill -2,2,-2 0.4. ToneMapping ACESFilmic, exposure 1.0, sombras suaves com qualidade adaptativa.

## UI — POSIÇÕES EXATAS (sem labels amarelos, sem elementos extras)

Top-left 15vw max 200px: logo fixo. CSS: position fixed top 20px left 20px width 15vw pointer-events none user-select none z-index 10 background transparent. Img: width 100% height auto display block user-select none -webkit-user-drag none pointer-events none transition opacity 0.6s ease draggable false. Lógica: inicia src logos[0] opacity 1, setInterval 5000ms -> opacity 0, setTimeout 600ms -> src = (index+1)%3, opacity 1. Sem drag, sem seleção.

Top-center: botão pill MODO-XR #6a6a6a borda verde #2ecc71 3px. Clique inicia WebXR immersive-vr.

Top-right: color picker 12 cores [#FF0000,#00FF00,#0000FF,#FFFF00,#FF00FF,#00FFFF,#FF8000,#8000FF,#FF0080,#80FF00,#0080FF,#FFFFFF] ou paleta primária similar, slots circulares esféricos com box-shadow 3D. Ao clicar: encontrar materiais por nome (corpo/body, asa/wing, palpebra/eyelid). Aplicar: corpo=cor, asa=30% mais escura (lerp to black 0.3), pálpebra=70% mais escura (0.7).

Bottom-right: slider Cor dos Olhos, input range 0-4 com 5 ticks. Trocar textura material olho (nome olho/eye). Carregar via TextureLoader das 5 URLs.

Bottom-left: dropdown Clipes de animação com 7 opções nesta ordem: Entrada, Idle, Walk, Run, Backflip, Saída, Frontflip.

Bottom-center: switch HandTrack ON/OFF.

## ANIMAÇÃO — LÓGICA QUE FUNCIONA (copiar exatamente)

GLB exportado Blender: Animation Type Scene, Split OFF, 1 clip longo com 150 frames totais.

Definição: uO = [{name:"Entrada",s:0,e:30},{name:"Idle",s:31,e:90},{name:"Walk",s:91,e:110},{name:"Run",s:110,e:120},{name:"Backflip",s:121,e:150},{name:"Saída",s:0,e:30,reverseOf:"Entrada"},{name:"Frontflip",s:121,e:150,reverseOf:"Backflip"}]

FPS dinâmico: let fps = 30; if(baseClip && baseClip.duration>0) fps = 150 / baseClip.duration;

createSubClip(baseClip,name,startFrame,endFrame,fps): tenta THREE.AnimationUtils.subclip, se falhar fallback manual filtrando tracks por time entre startFrame/fps e endFrame/fps, normalizando times.

createReversedClip(sourceClip,newName): duration = sourceClip.duration; para cada track, n=times.length, valueSize=values.length/n, criar newTimes = duration - times[revIdx] e newValues copiando bloco reverso, depois ordenar pares por tempo crescente mantendo values, criar novo AnimationClip.

Criação: clipsMap = {}; para defs sem reverseOf criar subclip; se clipsMap.Entrada existe clipsMap["Saída"]=createReversedClip(Entrada,"Saída"); se Backflip existe clipsMap.Frontflip=createReversedClip(Backflip,"Frontflip");

Playback: mixer.clipAction, setLoop LoopRepeat Infinity, reset, fadeIn 0.25, play. Iniciar com Idle. Cada seleção stopAllAction antes.

## HANDTRACK

Video fullscreen opacity 0.10 (10% quase invisível) não espelhado, z-index 5, pointer-events none. Canvas overlay z-index 6. MediaPipe Hands max 2 mãos, minDetection 0.7.

Debug visual preservado: linhas amarelas #ffeb00 nos dedos, círculos verdes #00ff66 nas juntas.

Gestos por landmarks:

isPinch = dist thumb_tip(4) + index_tip(8) <0.05

isOpen = dedos estendidos, isClosed = curl

- 2 mãos pinch = ZOOM (distância entre mãos controla dolly)

- 1 aberta + 1 pinch = ORBIT (movimento mão pinch controla rotação)

- 2 fechadas = PAN (média movimento)

- 1 aberta + double pinch rápido <600ms = RESET câmera com transição animada suave (lerp 800ms cubic)

Máquina de estados com suavização para evitar jitter e conflito. OrbitControls desabilitado quando HandTrack ON.

Feedback sonoro futurista suave via Web Audio (oscillator sine 440-880Hz gain 0.12 duration 0.2s).

Mouse/touch: orbit, zoom, pan. Double click/tap reset câmera suave.

Responsivo desktop/iOS/Android/Quest.

## REGRA ABSOLUTA

NÃO criar menus, toolbars, botões extras, painéis, configs, textos amarelos explicativos, indicadores, sliders adicionais, download/upload/share.

Entregue HTML completo funcional.

# PROMPT COMPLETO — HAND TRACK STEAM | WEBGL + THREE.JS + MEDIAPIPE HANDS + SONS

Crie uma aplicação web interativa em tempo real, fullscreen, utilizando **Three.js, WebGL, MediaPipe Hands, getUserMedia e Web Audio API**, que permita manipular uma galeria com gestos naturais.

## 1. TECNOLOGIAS

- Three.js 0.160.0 via importmap

- MediaPipe Hands via CDN: `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1646424915/hands.js` + camera_utils

- WebGL renderer com alpha:true

- Web Audio API para sons eletrônicos divertidos (OscillatorNode, sem arquivos externos)

- HTML5/CSS3/JS ES Modules em arquivo único standalone

- requestAnimationFrame loop único, sem alocações no loop

## 2. IMAGENS - 11 URLs EXATAS

Preservar ordem circular, aspect ratio, carregamento assíncrono com TextureLoader, fallback visual se falhar:

1. LOGOTIPO (uso fixo + galeria)

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/00+LOGOTIPO.png

2. GATO LARANJA

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/01+GATO+LARANJA.png

3. CANÁRIO MAKER

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/02+CANARIO+MAKER.png

4. GATO BRANCO

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/03+GATO+BRANCO.png

5. PAPAGAIO SOLAR

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/04+PAPAGAIO+SOLAR.png

6. GATO CINZA

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/05+GATO+CINZA.png

7. COLIBRI AZUL

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/06+COLIBRI+AZUL.png

8. SABIÁ ROSA

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/07+SABIA+ROSA.png

9. BILL GAMER

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/08+BILL+GAMER.png

10. VISION PRO

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/09+VISIONPRO.png

11. GATO PRETO

https://felpudo.s3.sa-east-1.amazonaws.com/AprendaProgramarVibecode/HandTrackImagesSTEAM/10+GATO+PRETO.png

## 3. LOGO FIXO

Criar `<div id="fixed-logo">` fixed top:80px left:20px z-index 50 com img do LOGOTIPO 140px, drop-shadow, opacity 0.95, pointer-events none. Sempre visível, independente da galeria.

## 4. LAYERS (ordem z-index)

1. Fundo: div fixed 100vw/vh gradiente vertical #020a1f 0% → #0a1d4a 45% → #1e3a8a 100%

2. Vídeo webcam: fullscreen object-fit cover, opacity controlada por switch CAMERA (OFF padrão 0.1, ON 1.0, transição 400ms), mirror via scaleX(-1)

3. Three.js canvas: fullscreen transparent, imagens como PlaneGeometry com height base 3 e width = height * aspect, MeshBasicMaterial transparent, sombra suave atrás

4. Debug canvas: fullscreen pointer-events none, linhas amarelas #FFEB3B espessura 3, círculos azuis #2196F3 raio 6, pontas 4 e 8 raio 9, topologia mão completa

## 5. UI

Barra topo translúcida backdrop-blur com switches: CAMERA, MIRROR X (ON padrão), DEBUG (ON padrão), FULLSCREEN. Switch estilo iOS animado. Indicador status bottom center: "Inicializando...", "Câmera ativa - Aguardando mãos", "MODO NAVEGAÇÃO ATIVO", etc. Contador "3/10 - GATO BRANCO". Botões laterais: btn-prev left:20px e btn-next right:20px, 80px circulares, blur, borda translúcida, hover amarelo.

## 6. MEDIAPIPE + COORDINATE MAPPER

- maxNumHands 2, modelComplexity 1, minDetection 0.7, minTracking 0.7

- Função centralizada `applyMirror(x) = mirrorOn ? 1 - x : x`

- Função `mapNormToWorld(normX,normY)` com aspect e frustum

- `isHandOpen(hand)`: verifica tip vs pip (8<6,12<10,16<14,20<18) se 3+ dedos estendidos = aberta

- Suavização lerp 0.35 para posição mão, sem delay perceptível

- Tolerância perda momentânea detecção

## 7. GESTOS FINAIS (prioridade)

**GESTO RESET - MÃO ESQUERDA ABERTA + DOUBLE PINCH DIREITA:**

- Detecta right pinch: distância thumb 4 ↔ index 8 <0.05 close, >0.07 open (histerese)

- Double pinch: dois fechamentos em 600ms

- Condição: leftOpen && doublePinchRight

- Ação: animar imagem para pos 0,0 scale 1 rotation.z 0 com easeOutBack 500ms, badge "RESET!", som ta-da, debounce 800ms

**GESTO NAVEGAÇÃO - MÃO ESQUERDA ABERTA + SWIPE DIREITA:**

- Condição: leftOpen (3 frames consecutivos aberta para estabilidade) && rightHand existe && !rightPinch && !dualPinch

- Histórico 18 frames da mão direita (landmark 9), calcula dx e velocidade

- Se |dx|>0.28 em <350ms e vel>0.7: dx< -0.28 = próxima foto, dx>0.28 = anterior

- Animação transição 450ms easeOutCubic: atual sai x ±5 opacity 1→0 scale 1→0.85, próxima entra oposto

- Cooldown 700ms, som swish ascendente/descendente

- Alternativa: pinch sobre btn-prev/btn-next também navega, com highlight amarelo e pulse

**GESTO ZOOM + ROTAÇÃO - PINCH DUAS MÃOS SIMULTÂNEO:**

- Quando ambas pinch ativas, salvar initialDistance (distância entre pinch points), initialScale, initialAngle = atan2(rightY-leftY, rightX-leftX), initialRotation

- A cada frame:

  scale = initialScale * (currentDist/initialDist) clamp 0.25-4 lerp 0.18

  rawDelta = currentAngle - initialAngle

  if mirrorOn rawDelta = -rawDelta

  imageRotation = initialRotation + rawDelta * -1  // INVERSÃO * -1 OBRIGATÓRIA para ficar natural horário=horário

  mesh.rotation.z = imageRotation lerp 0.18

  Tick sonoro a cada 15° e bonk se limite atingido

- Prioridade sobre navegação

**GESTO DRAG - 1 MÃO PINCH SOZINHA:**

- Quando single pinch sem leftOpen modo navegação e sem dual pinch, mover imagem com offset inicial e lerp 0.25

## 8. SONS - WEB AUDIO API

Criar audioCtx no primeiro clique. Funções playTone(freq,dur,type,vol,slide). Sons:

- CAMERA ON pop 800→1200Hz 0.15s, OFF blop 400→200Hz

- MIRROR whoosh 300-900Hz, DEBUG blip 1000Hz, FULLSCREEN arpeggio C5,E5,G5,C6

- Swipe próxima 400→800Hz, anterior 800→400Hz

- Pinch grab 600Hz, zoom stretch 200→600Hz, tick rotação 1200Hz, limite bonk 150Hz, reset ta-da C-E-G-C + boing 200→50Hz

## 9. FULLSCREEN + PERFORMANCE

Botão requestFullscreen no documentElement, recalcular renderer e câmera, preservar posição/escala, suportar ESC e resize/orientation. Reutilizar geometrias/materiais/vetores, texturas assíncronas, tratar permissão câmera, fallback teclado/mouse (setas navega, drag mouse, scroll zoom), 60FPS.

Entregar HTML único funcional em HTTPS/localhost, sem build, pronto para abrir.