| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Explorador Terrestre | Visualização 3D do Planeta</title> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Roboto', sans-serif; |
| } |
| body { |
| overflow: hidden; |
| background: #121212; |
| color: #fff; |
| } |
| #earth-container { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 1; |
| } |
| .ui-panel { |
| position: fixed; |
| background: rgba(0, 0, 0, 0.7); |
| border-radius: 10px; |
| padding: 15px; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
| backdrop-filter: blur(10px); |
| z-index: 100; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| #search-panel { |
| top: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 450px; |
| max-width: 90%; |
| transition: all 0.3s ease; |
| } |
| #search-panel:focus-within { |
| transform: translateX(-50%) scale(1.02); |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); |
| } |
| #search-box { |
| width: 100%; |
| padding: 12px 20px; |
| border-radius: 30px; |
| border: none; |
| background: rgba(255, 255, 255, 0.95); |
| font-size: 16px; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); |
| color: #333; |
| transition: all 0.3s ease; |
| } |
| #search-box:focus { |
| outline: none; |
| background: white; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
| } |
| #search-results { |
| max-height: 300px; |
| overflow-y: auto; |
| margin-top: 15px; |
| display: none; |
| border-radius: 8px; |
| background: rgba(30, 30, 30, 0.9); |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
| } |
| .search-item { |
| padding: 12px 15px; |
| border-radius: 8px; |
| margin: 5px; |
| cursor: pointer; |
| transition: all 0.2s; |
| display: flex; |
| align-items: center; |
| background: rgba(255, 255, 255, 0.05); |
| } |
| .search-item:hover { |
| background: rgba(65, 105, 225, 0.3); |
| transform: translateX(2px); |
| } |
| .search-item i { |
| margin-right: 12px; |
| min-width: 20px; |
| text-align: center; |
| color: #4CAF50; |
| } |
| #controls-panel { |
| bottom: 25px; |
| left: 25px; |
| display: flex; |
| gap: 8px; |
| } |
| .control-btn { |
| background: rgba(255, 255, 255, 0.1); |
| border: none; |
| color: white; |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| cursor: pointer; |
| transition: all 0.2s; |
| font-size: 18px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| } |
| .control-btn:hover { |
| background: rgba(255, 255, 255, 0.25); |
| transform: scale(1.1); |
| } |
| .control-btn.active { |
| background: #4CAF50; |
| transform: scale(1.1); |
| } |
| .control-btn i { |
| pointer-events: none; |
| } |
| #info-panel { |
| bottom: 25px; |
| right: 25px; |
| width: 300px; |
| padding: 20px; |
| } |
| .info-row { |
| display: flex; |
| justify-content: space-between; |
| padding: 10px 0; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| .info-row:last-child { |
| border-bottom: none; |
| } |
| .info-label { |
| color: #aaa; |
| font-size: 14px; |
| } |
| .info-value { |
| font-weight: 500; |
| color: #fff; |
| font-size: 15px; |
| } |
| #loading-screen { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: #121212; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| z-index: 1000; |
| transition: opacity 0.5s; |
| } |
| .loading-spinner { |
| width: 60px; |
| height: 60px; |
| border: 6px solid rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| border-top-color: #4CAF50; |
| animation: spin 1.2s linear infinite; |
| margin-bottom: 25px; |
| } |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| #loading-text { |
| color: #fff; |
| margin-top: 20px; |
| font-size: 18px; |
| text-align: center; |
| max-width: 80%; |
| } |
| #layer-panel { |
| top: 25px; |
| right: 25px; |
| width: 220px; |
| } |
| .panel-title { |
| margin-bottom: 15px; |
| color: #4CAF50; |
| font-size: 16px; |
| font-weight: 500; |
| display: flex; |
| align-items: center; |
| } |
| .panel-title i { |
| margin-right: 10px; |
| } |
| .layer-option { |
| display: flex; |
| align-items: center; |
| padding: 12px 15px; |
| cursor: pointer; |
| border-radius: 8px; |
| margin: 5px 0; |
| transition: all 0.2s; |
| background: rgba(255, 255, 255, 0.05); |
| } |
| .layer-option:hover { |
| background: rgba(255, 255, 255, 0.15); |
| } |
| .layer-option.active { |
| background: rgba(76, 175, 80, 0.2); |
| } |
| .layer-option i { |
| margin-right: 12px; |
| width: 20px; |
| text-align: center; |
| color: #4CAF50; |
| } |
| #overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.7); |
| display: none; |
| z-index: 500; |
| backdrop-filter: blur(5px); |
| } |
| #location-details { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| background: rgba(20, 20, 20, 0.95); |
| border-radius: 12px; |
| padding: 25px; |
| width: 550px; |
| max-width: 90%; |
| max-height: 80vh; |
| overflow-y: auto; |
| z-index: 600; |
| display: none; |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| .details-header { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 20px; |
| padding-bottom: 15px; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.2); |
| align-items: center; |
| } |
| .details-header h3 { |
| font-size: 22px; |
| font-weight: 500; |
| } |
| .close-btn { |
| background: none; |
| border: none; |
| color: #aaa; |
| font-size: 24px; |
| cursor: pointer; |
| transition: color 0.2s; |
| padding: 5px; |
| } |
| .close-btn:hover { |
| color: white; |
| transform: scale(1.1); |
| } |
| .details-image { |
| width: 100%; |
| height: 220px; |
| background-size: cover; |
| background-position: center; |
| border-radius: 8px; |
| margin-bottom: 20px; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
| } |
| #location-description { |
| color: #ddd; |
| line-height: 1.6; |
| margin-bottom: 20px; |
| } |
| .location-stats { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 15px; |
| } |
| .location-stat { |
| background: rgba(255, 255, 255, 0.05); |
| padding: 12px; |
| border-radius: 8px; |
| } |
| .stat-label { |
| color: #aaa; |
| font-size: 13px; |
| margin-bottom: 5px; |
| } |
| .stat-value { |
| font-weight: 500; |
| font-size: 15px; |
| } |
| #compass { |
| position: fixed; |
| top: 25px; |
| left: 25px; |
| width: 65px; |
| height: 65px; |
| background: rgba(0, 0, 0, 0.7); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 100; |
| border: 2px solid rgba(255, 255, 255, 0.1); |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
| } |
| .compass-arrow { |
| font-size: 28px; |
| transition: transform 0.2s; |
| color: #4CAF50; |
| } |
| #zoom-controls { |
| position: fixed; |
| right: 25px; |
| bottom: 160px; |
| display: flex; |
| flex-direction: column; |
| background: rgba(0, 0, 0, 0.7); |
| border-radius: 30px; |
| padding: 10px 6px; |
| z-index: 100; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| .zoom-btn { |
| background: rgba(255, 255, 255, 0.1); |
| border: none; |
| color: white; |
| width: 45px; |
| height: 45px; |
| border-radius: 50%; |
| margin: 5px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 20px; |
| transition: all 0.2s; |
| } |
| .zoom-btn:hover { |
| background: rgba(255, 255, 255, 0.2); |
| transform: scale(1.1); |
| } |
| #time-controls { |
| position: fixed; |
| top: 25px; |
| left: 120px; |
| width: 280px; |
| z-index: 100; |
| } |
| #time-slider { |
| width: 100%; |
| margin-top: 15px; |
| -webkit-appearance: none; |
| height: 6px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 3px; |
| outline: none; |
| } |
| #time-slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 18px; |
| height: 18px; |
| background: #4CAF50; |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| .time-display-container { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 8px; |
| } |
| .time-label { |
| display: flex; |
| align-items: center; |
| font-size: 14px; |
| color: #aaa; |
| } |
| .time-label i { |
| margin-right: 8px; |
| color: #4CAF50; |
| } |
| #time-display { |
| font-weight: 500; |
| } |
| @media (max-width: 768px) { |
| #search-panel { |
| width: 90%; |
| } |
| |
| #layer-panel, #time-controls { |
| top: 80px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 90%; |
| } |
| |
| #controls-panel { |
| bottom: 80px; |
| left: 50%; |
| transform: translateX(-50%); |
| } |
| |
| #compass { |
| top: auto; |
| bottom: 180px; |
| left: 50%; |
| transform: translateX(-50%); |
| } |
| |
| #zoom-controls { |
| right: 50%; |
| transform: translateX(50%); |
| bottom: 300px; |
| flex-direction: row; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div id="loading-screen"> |
| <div class="loading-spinner"></div> |
| <h2 style="color: #fff; margin-bottom: 10px;">Explorador Terrestre</h2> |
| <p id="loading-text">Inicializando renderizador 3D...</p> |
| </div> |
|
|
| <div id="earth-container"></div> |
|
|
| <div id="compass"> |
| <i class="compass-arrow fas fa-arrow-up"></i> |
| <div id="compass-degrees">N</div> |
| </div> |
|
|
| <div class="ui-panel" id="search-panel"> |
| <input type="text" id="search-box" placeholder="Busque por cidades, pontos turísticos, coordenadas..." autocomplete="off"> |
| <div id="search-results"></div> |
| </div> |
|
|
| <div class="ui-panel" id="layer-panel"> |
| <div class="panel-title"><i class="fas fa-layer-group"></i> Camadas do Mapa</div> |
| <div class="layer-option active" data-layer="satellite"> |
| <i class="fas fa-satellite-dish"></i> Satélite |
| </div> |
| <div class="layer-option" data-layer="terrain"> |
| <i class="fas fa-mountain"></i> Terreno |
| </div> |
| <div class="layer-option" data-layer="roads"> |
| <i class="fas fa-road"></i> Estradas |
| </div> |
| <div class="layer-option" data-layer="night"> |
| <i class="fas fa-moon"></i> Luzes Noturnas |
| </div> |
| </div> |
|
|
| <div class="ui-panel" id="time-controls"> |
| <div class="time-display-container"> |
| <span class="time-label"><i class="fas fa-clock"></i> Hora do Dia</span> |
| <span id="time-display">12:00 PM</span> |
| </div> |
| <input type="range" id="time-slider" min="0" max="24" step="0.1" value="12"> |
| </div> |
|
|
| <div class="ui-panel" id="controls-panel"> |
| <button class="control-btn active" id="rotate-btn" title="Rotacionar"> |
| <i class="fas fa-sync-alt"></i> |
| </button> |
| <button class="control-btn" id="fly-btn" title="Modo Voo"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| <button class="control-btn" id="measure-btn" title="Medir Distância"> |
| <i class="fas fa-ruler"></i> |
| </button> |
| <button class="control-btn" id="bookmark-btn" title="Salvar Local"> |
| <i class="fas fa-bookmark"></i> |
| </button> |
| </div> |
|
|
| <div id="zoom-controls"> |
| <button class="zoom-btn" id="zoom-in" title="Aproximar"> |
| <i class="fas fa-plus"></i> |
| </button> |
| <button class="zoom-btn" id="zoom-out" title="Afastar"> |
| <i class="fas fa-minus"></i> |
| </button> |
| </div> |
|
|
| <div class="ui-panel" id="info-panel"> |
| <div class="info-row"> |
| <span class="info-label">Latitude</span> |
| <span class="info-value" id="latitude">0°</span> |
| </div> |
| <div class="info-row"> |
| <span class="info-label">Longitude</span> |
| <span class="info-value" id="longitude">0°</span> |
| </div> |
| <div class="info-row"> |
| <span class="info-label">Altitude</span> |
| <span class="info-value" id="altitude">35,786 km</span> |
| </div> |
| <div class="info-row"> |
| <span class="info-label">Ângulo de Visão</span> |
| <span class="info-value" id="view-angle">10°</span> |
| </div> |
| </div> |
|
|
| <div id="overlay"></div> |
|
|
| <div id="location-details"> |
| <div class="details-header"> |
| <h3 id="location-title">Detalhes do Local</h3> |
| <button class="close-btn" id="close-details">×</button> |
| </div> |
| <div class="details-image" id="location-image"></div> |
| <p id="location-description">Esta é uma descrição do local selecionado.</p> |
| <div class="location-stats"> |
| <div class="location-stat"> |
| <div class="stat-label">Coordenadas</div> |
| <div class="stat-value" id="location-coords">0°, 0°</div> |
| </div> |
| <div class="location-stat"> |
| <div class="stat-label">Elevação</div> |
| <div class="stat-value" id="location-elevation">0 m</div> |
| </div> |
| <div class="location-stat"> |
| <div class="stat-label">Tipo</div> |
| <div class="stat-value" id="location-type">Ponto Turístico</div> |
| </div> |
| <div class="location-stat"> |
| <div class="stat-label">População</div> |
| <div class="stat-value" id="location-population">-</div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const locations = [ |
| { |
| name: "Torre Eiffel", |
| lat: 48.8584, |
| lng: 2.2945, |
| type: "landmark", |
| description: "A Torre Eiffel é uma torre de treliça de ferro forjado no Champ de Mars em Paris, França. Ela recebeu o nome do engenheiro Gustave Eiffel, cuja empresa projetou e construiu a torre. Construída em 1889 como o arco de entrada para a Feira Mundial de 1889, tornou-se um ícone cultural global da França e uma das estruturas mais reconhecíveis do mundo.", |
| image: "https://images.unsplash.com/photo-1431274172761-fca41d930114?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "300 m", |
| population: "N/A", |
| country: "França" |
| }, |
| { |
| name: "Estátua da Liberdade", |
| lat: 40.6892, |
| lng: -74.0445, |
| type: "landmark", |
| description: "A Estátua da Liberdade é uma colossal escultura neoclássica na Ilha da Liberdade no porto de Nova York. A estátua foi projetada pelo escultor francês Frédéric Auguste Bartholdi e sua estrutura metálica foi construída por Gustave Eiffel. A estátua foi dedicada em 28 de outubro de 1886 como um presente dos Estados Unidos para o povo da França.", |
| image: "https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "93 m", |
| population: "N/A", |
| country: "Estados Unidos" |
| }, |
| { |
| name: "Grande Pirâmide de Gizé", |
| lat: 29.9792, |
| lng: 31.1342, |
| type: "landmark", |
| description: "A Grande Pirâmide de Gizé é a mais antiga e maior das pirâmides no complexo de pirâmides de Gizé, no Egito. É a mais antiga das Sete Maravilhas do Mundo Antigo e a única que permanece em grande parte intacta. Egiptólogos acreditam que foi construída como um túmulo para o faraó Khufu da Quarta Dinastia Egípcia ao longo de um período de 20 anos, concluído por volta de 2560 AEC.", |
| image: "https://images.unsplash.com/photo-1503177119275-0ee32b63fb8a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "138 m", |
| population: "N/A", |
| country: "Egito" |
| }, |
| { |
| name: "Monte Everest", |
| lat: 27.9881, |
| lng: 86.9250, |
| type: "mountain", |
| description: "O Monte Everest é a montanha mais alta acima do nível do mar, localizada na sub-cordilheira Mahalangur Himal dos Himalaias. A fronteira China-Nepal atravessa seu ponto de cume. Sua elevação de 8.848,86 m foi estabelecida mais recentemente em 2020 pelas autoridades chinesas e nepalesas. O Everest atrai muitos alpinistas, incluindo montanhistas altamente experientes.", |
| image: "https://images.unsplash.com/photo-1587135991091-082eebf57ffc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "8.848 m", |
| population: "N/A", |
| country: "Nepal/China" |
| }, |
| { |
| name: "Casa da Ópera de Sydney", |
| lat: -33.8568, |
| lng: 151.2153, |
| type: "landmark", |
| description: "A Casa da Ópera de Sydney é um centro de artes cênicas de múltiplos locais no porto de Sydney, Nova Gales do Sul, Austrália. É um dos edifícios mais famosos e distintos do século XX. Projetado pelo arquiteto dinamarquês Jørn Utzon, o local foi formalmente inaugurado em 20 de outubro de 1973 após um período de gestação começando com a seleção de Utzon como vencedor de uma competição internacional de design em 1957.", |
| image: "https://images.unsplash.com/photo-1524820197278-540916411e20?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "20 m", |
| population: "N/A", |
| country: "Austrália" |
| }, |
| { |
| name: "Nova York", |
| lat: 40.7128, |
| lng: -74.0060, |
| type: "city", |
| description: "A cidade de Nova York compreende 5 distritos situados onde o rio Hudson encontra o Oceano Atlântico. Em seu núcleo está Manhattan, um distrito densamente povoado que está entre os principais centros comerciais, financeiros e culturais do mundo. Seus locais icônicos incluem arranha-céus como o Empire State Building e o vasto Central Park. O teatro da Broadway é encenado na Times Square iluminada por neon.", |
| image: "https://images.unsplash.com/photo-1485871981521-5b1fd3805eee?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "10 m", |
| population: "8,4 milhões", |
| country: "Estados Unidos" |
| }, |
| { |
| name: "Tóquio", |
| lat: 35.6762, |
| lng: 139.6503, |
| type: "city", |
| description: "Tóquio, a movimentada capital do Japão, mistura o ultramoderno e o tradicional, desde arranha-céus iluminados por neon até templos históricos. O opulento Santuário Xintoísta Meiji é conhecido por seu portão imponente e pelas florestas ao redor. O Palácio Imperial fica em meio a grandes jardins públicos. Os muitos museus da cidade oferecem exposições que vão desde arte clássica até um teatro kabuki reconstruído.", |
| image: "https://images.unsplash.com/photo-1542051841857-5f90071e7989?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "40 m", |
| population: "13,9 milhões", |
| country: "Japão" |
| }, |
| { |
| name: "Grand Canyon", |
| lat: 36.1069, |
| lng: -112.1129, |
| type: "natural", |
| description: "O Grand Canyon no Arizona é uma formação natural distinguida por faixas estratificadas de rocha vermelha, revelando milhões de anos de história geológica em corte transversal. Vasto em escala, o cânion tem em média 16 km de largura e 1,6 km de profundidade ao longo de seus 446 km de comprimento. Grande parte da área é um parque nacional, com corredeiras do rio Colorado e vistas panorâmicas.", |
| image: "https://images.unsplash.com/photo-1509316785289-025107a2dc08?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "2.600 m", |
| population: "N/A", |
| country: "Estados Unidos" |
| }, |
| { |
| name: "Floresta Amazônica", |
| lat: -3.4653, |
| lng: -62.2159, |
| type: "natural", |
| description: "A Floresta Amazônica, cobrindo grande parte do noroeste do Brasil e estendendo-se para Colômbia, Peru e outros países sul-americanos, é a maior floresta tropical do mundo, famosa por sua biodiversidade. Ela é cruzada por milhares de rios, incluindo o poderoso Amazonas. Cidades ribeirinhas, com arquitetura do século XIX dos dias de boom da borracha, incluem Manaus e Belém no Brasil e Leticia na Colômbia.", |
| image: "https://images.unsplash.com/photo-1584696049838-8e39294120e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "100 m", |
| population: "N/A", |
| country: "Brasil" |
| }, |
| { |
| name: "Grande Barreira de Corais", |
| lat: -18.2871, |
| lng: 147.6992, |
| type: "natural", |
| description: "A Grande Barreira de Corais é o maior sistema de recifes de coral do mundo, composto por mais de 2.900 recifes individuais e 900 ilhas se estendendo por mais de 2.300 quilômetros em uma área de aproximadamente 344.400 quilômetros quadrados. O recife está localizado no Mar de Coral, na costa de Queensland, Austrália.", |
| image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", |
| elevation: "Nível do mar", |
| population: "N/A", |
| country: "Austrália" |
| } |
| ]; |
| |
| let scene, camera, renderer, earthMesh, cloudsMesh; |
| let controls, pointOfInterest, isRotating = true; |
| let currentLat = 0, currentLng = 0, currentZoom = 35.786; |
| let selectedLocation = null; |
| |
| function init() { |
| updateLoadingText("Criando cena 3D..."); |
| |
| |
| scene = new THREE.Scene(); |
| scene.background = new THREE.Color(0x000000); |
| |
| |
| camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); |
| camera.position.z = 15; |
| |
| |
| renderer = new THREE.WebGLRenderer({ |
| antialias: true, |
| powerPreference: "high-performance", |
| logarithmicDepthBuffer: true |
| }); |
| renderer.setPixelRatio(window.devicePixelRatio || 1); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| renderer.shadowMap.enabled = true; |
| renderer.shadowMap.type = THREE.PCFSoftShadowMap; |
| renderer.gammaOutput = true; |
| renderer.gammaFactor = 2.2; |
| document.getElementById('earth-container').appendChild(renderer.domElement); |
| |
| |
| const ambientLight = new THREE.AmbientLight(0x404040, 1.5); |
| scene.add(ambientLight); |
| |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); |
| directionalLight.position.set(5, 3, 5); |
| directionalLight.castShadow = true; |
| directionalLight.shadow.mapSize.width = 2048; |
| directionalLight.shadow.mapSize.height = 2048; |
| scene.add(directionalLight); |
| |
| const light = new THREE.PointLight(0xffffff, 0.2); |
| light.position.set(0, 20, 0); |
| scene.add(light); |
| |
| controls = new THREE.OrbitControls(camera, renderer.domElement); |
| controls.enableDamping = true; |
| controls.dampingFactor = 0.05; |
| controls.rotateSpeed = 0.5; |
| controls.minDistance = 5; |
| controls.maxDistance = 50; |
| controls.maxPolarAngle = Math.PI; |
| controls.minPolarAngle = 0; |
| |
| updateLoadingText("Carregando texturas da Terra..."); |
| |
| |
| createEarth(); |
| |
| |
| createStars(); |
| |
| |
| setupUI(); |
| |
| |
| animate(); |
| |
| |
| setTimeout(() => { |
| document.getElementById('loading-screen').style.opacity = '0'; |
| setTimeout(() => { |
| document.getElementById('loading-screen').style.display = 'none'; |
| }, 500); |
| }, 1500); |
| } |
| |
| function createEarth() { |
| const radius = 5; |
| const geometry = new THREE.SphereGeometry(radius, 128, 128); |
| |
| |
| const textureLoader = new THREE.TextureLoader(); |
| |
| const earthMaterial = new THREE.MeshStandardMaterial({ |
| map: textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg'), |
| bumpMap: textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg'), |
| bumpScale: 0.05, |
| roughnessMap: textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg'), |
| metalness: 0.1, |
| roughness: 0.8, |
| displacementScale: 0.1 |
| }); |
| |
| earthMesh = new THREE.Mesh(geometry, earthMaterial); |
| earthMesh.castShadow = true; |
| earthMesh.receiveShadow = true; |
| scene.add(earthMesh); |
| |
| |
| const cloudsGeometry = new THREE.SphereGeometry(radius * 1.005, 128, 128); |
| const cloudsMaterial = new THREE.MeshStandardMaterial({ |
| map: textureLoader.load('https://threejs.org/examples/textures/planets/earth_clouds_1024.png'), |
| transparent: true, |
| opacity: 0.3, |
| alphaMap: textureLoader.load('https://threejs.org/examples/textures/planets/earth_clouds_1024.png'), |
| side: THREE.DoubleSide, |
| blending: THREE.AdditiveBlending |
| }); |
| |
| cloudsMesh = new THREE.Mesh(cloudsGeometry, cloudsMaterial); |
| scene.add(cloudsMesh); |
| |
| |
| const waterGeometry = new THREE.SphereGeometry(radius, 128, 128); |
| const waterMaterial = new THREE.MeshStandardMaterial({ |
| color: 0x44aadd, |
| transparent: true, |
| opacity: 0.2, |
| metalness: 0.7, |
| roughness: 0.1, |
| side: THREE.DoubleSide |
| }); |
| |
| const waterMesh = new THREE.Mesh(waterGeometry, waterMaterial); |
| scene.add(waterMesh); |
| } |
| |
| function createStars() { |
| const starsGeometry = new THREE.BufferGeometry(); |
| const starsMaterial = new THREE.PointsMaterial({ |
| color: 0xffffff, |
| size: 0.15, |
| sizeAttenuation: true, |
| transparent: true |
| }); |
| |
| const starsVertices = []; |
| for (let i = 0; i < 10000; i++) { |
| const x = (Math.random() - 0.5) * 2000; |
| const y = (Math.random() - 0.5) * 2000; |
| const z = (Math.random() - 0.5) * 2000; |
| starsVertices.push(x, y, z); |
| } |
| |
| starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3)); |
| const stars = new THREE.Points(starsGeometry, starsMaterial); |
| scene.add(stars); |
| } |
| |
| function setupUI() { |
| |
| const searchBox = document.getElementById('search-box'); |
| const searchResults = document.getElementById('search-results'); |
| |
| let searchDebounce; |
| searchBox.addEventListener('input', function() { |
| clearTimeout(searchDebounce); |
| const query = this.value.toLowerCase().trim(); |
| |
| if (query.length < 2) { |
| searchResults.style.display = 'none'; |
| return; |
| } |
| |
| searchDebounce = setTimeout(() => { |
| const results = locations.filter(loc => |
| loc.name.toLowerCase().includes(query) || |
| loc.description.toLowerCase().includes(query) || |
| loc.country.toLowerCase().includes(query) || |
| loc.type.toLowerCase().includes(query) |
| ); |
| |
| if (results.length > 0) { |
| searchResults.innerHTML = results.map(loc => ` |
| <div class="search-item" data-lat="${loc.lat}" data-lng="${loc.lng}" data-name="${loc.name}"> |
| <i class="fas fa-${getLocationIcon(loc.type)}"></i> |
| <div> |
| <div style="font-weight:500;">${loc.name}</div> |
| <div style="font-size:12px;color:#aaa;">${loc.country} • ${loc.type.charAt(0).toUpperCase() + loc.type.slice(1)}</div> |
| </div> |
| </div> |
| `).join(''); |
| |
| |
| document.querySelectorAll('.search-item').forEach(item => { |
| item.addEventListener('click', function() { |
| const lat = parseFloat(this.getAttribute('data-lat')); |
| const lng = parseFloat(this.getAttribute('data-lng')); |
| const name = this.getAttribute('data-name'); |
| |
| flyToLocation(lat, lng); |
| showLocationDetails(name); |
| |
| searchResults.style.display = 'none'; |
| searchBox.value = ''; |
| }); |
| }); |
| |
| searchResults.style.display = 'block'; |
| } else { |
| searchResults.innerHTML = '<div style="padding:15px;color:#aaa;text-align:center;">Nenhum resultado encontrado<br><small>Tente um termo diferente</small></div>'; |
| searchResults.style.display = 'block'; |
| } |
| }, 300); |
| }); |
| |
| |
| document.addEventListener('click', function(e) { |
| if (!searchBox.contains(e.target) && !searchResults.contains(e.target)) { |
| searchResults.style.display = 'none'; |
| } |
| }); |
| |
| |
| document.getElementById('rotate-btn').addEventListener('click', function() { |
| isRotating = true; |
| this.classList.add('active'); |
| document.getElementById('fly-btn').classList.remove('active'); |
| controls.enableRotate = true; |
| controls.autoRotate = true; |
| controls.autoRotateSpeed = 0.5; |
| }); |
| |
| document.getElementById('fly-btn').addEventListener('click', function() { |
| isRotating = false; |
| this.classList.add('active'); |
| document.getElementById('rotate-btn').classList.remove('active'); |
| controls.autoRotate = false; |
| }); |
| |
| |
| document.getElementById('zoom-in').addEventListener('click', function() { |
| animateCameraPosition(camera.position.z * 0.8); |
| }); |
| |
| document.getElementById('zoom-out').addEventListener('click', function() { |
| animateCameraPosition(camera.position.z * 1.2); |
| }); |
| |
| |
| document.querySelectorAll('.layer-option').forEach(option => { |
| option.addEventListener('click', function() { |
| document.querySelectorAll('.layer-option').forEach(opt => opt.classList.remove('active')); |
| this.classList.add('active'); |
| |
| |
| console.log('Camada alterada para:', this.dataset.layer); |
| |
| |
| showToast(`Mudou para visualização ${this.dataset.layer}`); |
| }); |
| }); |
| |
| |
| const timeSlider = document.getElementById('time-slider'); |
| timeSlider.addEventListener('input', function() { |
| updateTimeOfDay(this.value); |
| }); |
| |
| |
| document.getElementById('close-details').addEventListener('click', function() { |
| document.getElementById('overlay').style.display = 'none'; |
| document.getElementById('location-details').style.display = 'none'; |
| }); |
| |
| |
| window.addEventListener('resize', function() { |
| camera.aspect = window.innerWidth / window.innerHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| }); |
| |
| |
| renderer.domElement.addEventListener('click', function(event) { |
| if (event.target === renderer.domElement) { |
| const randomLoc = locations[Math.floor(Math.random() * locations.length)]; |
| flyToLocation(randomLoc.lat, randomLoc.lng); |
| setTimeout(() => { |
| showLocationDetails(randomLoc.name); |
| }, 1000); |
| } |
| }); |
| |
| |
| document.getElementById('bookmark-btn').addEventListener('click', function() { |
| if (selectedLocation) { |
| showToast(`${selectedLocation.name} salvo nos favoritos`); |
| } else { |
| showToast(`Nenhum local selecionado para favoritar`); |
| } |
| }); |
| |
| |
| document.getElementById('measure-btn').addEventListener('click', function() { |
| showToast(`Ferramenta de medição ativada - clique em dois pontos no globo`); |
| |
| }); |
| |
| |
| updateTimeOfDay(timeSlider.value); |
| } |
| |
| function getLocationIcon(type) { |
| switch(type) { |
| case 'city': return 'city'; |
| case 'mountain': return 'mountain'; |
| case 'natural': return 'tree'; |
| default: return 'landmark'; |
| } |
| } |
| |
| function flyToLocation(lat, lng, duration = 1000) { |
| |
| const phi = (90 - lat) * (Math.PI / 180); |
| const theta = (180 - lng) * (Math.PI / 180); |
| |
| |
| const radius = camera.position.distanceTo(new THREE.Vector3(0, 0, 0)); |
| const targetPosition = new THREE.Vector3( |
| radius * Math.sin(phi) * Math.cos(theta), |
| radius * Math.cos(phi), |
| radius * Math.sin(phi) * Math.sin(theta) |
| ); |
| |
| |
| const startPosition = camera.position.clone(); |
| const startTime = Date.now(); |
| |
| |
| function animateFlight() { |
| const elapsed = Date.now() - startTime; |
| const progress = Math.min(elapsed / duration, 1); |
| |
| |
| const easedProgress = progress < 0.5 ? |
| 2 * progress * progress : |
| 1 - Math.pow(-2 * progress + 2, 2) / 2; |
| |
| |
| camera.position.lerpVectors(startPosition, targetPosition, easedProgress); |
| camera.lookAt(0, 0, 0); |
| |
| |
| if (progress < 1) { |
| requestAnimationFrame(animateFlight); |
| } else { |
| |
| currentLat = lat; |
| currentLng = lng; |
| updateInfoPanel(); |
| } |
| } |
| |
| |
| animateFlight(); |
| |
| |
| selectedLocation = locations.find(loc => loc.lat === lat && loc.lng === lng); |
| |
| |
| if (selectedLocation) { |
| setTimeout(() => { |
| showToast(`Chegou em ${selectedLocation.name}`); |
| }, duration); |
| } |
| |
| |
| controls.enableDamping = true; |
| } |
| |
| function animateCameraPosition(targetZ) { |
| const startZ = camera.position.z; |
| const startTime = Date.now(); |
| const duration = 500; |
| |
| function animateZoom() { |
| const elapsed = Date.now() - startTime; |
| const progress = Math.min(elapsed / duration, 1); |
| |
| |
| const easedProgress = -1 * progress * (progress - 2); |
| |
| camera.position.z = startZ + (targetZ - startZ) * easedProgress; |
| |
| if (progress < 1) { |
| requestAnimationFrame(animateZoom); |
| } |
| } |
| |
| animateZoom(); |
| } |
| |
| function showLocationDetails(name) { |
| const location = locations.find(loc => loc.name === name); |
| if (!location) return; |
| |
| |
| document.getElementById('location-title').textContent = location.name; |
| document.getElementById('location-description').textContent = location.description; |
| document.getElementById('location-image').style.backgroundImage = `url(${location.image})`; |
| document.getElementById('location-coords').textContent = |
| `${Math.abs(location.lat).toFixed(4)}° ${location.lat > 0 ? 'N' : 'S'}, ` + |
| `${Math.abs(location.lng).toFixed(4)}° ${location.lng > 0 ? 'E' : 'W'}`; |
| document.getElementById('location-elevation').textContent = location.elevation; |
| document.getElementById('location-type').textContent = |
| location.type.charAt(0).toUpperCase() + location.type.slice(1); |
| document.getElementById('location-population').textContent = location.population; |
| |
| |
| document.getElementById('overlay').style.display = 'block'; |
| document.getElementById('location-details').style.display = 'block'; |
| |
| selectedLocation = location; |
| } |
| |
| function updateTimeOfDay(hour) { |
| |
| const period = hour >= 12 ? 'PM' : 'AM'; |
| const displayHour = hour % 12 === 0 ? 12 : hour % 12; |
| const minutes = Math.floor((hour % 1) * 60).toString().padStart(2, '0'); |
| document.getElementById('time-display').textContent = `${displayHour}:${minutes} ${period}`; |
| |
| |
| const normalizedHour = parseFloat(hour) / 24; |
| earthMesh.rotation.y = normalizedHour * Math.PI * 2; |
| |
| |
| const ambientIntensity = Math.abs((normalizedHour - 0.25) % 1 - 0.5) * 2; |
| scene.children.forEach(child => { |
| if (child instanceof THREE.AmbientLight) { |
| child.intensity = ambientIntensity * 0.8 + 0.5; |
| } |
| }); |
| } |
| |
| function updateInfoPanel() { |
| const spherical = new THREE.Spherical(); |
| spherical.setFromVector3(camera.position); |
| |
| |
| const lat = 90 - (spherical.phi * 180 / Math.PI); |
| const lng = -180 + (spherical.theta * 180 / Math.PI); |
| |
| |
| document.getElementById('latitude').textContent = `${Math.abs(lat).toFixed(2)}° ${lat > 0 ? 'N' : 'S'}`; |
| document.getElementById('longitude').textContent = `${Math.abs(lng).toFixed(2)}° ${lng > 0 ? 'E' : 'W'}`; |
| |
| |
| const alt = (camera.position.distanceTo(new THREE.Vector3(0, 0, 0)) - 5) * 6371; |
| let altitudeText; |
| |
| if (alt < 0.1) { |
| altitudeText = `${(alt).toFixed(0)} m`; |
| } else if (alt < 1000) { |
| altitudeText = `${(alt).toFixed(2)} km`; |
| } else { |
| altitudeText = `${(alt).toFixed(0)} km`; |
| } |
| document.getElementById('altitude').textContent = altitudeText; |
| |
| |
| const viewAngle = Math.atan(5 / camera.position.distanceTo(new THREE.Vector3(0, 0, 0))) * 180 / Math.PI; |
| document.getElementById('view-angle').textContent = `${viewAngle.toFixed(1)}°`; |
| |
| |
| updateCompass(lng); |
| |
| currentLat = lat; |
| currentLng = lng; |
| currentZoom = alt; |
| } |
| |
| function updateCompass(degree) { |
| const arrow = document.querySelector('.compass-arrow'); |
| const compassDegrees = document.getElementById('compass-degrees'); |
| |
| |
| degree = (degree % 360 + 360) % 360; |
| |
| |
| arrow.style.transform = `rotateZ(${-degree}deg)`; |
| |
| |
| const directions = ['N', 'NE', 'L', 'SE', 'S', 'SO', 'O', 'NO']; |
| const dirIndex = Math.round(((degree % 360) / 45)) % 8; |
| compassDegrees.textContent = directions[dirIndex]; |
| } |
| |
| function showToast(message) { |
| const toast = document.createElement('div'); |
| toast.style.position = 'fixed'; |
| toast.style.bottom = '20px'; |
| toast.style.left = '50%'; |
| toast.style.transform = 'translateX(-50%)'; |
| toast.style.backgroundColor = 'rgba(0,0,0,0.8)'; |
| toast.style.color = 'white'; |
| toast.style.padding = '10px 20px'; |
| toast.style.borderRadius = '20px'; |
| toast.style.zIndex = '1000'; |
| toast.style.opacity = '0'; |
| toast.style.transition = 'opacity 0.3s'; |
| toast.textContent = message; |
| |
| document.body.appendChild(toast); |
| |
| setTimeout(() => { |
| toast.style.opacity = '1'; |
| }, 10); |
| |
| setTimeout(() => { |
| toast.style.opacity = '0'; |
| setTimeout(() => { |
| toast.remove(); |
| }, 300); |
| }, 3000); |
| } |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| |
| if (isRotating) { |
| earthMesh.rotation.y += 0.0005; |
| cloudsMesh.rotation.y += 0.0006; |
| } |
| |
| controls.update(); |
| updateInfoPanel(); |
| renderer.render(scene, camera); |
| } |
| |
| function updateLoadingText(text) { |
| document.getElementById('loading-text').textContent = text; |
| } |
| |
| |
| window.onload = init; |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Feito com <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Ravisil/earth" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
