Através deste exercício você pode examinar como foi construída essa cena básica 3D no WebGL. Pressione e segure por 2 segundos para copiar o prompt, depois cole o prompt no Pocket, MetaAI, ChatGPT, Claude e Gemni para observar os resultados.

Adicionando mais um prompt ao visualizador básico anterior, crie interfaces UIs para interagir com a cena. Nesse exemplo adicionei um painel estilo "Swift-UIKit iOS iPhone 3-4".

🕹️ Curso WebGL + Vibecode — Galeria de Exemplos

Do primeiro WebGL ao Meta Quest / WebXR

Esta coleção reúne exemplos práticos do curso WebGL | Vibecode, organizados progressivamente do mais simples ao mais avançado. A ideia é permitir que o aluno comece com uma cena 3D básica, avance para interfaces, modelos GLB, rastreamento de mãos/corpo/rosto e, finalmente, aplicações imersivas com WebXR e Meta Quest.

A organização abaixo é pedagógica: os exemplos originais foram reorganizados para formar uma sequência de aprendizagem. O material demonstra justamente a evolução de aplicações WebGL/Three.js para GLB, tracking e XR.

🟢 NÍVEL 01 - PRIMEIROS PASSOS COM WEBGL

Conceito

Comece aqui para entender a estrutura básica de uma aplicação 3D WebGL criada com Vibecode: cena, câmera, objetos, iluminação, interação e renderização.

🎯 Exercício 01 — Visualizador 3D WebGL

Primeiro contato com a criação de uma cena 3D através de prompt. (html incorporado na página - acima)

🎯 Exercício 02 — Visualizador 3D WebGL + UI estilo iOS

Evolução do primeiro exercício, adicionando uma interface para controlar a cena 3D. (html incorporado na página - acima)

Os dois exercícios são apresentados originalmente como uma sequência: primeiro a cena 3D básica e depois a interface de interação.

🟢 NÍVEL 02 — MODELOS 3D, GLB E VISUALIZADORES

Conceito

Depois de entender uma cena WebGL, o próximo passo é trabalhar com modelos 3D reais. O formato GLB/glTF é especialmente importante para aplicações WebGL modernas; o Three.js possui o GLTFLoader justamente para carregar esses modelos. (Three.js)

🧊 GLB Viewer — Claude — Prompt puro

Visualizador GLB criado a partir de um prompt sem refinamento.

▶ Abrir exemplo — Claude

🧊 GLB Viewer — Gemini — Prompt puro

▶ Abrir exemplo — Gemini

🧊 GLB Viewer — GPT — Prompt puro

▶ Abrir exemplo — GPT

🧊 GLB Viewer — Meta AI — Prompt puro

▶ Abrir exemplo — Meta AI

🟡 NÍVEL 03 — PROMPT ENGINEERING + GLB VIEWER

Conceito

Aqui o aluno compara o resultado de um prompt original com uma versão posteriormente refinada pelo ChatGPT. O objetivo é perceber como clareza, semântica e precisão do prompt podem alterar a aplicação gerada.

🧠 GLB Viewer — Claude + ChatGPT

▶ Abrir exemplo — Prompt refinado

🧠 GLB Viewer — Gemini + ChatGPT

▶ Abrir exemplo — Prompt refinado

🧠 GLB Viewer — GPT + ChatGPT

▶ Abrir exemplo — Prompt refinado

🧠 GLB Viewer — Meta AI + ChatGPT

▶ Abrir exemplo — Prompt refinado

🟡 NÍVEL 04 — MODELOS, ANIMAÇÃO E INTERAÇÃO

Conceito

Nesta etapa entram aplicações 3D mais completas: visualizadores, objetos animados, experiências interativas e modelos GLB.

🫖 Gizmotip — 3D Viewer V5.1

▶ Abrir exemplo — 3D Viewer V5.1

🧊 Gizmotip — 3D Viewer V5.2 GLB

▶ Abrir exemplo — Viewer V5.2 GLB

🫖 Gizmotip — 3D Viewer V5.1

▶ Abrir exemplo — Viewer V5.1 versão 6

🐦 AngryFelpudos — Papagaio Verde

▶ Abrir exemplo — Papagaio Verde

👊 AngryFelpudos — Punho Fechado

▶ Abrir exemplo — Punho Fechado

🌳 Genius — Segredos da Floresta

▶ Abrir exemplo — Segredos da Floresta

🟠 NÍVEL 05 — HAND TRACKING

Conceito

Agora a interação deixa de depender apenas de mouse e teclado. A câmera passa a acompanhar as mãos do usuário e utilizar seus movimentos como entrada para a experiência 3D.

🖐️ Hand Tracking — Hologram Studio

▶ Abrir exemplo — Hologram Studio

🖐️ Hand Tracking — PBR Viewer

▶ Abrir exemplo — PBR Viewer

🖐️ Hand Tracking — Tech Two Hands

▶ Abrir exemplo — Two Hands

🧪 Hand Tracking 3D Lab

▶ Abrir exemplo — 3D Lab

👐 Two-Hand 3D Cube

▶ Abrir exemplo — Two-Hand Cube

🫖 Teapot — Hand Tracking Examine

▶ Abrir exemplo — Teapot Examine

🫖 Teapot — Hand Tracking Final

▶ Abrir exemplo — Teapot Final

🫖 Teapot — Hand Tracking V3 Fullscreen

▶ Abrir exemplo — Teapot V3 Fullscreen

🎹 Virtual Piano — Hand Tracking

▶ Abrir exemplo — Virtual Piano

🖐️ WebGL Webcam Tracking — Mãos

▶ Abrir exemplo — Webcam Tracking

🎛️ ProViewer 3D

▶ Abrir exemplo — ProViewer 3D

🟠 NÍVEL 06 — PERSONAGENS E EXPERIÊNCIAS INTERATIVAS

Conceito

Experiências maiores combinando modelos 3D, animação, interação e tracking.

🏙️ Cidade Pérola — Interactive

▶ Abrir exemplo — Cidade Pérola Interactive

🏙️ Cidade Pérola — Hand Tracking

▶ Abrir exemplo — Cidade Pérola Hand Tracking

🏙️ Cidade Pérola — Hand Tracking WebGL

▶ Abrir exemplo — Cidade Pérola WebGL

🌐 Cidade Pérola — Holo City Demo

▶ Abrir exemplo — Holo City Demo

🌱 Cidade Pérola — Sustainable City

▶ Abrir exemplo — Sustainable City

🌍 Pearl City — WebGL Hand Tracking

▶ Abrir exemplo — Pearl City

🌐 Holo City — Hand Tracking

▶ Abrir exemplo — Holo City

🌐 Holo City — WebGL Three.js

▶ Abrir exemplo — Holo City Three.js

🏙️ Holographic City — 3D WebGL

▶ Abrir exemplo — Holographic City

🏙️ Holographic City — Hand Tracking V1

▶ Abrir exemplo — Holographic City V1

🏙️ Holographic City — Handtrack

▶ Abrir exemplo — Holographic City Handtrack

🤖 Robot Dance Futuristic — Cidade Pérola

▶ Abrir exemplo — Robot Dance

🟠 NÍVEL 07 — PERSONAGENS, ANIMAÇÃO E GLB

Conceito

Biblioteca de modelos para experimentar carregamento de GLB, personagens, animações e diferentes tipos de conteúdo 3D.

🐾 Felpudo — Tamagotchi

▶ Abrir exemplo — Gizmotip Tamagotchi

🫖 Gizmotip — 3D Teapot

▶ Abrir exemplo — 3D Teapot

⚙️ Gizmotip — Physics Pocket

▶ Abrir exemplo — Physics Pocket

🌎 Gizmotip — 6 Languages GLB

▶ Abrir exemplo — 6 Languages GLB

🔵 NÍVEL 08 — BIBLIOTECA DE MODELOS GLB

Conceito

Recursos para os exercícios: modelos 3D prontos que podem ser carregados nos visualizadores WebGL/Vibecode.

O Three.js utiliza GLTFLoader para carregar arquivos .gltf e .glb, incluindo cenas, materiais, câmeras e animações. (Three.js)

🐱 01 — Scratch

▶ Baixar modelo GLB — Scratch

🐤 02 — Canário

▶ Baixar modelo GLB — Canário

🐱 03 — Gatinho Branco

▶ Baixar modelo GLB — Gatinho Branco

🦜 04 — Papagaio Solar

▶ Baixar modelo GLB — Papagaio Solar

🪰 Bezos Fly

▶ Baixar modelo GLB — Bezos Fly

💃 Gates Dance

▶ Baixar modelo GLB — Gates Dance

💃 Musk Dance

▶ Baixar modelo GLB — Musk Dance

🤖 Zuck Animado

▶ Baixar modelo GLB — Zuck Animado

🟢 Felpudo NPC Green — Animado

▶ Baixar modelo GLB — Felpudo NPC Green

🥽 Felpudo Vision Pro — Sem Animação

▶ Baixar modelo GLB — Vision Pro

🔵 NÍVEL 09 — BODY TRACKING

Conceito

O usuário passa a controlar experiências 3D através do movimento do corpo. É uma evolução natural do Hand Tracking para experiências mais imersivas.

🤖 Cidade Pérola — Body Tracking + Chrome Robot

▶ Abrir exemplo — Chrome Robot

🕺 Mixamo — Body Tracking WebGL

▶ Abrir exemplo — Mixamo Body Tracking

🔴 NÍVEL 10 — FACE TRACKING + AR

Conceito

Nesta etapa a câmera passa a interpretar o rosto do usuário. Isso permite criar experiências de realidade aumentada, filtros, acessórios virtuais e objetos 3D vinculados ao rosto.

😎 AR Face Glasses — Chrome

▶ Abrir exemplo — AR Face Glasses

🙂 AR Facial 3D — Three.js

▶ Abrir exemplo — AR Facial 3D

🎯 AR Facial — Fix Tracking

▶ Abrir exemplo — Fix Tracking

🧊 AR Facial — GLB Spark

▶ Abrir exemplo — GLB Spark

🧊 AR Facial — GLB Spark 1

▶ Abrir exemplo — GLB Spark 1

🕶️ FaceTrack 3D — Óculos com Cubos

▶ Abrir exemplo — FaceTrack 3D

🕶️ FaceTrack 3D — Óculos com Cubos 1

▶ Abrir exemplo — FaceTrack 3D V1

🖐️ WebGL Viewer — Hand Tracking

▶ Abrir exemplo — WebGL Viewer Hand Tracking

🔴 NÍVEL 11 — WEBXR + META QUEST

Conceito

Aqui chegamos ao nível imersivo: aplicações WebGL que podem ser executadas em dispositivos XR, incluindo experiências para Meta Quest.

O Three.js possui integração própria com WebXR através do WebXRManager, além de recursos para controladores, mãos e detecção de planos. (Three.js)

🥽 Body Collider

▶ Abrir exemplo — Body Collider

🥽 Quest GLB Viewer

▶ Abrir exemplo — Quest GLB Viewer

🥽 WebXR GLB Manipulator — Quest

▶ Abrir exemplo — GLB Manipulator Quest

🥷 Fruit Ninja — WebGL

▶ Abrir exemplo — Fruit Ninja WebGL

😎 GLB Face Try-On Engine

▶ Abrir exemplo — GLB Face Try-On

🕶️ Virtual Try-On — WebGL

▶ Abrir exemplo — Virtual Try-On

🕶️ Ray-Ban Oakley — WebAR

▶ Abrir exemplo — Ray-Ban Oakley WebAR

🕶️ Ray-Ban Oakley — Final Fix

▶ Abrir exemplo — Ray-Ban Oakley Final Fix

🏆 NÍVEL 12 — PROJETOS FINAIS / EXPERIÊNCIAS AVANÇADAS

Conceito

Projetos que combinam várias tecnologias: WebGL, Three.js, GLB, interação, tracking, XR e interfaces.

🧠 Genius Simon — Hand Tracking WebGL

▶ Abrir exemplo — Genius Simon

🥽 Gizmotip — 3D Viewer V5.2 GLB

▶ Abrir exemplo — Viewer V5.2 GLB Final

🥽 Gizmotip — 3D Viewer V5.3 XR

▶ Abrir exemplo — Viewer V5.3 XR

🥽 Meu Primeiro XR

▶ Abrir exemplo — Meu Primeiro XR

🥽 Gizmotip — 3D Viewer V5.3 XR — Versão 2

▶ Abrir exemplo — Viewer V5.3 XR V2

🎾 Tennis Ball Tracker — WebGL

▶ Abrir exemplo — Tennis Ball Tracker

VideoGames 3D Pro Viewer DesktopHandTrack

https://felpudo.s3.sa-east-1.amazonaws.com/VibeCode+-+AprendaProgramar/Gizmotip-001-3d-Viewer-V5-3-Xr.html

VideoGames 3D Pro Viewer XR

https://felpudo.s3.sa-east-1.amazonaws.com/VibeCode+-+AprendaProgramar/Gizmotip-001-3d-Viewer-V5-3-Xr+(1).html

🚀 TRILHA RECOMENDADA

WebGL básico → Interface 3D → GLB → Prompt Engineering → Animação → Hand Tracking → Body Tracking → Face Tracking → AR → WebXR → Meta Quest → Projetos XR

Essa sequência combina bem com a própria evolução tecnológica apresentada no material: WebGL/Vibecode, modelos GLB, Hand Tracking, Body Tracking e finalmente Meta Quest/WebXR.

Também é uma progressão tecnicamente coerente: o WebGLRenderer fornece a base de renderização 3D, o GLTFLoader acrescenta o carregamento de conteúdo GLB/glTF e o WebXRManager leva a aplicação para experiências XR. (Three.js)