Editor 3D

O que é o Editor 3D Online?

O Editor 3D Online é uma ferramenta de modelagem tridimensional que roda inteiramente no navegador — sem instalação, sem cadastro, sem plugins. Basta abrir a página e começar a criar. Por baixo dos panos, o editor usa WebGL acelerado pela GPU via Three.js, a biblioteca JavaScript de renderização 3D mais popular do mundo, com mais de 100 mil estrelas no GitHub.

A proposta é oferecer uma experiência semelhante a ferramentas como SketchUp ou TinkerCAD diretamente na web, ideal para protótipos rápidos, visualizações de produtos, maquetes digitais, cenas para jogos e ensino de modelagem 3D.

Espaço de trabalho

Ao abrir o editor você encontra três regiões principais:

• Barra lateral esquerda — botões para adicionar primitivos e alterar o modo de transformação
• Viewport central — onde a cena 3D é renderizada em tempo real
• Painel de propriedades direito — exibe posição, rotação, escala, cor e wireframe do objeto selecionado

No canto inferior direito do viewport há um gizmo de orientação — um indicador colorido com os eixos X (vermelho), Y (verde) e Z (azul) que gira em sincronia com a câmera, ajudando você a nunca perder a noção de onde está no espaço 3D.

Sistema de coordenadas e eixos

O editor usa o sistema de coordenadas padrão do Three.js:

• Eixo X (vermelho) — aponta para a direita
• Eixo Y (verde) — aponta para cima
• Eixo Z (azul) — aponta para fora da tela (em direção ao observador)

A grade branca no plano XZ serve como chão de referência. Todo objeto criado nasce próximo à origem (0, 0, 0) e pode ser movido livremente.

O gizmo de orientação no canto da viewport espelha a rotação da câmera principal em tempo real. Ele é especialmente útil quando você está orbitando rapidamente e perde a referência de qual direção é “frente”.

Controles da câmera

A câmera usa OrbitControls — o sistema de navegação mais intuitivo para visualização 3D:

A câmera orbita em torno de um ponto focal central com damping suave — ela desacelera gradualmente ao soltar o botão, dando uma sensação mais natural. O zoom tem limites mínimo e máximo para evitar que você se perca dentro dos objetos ou saia da cena.

Primitivos disponíveis

Os primitivos são as formas básicas com as quais toda modelagem começa. O editor oferece seis tipos:

Cubo (Box)

O primitivo mais versátil. Uma caixa com 1×1×1 unidade. Base para paredes, mesas, construções, blocos de jogo e qualquer forma retangular.

Esfera (Sphere)

Gerada com 32 segmentos horizontais e 24 verticais — resolução suficiente para parecer suave sem pesar na GPU. Útil para planetas, bolas, cabeças, balões.

Cilindro (Cylinder)

Cilindro com raio 0,5 e altura 1,2. Colunas, tubos, pilares, copos, árvores estilizadas.

Cone

Base de raio 0,6 e altura 1,2. Telhados, chapéus, árvores de Natal, setas 3D, foguetes.

Torus

Um anel ou “donut”. Tubo com raio principal 0,55 e seção 0,2. Rodas, anéis, pneus, portais circulares, decorações.

Plano (Plane)

Um quadrado plano de 2×2 unidades. Perfeito para o chão de uma cena, superfícies d’água, telas, paredes finas.

Cada primitivo nasce com uma cor diferente, ciclando por 8 cores predefinidas: azul, laranja, verde, âmbar, rosa, roxo, vermelho e ciano. Isso facilita distinguir os objetos visualmente desde o primeiro clique.

Gizmos de transformação

Um gizmo (abreviação de gadget) é um controle visual interativo sobreposto ao objeto selecionado. O editor tem três modos de gizmo, acionados por tecla ou botão:

G — Mover (Translate)

Exibe três setas coloridas saindo do centro do objeto:

• Seta vermelha → arraste no eixo X
• Seta verde → arraste no eixo Y
• Seta azul → arraste no eixo Z
• Planos coloridos no centro → arraste em dois eixos ao mesmo tempo (XY, XZ, YZ)

R — Girar (Rotate)

Exibe arcos circulares ao redor do objeto:

• Arco vermelho → rotação em torno do eixo X
• Arco verde → rotação em torno do eixo Y
• Arco azul → rotação em torno do eixo Z
• Arco branco externo → rotação livre em relação à câmera

S — Escalar (Scale)

Exibe cubinhos nas extremidades dos eixos:

• Cubinho vermelho → escala no eixo X
• Cubinho verde → escala no eixo Y
• Cubinho azul → escala no eixo Z
• Cubo central branco → escala uniforme nos três eixos

Quando um gizmo está ativo, arrastar qualquer parte colorida move, gira ou escala o objeto ao longo do eixo correspondente. Após cada operação, o estado é salvo no histórico de desfazer.

Painel de propriedades

Com um objeto selecionado, o painel à direita exibe e permite editar:

Posição

Três campos numéricos — X, Y, Z — para posicionar o objeto no espaço com precisão. Os valores são em unidades 3D (1 unidade = o lado de um cubo padrão).

Rotação

Três campos em graus (°) para controle intuitivo. Internamente convertidos para radianos. Valores negativos e acima de 360° são aceitos.

Escala

Três campos para escala por eixo. O valor mínimo é 0,01 para evitar objetos com espessura zero que causariam artefatos de renderização.

Cor

Um seletor de cor nativo do navegador. Clique para abrir o color picker e escolher qualquer cor no espectro completo. A cor é aplicada instantaneamente ao material do objeto.

Wireframe

Um toggle que alterna entre renderização sólida e apenas arestas (wireframe). Útil para inspecionar a geometria, criar estéticas low-poly, ou sobrepor sobre outros objetos.

Seleção e detalhe de objeto

Para selecionar um objeto, clique nele no viewport. Um BoxHelper azul aparece ao redor, indicando a caixa delimitadora (bounding box). O gizmo de transformação ativo é anexado automaticamente.

Para deselecionar, clique no fundo vazio da cena ou pressione Esc.

Para navegar entre objetos, clique diretamente em cada um. Apenas um objeto pode ser selecionado por vez (seleção múltipla será adicionada na Wave 2).

Undo e Redo

O editor mantém um histórico de até 60 operações. Cada adição, exclusão, transformação ou alteração de propriedade é registrada.

Os botões Undo/Redo na toolbar ficam desabilitados quando não há ações para desfazer ou refazer, respectivamente.

Excluir e duplicar

Ao duplicar, a cópia aparece deslocada 1,5 unidades no eixo X em relação ao original, e herda geometria, material, rotação e escala. A cópia fica automaticamente selecionada.

Atalhos de teclado

Iluminação da cena

A cena usa três fontes de luz para um visual realista por padrão:

1. Luz ambiente (AmbientLight) — iluminação global suave que garante que nenhuma parte do objeto fique completamente preta
2. Luz direcional principal (DirectionalLight) — simula o sol, com sombras projetadas. A posição padrão é (8, 12, 8) — acima e à direita
3. Luz de preenchimento azulada — DirectionalLight de baixa intensidade vindo da direção oposta, criando aquele efeito de preenchimento frio típico de renders profissionais

As sombras são renderizadas com um shadow map de 2048×2048 pixels e filtro PCFSoft — suaves e sem dentes de serra. O plano de chão (invisível, mas presente) recebe as sombras projetadas pelos objetos.

Materiais

Todos os objetos usam MeshStandardMaterial — o material fisicamente correto (PBR — Physically Based Rendering) do Three.js. Ele responde à luz de forma realista:

• roughness 0,55 — superfície ligeiramente fosca (nem espelho, nem completamente opaca)
• metalness 0,05 — quase não metálico, como plástico ou madeira pintada

Na Wave 2, serão adicionados controles deslizantes para metalness, roughness e transparência, permitindo criar materiais como vidro, ouro, borracha e cromo.

Casos de uso

Prototipagem rápida de produto

Crie uma maquete 3D de um produto — uma caixa de embalagem, um brinquedo, um móvel — sem sair do navegador. Posicione, gire e ajuste proporções antes de passar para um software especializado.

Ensino de modelagem 3D

O editor é ideal para aulas introdutórias. Os alunos aprendem os conceitos de eixos X/Y/Z, transformações (translate, rotate, scale) e câmera 3D sem precisar instalar nada. O gizmo visual torna as transformações imediatamente compreensíveis.

Maquetes arquitetônicas

Combine planos e cubos para criar planta baixa em 3D. Defina paredes como cubos achatados, janelas como planos, e navegue pela cena para ter uma noção de escala e proporção.

Cenografia para jogos

Crie blockouts de cenas para jogos — a fase de modelagem cinza onde a geometria é testada antes dos materiais finais. Útil para game designers que querem validar a jogabilidade antes de enviar para os artistas.

Visualização de dados

Represente quantidades como barras 3D, crie infográficos espaciais, modele diagramas de fluxo em três dimensões.

Tecnologia

O editor usa as seguintes tecnologias de forma totalmente client-side:

• Three.js r158 — motor de renderização WebGL
• OrbitControls — sistema de câmera orbital com damping
• TransformControls — gizmos interativos de transformação
• WebGL — API do browser para renderização com aceleração de GPU
• PCFSoftShadowMap — sombras suaves por filtro de múltiplas amostras

Nenhum dado é enviado a servidores. Toda a cena existe apenas na memória do navegador. O histórico de undo/redo também é local. A cena é salva automaticamente no localStorage do navegador — ao reabrir a página, você continua de onde parou.

Exportar e Importar

Exportar GLTF

O formato GLTF (GL Transmission Format) é o padrão moderno para troca de cenas 3D. Compatível com Blender, Unity, Unreal Engine, Maya, e qualquer visualizador WebGL. O arquivo exportado inclui geometria, posição, rotação, escala e cor de cada objeto.

Exportar OBJ

O formato OBJ é um padrão antigo mas universalmente suportado. Ideal para importar em qualquer software 3D. Exporta geometria e posição; materiais são exportados em arquivo .mtl separado (não gerado nesta versão).

Importar OBJ

Carregue qualquer arquivo .obj do seu computador. Os objetos importados recebem um material cinza neutro e podem ser movidos, girados e escalados normalmente. Use Ctrl+Z para desfazer uma importação indesejada.

Exercícios para a aula de 2h

Os exercícios estão organizados em 3 níveis. Cada um tem objetivo claro, conceitos trabalhados e tempo estimado.

Nível 1 — Primeiros Passos (30 min)

Exercício 1 — Minha primeira cena Crie uma cena com pelo menos 3 tipos diferentes de primitivos (cubo, esfera e cilindro). Posicione-os lado a lado usando o modo Mover (G). Aplique uma cor diferente para cada um no painel de propriedades. Reabra a página e confirme que a cena foi restaurada.

Conceitos: adicionar primitivos · selecionar · mover · cor · localStorage

Exercício 2 — Torre e pirâmide Empilhe 3 cubos de tamanhos diferentes (use S para escalar) para criar uma torre: base larga embaixo, topo estreito. Ao lado, posicione um cone sobre um cilindro para simular uma torre medieval. Use wireframe para inspecionar a malha dos objetos.

Conceitos: escalar · empilhar · posicionamento Y · wireframe

Nível 2 — Composição (45 min)

Exercício 3 — Mesa e cadeiras Monte uma mesa: um cubo muito achatado (escala Y = 0.08) para o tampo e quatro cilindros finos como pernas. Use Ctrl+D para duplicar as pernas e posicioná-las nos quatro cantos. Ao lado, faça pelo menos uma cadeira (assento + costas + pernas). Exporte a cena como GLTF ao finalizar.

Conceitos: escala precisa · duplicar · composição · exportar GLTF

Exercício 4 — Sistema solar Crie um sistema solar: esfera grande amarela no centro (Sol), quatro esferas menores ao redor em distâncias diferentes (planetas). Varie as cores e tamanhos. Use um Torus achatado como anel de Saturno (escala Y muito baixa). Orbite a câmera para apreciar a cena de diferentes ângulos.

Conceitos: escala relativa · posicionamento orbital · composição · câmera

Nível 3 — Desafio (45 min)

Exercício 5 — Extrude challenge: prédio Crie um cubo base 1×1×1. Selecione-o e use a função Extrude +Y com valor 1.0 para aumentar a altura. Ajuste a escala X/Z para criar proporções de prédio. Adicione vários prédios de alturas diferentes numa cena urbana. Dica: use Ctrl+D para duplicar um prédio pronto e ajustar suas dimensões via extrude.

Conceitos: extrude · composição urbana · variação de escala

Exercício 6 — Robô livre Construa um robô com primitivos à sua escolha. Sugestão: cabeça (box ou sphere), corpo (cylinder), braços (cylinders finos), pernas (boxes estreitas), olhos (spheres pequenas), cinto (torus achatado). Use pelo menos 12 objetos. Exporte como GLTF e importe em outra aba para validar.

Conceitos: composição livre · escalas mistas · extrude · exportar e importar