🧊

Computação Gráfica

IFPA Campus Breves

Explore o Universo da Computação Gráfica na Web

Bem-vindo ao portal central da disciplina. Aqui você encontra os projetos práticos, roteiros didáticos passo a passo, modelos 3D interativos desenvolvidos com Three.js e WebGL, além dos materiais de apoio para as avaliações.

Explorar Projetos Práticos 🌐 Geo3D Lab Interativo ↗ 📖 Roteiro da 3ª Avaliação

WebGL

Renderização 3D nativa

Three.js

Motor gráfico no navegador

Tinkercad

Modelagem e malhas .glb

Mova o mouse para interagir
Projetos & Práticas

Projetos Desenvolvidos na Disciplina

Acesse as implementações práticas de computação gráfica, desde a introdução básica a modelos 3D até a atividade completa de publicação web em duplas.

Demonstração Inicial
01

01 — Página com 3D (Projeto Pioneiro)

Primeiro projeto prático apresentado na disciplina. Introduz os conceitos fundamentais da renderização 3D no navegador web: instanciação da cena Three.js, perspectiva de câmera, iluminação direcional e o carregamento de uma malha tridimensional (aviaozinho.glb) com rotação contínua através do loop de animação requestAnimationFrame.

Three.js r128 WebGL GLTFLoader HTML5 / CSS3
✈️

Visualizador Simples do Aviãozinho

Demonstração objetiva e didática com código amplamente comentado para fixação dos conceitos iniciais de cena, câmera e malhas.

Abrir Projeto 01 Código Fonte

02 — Atividade: Site com Modelos 3D

Atividade prática avaliativa integrando modelagem autoral no Tinkercad com exportação .glb, controles de órbita via mouse (OrbitControls) com amortecimento suave e publicação online gratuita. Esta atividade é composta por duas frentes complementares:

Tinkercad OrbitControls Tiiny.host Trabalho em Duplas
📖

Guia & Roteiro de Orientações da Atividade

Guia interativo completo com o passo a passo dos 6 estágios, gerador de ZIP para download dos arquivos base, tabela de critérios avaliativos e dicas técnicas.

Acessar Roteiro de Orientações →
💻

Template dos Alunos (Webpage Modelo 3D)

Projeto base pré-configurado contendo layout em cartões duplos lado a lado, área de inserção de nomes, descrições e carregamento dos arquivos GLB de ambos os alunos.

Central da Atividade 02

03 — Geo3D: Laboratório Interativo de Computação Gráfica

Ambiente virtual imersivo e acessível (WCAG 2.2 AA) desenvolvido para exploração prática e avaliação de geometria espacial na disciplina. Conta com visualização 3D em tempo real de 5 sólidos fundamentais, animações matemáticas de dobrar (fold) e desdobrar (unfold) em planificações, rotação interativa e motor avaliativo com 10 desafios pedagógicos.

Three.js WCAG 2.2 AA Planificação 3D Vercel Inclusão / Libras
📐

Laboratório de Sólidos & Desafios 3D

Dobre e desdobre cubos, prismas, pirâmides e cilindros, descubra faces ocultas opostas, explore projeções ortográficas e resolva os desafios com correção interativa.

Acessar Geo3D Lab Interativo
Currículo Didático

Trilha de Aprendizado em 3D

A jornada de construção do conhecimento desde os princípios geométricos até a entrega do projeto em produção.

01

Espaço Tridimensional & Câmera

Compreensão do sistema de coordenadas cartesianas (X, Y, Z), campos de visão (FOV), planos de corte (near/far) e projeção em perspectiva matemática.

02

Modelagem 3D & Formatos Web

Criação de geometrias no Autodesk Tinkercad e Blender, composição de sólidos, manipulação de malhas poligonais e exportação no formato padrão GLTF / GLB.

03

Three.js & Interatividade

Inicialização da cena, materiais, iluminação ambiente e direcional para sombreamento, controles de rotação de mouse com OrbitControls e loop de renderização.

04

Publicação & Entrega

Empacotamento dos 5 arquivos essenciais (HTML, CSS, JS e GLB), testes em ambiente local e hospedagem estática online no Tiiny.host para submissão no Classroom.

Ecossistema de Desenvolvimento

Recursos & Ferramentas Recomendadas

Acesse as plataformas e documentações oficiais utilizadas durante as aulas práticas e atividades.

🌐

Three.js Docs ↗

Documentação oficial com referências de API completas, exemplos de iluminação, câmeras, loaders e controles.

Documentação Oficial
📐

Autodesk Tinkercad ↗

Ferramenta gratuita de modelagem 3D intuitiva no navegador, ideal para criação rápida de modelos exportáveis para .glb.

Modelagem 3D
☁️

Tiiny.host ↗

Plataforma recomendada para hospedar o projeto estático compactado em ZIP de forma rápida e gerar link público.

Hospedagem Web
🔍

glTF Viewer (Don McCurdy) ↗

Visualizador e validador online de arquivos .gltf e .glb para inspecionar malhas, nós e materiais antes de incluir no site.

Validador 3D
🎓

Google Classroom ↗

Ambiente virtual de aprendizagem do IFPA para envio das atividades, acompanhamento de notas e avisos da turma.

Ambiente Virtual
⚡

VS Code + Live Server ↗

Editor recomendado para desenvolvimento web. A extensão Live Server evita problemas de CORS ao carregar modelos locais.

Ambiente Local
Prof. Me. Ábner Lucas

Prof. Me. Ábner Lucas

Docente da Disciplina de Computação Gráfica / Programação Web

Instituto Federal de Educação, Ciência e Tecnologia do Pará (IFPA) — Campus Breves.
Comprometido com o ensino prático de tecnologias abertas, computação visual e desenvolvimento web moderno na região do Marajó.