3D & Modelagem
Claude 3.5 Sonnet
Grafo de Rede Interativo com Partículas em Three.js (dados JSON)
Visualização 3D de grafo (nós e arestas) a partir de um JSON, com força de repulsão, hover destacando conexões e clique mostrando detalhes.
0cópias
0joinhas
0favoritos
O prompt
Crie uma visualização 3D interativa de grafo em Three.js (CDN r128) que lê dados de {{url_dados_json}}.
Parâmetros:
- URL do JSON (formato {nodes:[{id,label,grupo}], links:[{source,target}]}): {{url_dados_json}}
- Cor por Grupo: usar paleta automática distinta para cada grupo
- Força de Repulsão Inicial: {{forca_repulsao}}
Requisitos:
1. Layout em 3D com simulação simples de forças (repulsão entre nós + atração nas arestas), estabilizando em ~200 iterações antes do primeiro frame.
2. Nós como esferas (tamanho proporcional ao grau do nó) coloridas por grupo; arestas como linhas finas semitransparentes.
3. Raycasting no hover: destaca o nó sob o cursor + suas conexões diretas (escurecendo o resto) e mostra tooltip com {{label}}.
4. Clique em um nó abre um painel lateral fixo com id, grupo, grau e lista de vizinhos clicáveis (clicar num vizinho recentra a câmera nele).
5. Câmera orbital (arrastar/zoom), fundo escuro (#0b1020) e leve efeito de profundidade (fog).
6. Se o JSON falhar, exibir mensagem amigável com o formato esperado.
Como usar
- Prepare seu JSON no formato {nodes:[{id,label,grupo}], links:[{source,target}]} e hospede em uma URL pública (ou use um arquivo local servido por HTTP).
- Substitua {{url_dados_json}} e {{forca_repulsao}} (número; 50-200 funciona bem para <300 nós).
- Cole no Claude; salve como grafo.html e abra via servidor local (ex.: npx serve) — CORS bloqueia fetch de file://.
- Para dados grandes (>1000 nós), peça: 'troque as esferas por pontos com PointsMaterial' — a IA adapta mantendo o interativo.
Exemplo de saída
grafo.html (~230 linhas): simulação de forças (repulsão + molas nas arestas) estabilizada em 200 iterações, nós-esfera com tamanho proporcional ao grau e cor por grupo, raycasting no hover destacando conexões diretas com tooltip, painel lateral com vizinhos clicáveis recentrando a câmera, OrbitControls + fog de profundidade sobre fundo #0b1020.