☀️ Sun and Earth Project 🌍

Select your language / Escolha seu idioma:

• 🇬🇧 English Version
• 🇧🇷 Versão em Português

---

🇬🇧 English Version

Welcome to the Sun and Earth Project! This repository showcases a simple visualization of the sun and earth, utilizing three.js for 3D rendering.

🔗 Live Demo

Check out the live project here: Sun and Earth Visualization 🌐

📝 Table of Contents

• 🚀 Getting Started
• 📂 Folder Structure
• ✨ Features
• 📦 How to Import three.js
• 📱 Responsiveness
• 👏 Credits

🚀 Getting Started

To get this project up and running, simply open the index.html file in your web browser. No build step is required thanks to the use of ES Modules and Import Maps!

📂 Folder Structure

Here is a detailed breakdown of the folders in this repository:

• src/ 📦: Contains the main source code.
  • js/ 📜: Holds the JavaScript logic (e.g., script.js).
  • css/ 🎨: Contains the styling files (e.g., style.css).
  • assets/ 🖼️: Stores images and textures.
• .vscode/ 🛠️: Configuration settings for Visual Studio Code users.
• .idea/ 🧠: Configuration settings for JetBrains IDEs (like WebStorm or PyCharm).

✨ Features

• Interactive 3D visualization of the sun and earth.
• Responsive design for various screen sizes.

📦 How to Import three.js

This project uses a modern method called Import Maps to include three.js. This allows you to use bare module imports in your browser without a bundler.

Method used in this project (index.html):

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
  }
}
</script>

<script type="module" src="./src/js/script.js"></script>

In your JavaScript file (src/js/script.js), you can simply import it like this:

import * as THREE from 'three';

📱 Responsiveness

This project is designed with flexibility in mind.

The smaller the screen, the further the image will distance. 🔭 This dynamic camera adjustment ensures that the visualization remains fully visible and perfectly framed, whether you are viewing it on a large desktop monitor or a small mobile screen.

👏 Credits

• Logic & Infrastructure: Carlos Neto 👨‍💻
• Documentation & Text: AI Assistant 🤖

---

🇧🇷 Versão em Português

Bem-vindo ao Projeto Sol e Terra! Este repositório apresenta uma visualização simples do sol e da terra, utilizando three.js para renderização 3D.

🔗 Demonstração Online

Confira o projeto online aqui: Visualização Sol e Terra 🌐

📝 Sumário

• 🚀 Primeiros Passos
• 📂 Estrutura de Pastas
• ✨ Funcionalidades
• 📦 Como Importar three.js
• 📱 Responsividade
• 👏 Créditos

🚀 Primeiros Passos

Para rodar este projeto, basta abrir o arquivo index.html no seu navegador. Não é necessário nenhum processo de build, graças ao uso de ES Modules e Import Maps!

📂 Estrutura de Pastas

Aqui está o detalhamento das pastas neste repositório:

• src/ 📦: Contém o código-fonte principal.
  • js/ 📜: Guarda a lógica JavaScript (ex: script.js).
  • css/ 🎨: Contém os arquivos de estilo (ex: style.css).
  • assets/ 🖼️: Armazena imagens e texturas.
• .vscode/ 🛠️: Configurações para usuários do Visual Studio Code.
• .idea/ 🧠: Configurações para IDEs da JetBrains (como WebStorm ou PyCharm).

✨ Funcionalidades

• Visualização 3D interativa do sol e da terra.
• Design responsivo para diversas telas.

📦 Como Importar three.js

Este projeto utiliza um método moderno chamado Import Maps para incluir o three.js. Isso permite usar importações de módulos diretamente no navegador sem precisar de um "bundler" (empacotador).

Método utilizado neste projeto (index.html):

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
  }
}
</script>

<script type="module" src="./src/js/script.js"></script>

No seu arquivo JavaScript (src/js/script.js), você pode importar simplesmente assim:

import * as THREE from 'three';

📱 Responsividade

Este projeto foi desenhado com flexibilidade em mente.

Quanto menor a tela, mais a imagem se distanciará. 🔭 Esse ajuste dinâmico da câmera garante que a visualização permaneça totalmente visível e perfeitamente enquadrada, esteja você visualizando em um monitor grande ou na tela pequena de um celular.

👏 Créditos

• Lógica & Infraestrutura: Carlos Neto 👨‍💻
• Documentação & Texto: Assistente de IA 🤖