README.md

Menu

1. Informations générales
2. Interface de l'application
3. Accès à la démonstration en ligne
4. Liste pré-requis
5. Lancement de l'application
6. Informations importantes sur les différents fichiers et dossiers
7. Auteur et contact

Projet globe 3D

• Développement d'un globe 3D interactif sous la forme d'un compposant pour être utiliser dans React.

• Utilisation de React, Vite.js et Remix.

• Utilisation de Three.js et de Tailwind CSS.
   

• Le panneau de configuration app.addControlGui (si il est décommenté dans le fichier main.jsx ➔ (main.jsx))
  permet de modifier les paramètres suivants.
   

  • globeDotColor : Permet de changer la couleurs des Dots

  • globeMarkerColor : Permet de changer la couleurs des Marker

  • globeMarkerGlow : Permet de changer la couleurs des Markers

  • globeLines : Permet de changer la couleurs des Lines

  • globeLinesDots : Permet de changer la couleurs des LinesDots
     

  • globeDotSize : Permet de changer la taille des Dots

  • globeScale : Permet de changer la taille du globe
     

  • map : Permet de désactiver la map

  • points : Permet de désactiver les points

  • markers : Permet de désactiver les markes

  • markerLabel : Permet de désactiver les markerLabel

  • markerPoint : Permet de désactiver les markerPoint

  • atmosphere : Permet de désactiver l'atmosphere
     

• Vous pouvez modifier les différentes textures pour le globe disponible dans le dossier textures.
   

  • earth_dark.jpg ➔ (Fichier earth_dark.jpg)
  • earth_day.jpg ➔ (Fichier earth_day.jpg)
  • earth_night.jpg ➔ (Fichier earth_night.jpg)
  • map_indexed.png ➔ (Fichier map_indexed.png)
  • map_outline.png ➔ (Fichier map_outline.png)
     

• Une texture pour les nuages est disponible dans le dossier textures.
   

  • clouds.jpg ➔ (Fichier clouds.jpg)  

• Ensuite il faudra modifier le fichier globe.jsx ➔ (Fichier globe.jsx)

// app/components/globe/globe.jsx
import * as THREE from 'three';
import { Component } from 'react';

import { shaders } from '~/components/globe/utils/shaders';
import { config, elements, groups } from '~/components/globe/utils/config';
import { NoiseGenerator } from '~/components/globe/libs/perlin-noise.js';

import mapTexture from '~/components/globe/textures/map_indexed.png'; // Modifier ici le choix de la texture
import mapTextureClouds from '~/components/globe/textures/clouds.jpg';

 

• Vous pouvez paramétrer les diverses options du globe dans le fichier config.js.  

  • config.js ➔ (config.js)

---

Retour en haut 🡅

Interface de l'application

• L'application est exécutée dans une page web.

---

Retour en haut 🡅

Accès à la démonstration en ligne

• Vous pouvez accéder à une démonstration de l'application via Cloudflare.
• En utilisant le lien suivant ➔ Lien de l'application en ligne

---

Retour en haut 🡅

Liste pré-requis

• Aucun pré-requis n'est nécessaire.

• Application conçue avec les technologies suivantes :
   

  • React v18.2.0 ➔ Documentation React
  • Vitejs v5.4.10 ➔ Documentation Vitejs
  • Remix v2.13.1 ➔ Documentation Remix
  • Three.js v0.169.0 ➔ Documentation Three.js
  • Node.js v.20.9.0 ➔ Documentation Node.js
  • Npm v10.8.1 ➔ Documentation et téléchargement de Npm
  • Tailwind CSS v3.4.4 ➔ Documentation Tailwind CSS
  • VSCode v1.85.2 ➔ Documentation et téléchargement de VSCode
  • Chrome v.126.0.6478.114 & Firefox v.127.0
  • Windows 10 Professionnel

---

Retour en haut 🡅

Lancement de l'application

• Pour lancer l'application.

1. Installer Node.js (inclut npm)

• Si Node.js n'est pas encore installé sur votre machine, il peut être téléchargé ici ➔ Téléchargement Node.js
• Cela installera :
  • À la fois les dépendances de production (comme react et react-dom)
  • Et les dépendances de développement (comme Vite, Three.js, etc.)
     

2. Installer les dépendances

• Dans un terminal exécuter la commande suivante dans le répertoire du projet.
• Cela installera toutes les dépendances spécifiées dans le fichier package.json ➔ (package.json).

$ npm install

• Pour lancer le projet en mode développement.
• Cela permettra d'accéder a la page ➔ http://localhost:5173/

$ npm run dev

Note navigateur : Les tests ont était fait sur Firefox et Google Chrome.

---

Retour en haut 🡅

Informations importantes sur les différents fichiers et dossiers

Les dossiers components

• Contient le dossier du composant globe avec les différents fichiers nécessaire pour l'application.

  • components ➔ (components)

Le dossier globe

• Le dossier contient les fichiers React.

  • main.jsx ➔ (main.jsx)
  • app.jsx ➔ (app.jsx)
  • globe.jsx ➔ (globe.jsx)
  • dots.jsx ➔ (dots.jsx)
  • lines.jsx ➔ (lines.jsx)
  • marker.jsx ➔ (marker.jsx)
  • markers.jsx ➔ (markers.jsx)
  • points.jsx ➔ (points.jsx)

Le dossier routes

• Le dossier contient la route princiaple pour l'application React.

  • home.jsx ➔ (home.jsx)

Les dossier utils, data

• Le dossier utils contient le fichier config.js ou sont sauvegardés les paramètres de configuration du globe.

  • Fichier config.js
    • config.js ➔ (config.js)
       

• Le dossier data contient les fichiers connections.js nécessaires pour la configuration du globe.

  • Dossier data

    • connections.js ➔ (connections.js)
    • countries.js ➔ (countries.js)
    • grid.js ➔ (grid.js)
    • processing.js ➔ (processing.js)
    • countries.all.json ➔ (countries.all.json)
       

  • Le fichier main.module.css regroupe les styles CSS pour l'application.

    • main.module.css ➔ (main.module.css)

Le dossier static

• Dossier qui contient les images, les badges pour le README.md.

  • static ➔ (badges)
  • static ➔ (img)

---

Retour en haut 🡅

Auteur et contact

Pour toute information supplémentaire, vous pouvez me contacter.
Bubhux: [email protected]