3D Interactive Globe Landing Page

Table of Contents

• Introduction
• Features
  • Interactive Globe
  • Project Showcase
  • Animations
  • GUI
• File Structure
• Technologies Used
• Texture Optimization
• Installation

Introduction

Hello!

You've landed in the repository for my interactive 3D globe landing page! This project is a dynamic and visually engaging web experience built with React, Three.js, and Tailwind CSS. It combines an interactive 3D globe with a showcase of my projects, all wrapped in a responsive and modern design.

This README aims to provide a comprehensive overview of the project, from its architecture and features to the technologies used and the installation process. I hope you find it informative and inspiring!

Features

Interactive Globe

The centerpiece of this landing page is an interactive 3D globe, meticulously crafted using Three.js and enhanced with custom shaders and textures. The globe is composed of several layers, each contributing to its realism and interactivity:

• Earth Sphere: The core of the globe, rendered as a sphere with detailed textures for surface, bump mapping, and specular highlights. Two versions exist:

  • Earth (Static): A base sphere with static textures. (Earth)

  • Earth Season (Animated): A dynamic sphere with animated seasonal textures, achieved through custom shaders and texture manipulation. (Earth Season)

    • The seasonal textures are KTX2 compressed for efficient loading and delivery, managed by the KTX2Loader.
    • Texture animation is achieved by manipulating a transformation matrix uniform passed to the shader, allowing for interpolation between different texture maps within a larger texture sheet.
    • The texture paths are dynamically generated based on the month using functions like texturePathGeneration in test_split_sphere_weather.jsx.
    • The project also uses roughness maps to enhance the visual fidelity of the globe, with texture paths generated by RoughnessTexturePathGeneration in test_split_sphere_weather.jsx.

• Earth Cities Light: A custom shader illuminates city lights on the night side of the globe, using alpha maps and emissive properties for a realistic nighttime glow. (Earth Cities Light)

• Earth Cloud: A simple sphere with a cloud texture applied as an alpha map, adding a layer of atmospheric detail. (Earth Cloud)

• Earth Fresnel: A single-color sphere with a custom shader that simulates a light-accurate Fresnel effect, enhancing the globe's visual depth. (Earth Fresnel)

• Earth Atmosphere: A sphere with inverted normals and a reverse Fresnel effect, creating a realistic light scattering effect for the atmosphere. (Earth Atmosphere)

These layers are combined and managed within components like Earth Meshes Atmosphere and Earth Meshes Physical. The EarthMeshesPhysical component utilizes gsap for animations and Redux for managing the selected location and triggering animations.

Project Showcase

The landing page features a project showcase, highlighting my skills and experience. Each project is presented with a title, description, and relevant details:

• The Project.jsx component dynamically loads project information and panel images.

• The useIsVisible hook is used to detect when a project comes into view, triggering animations and updating the camera and background via Redux actions.

• Projects include:

  • Project Delta - 3D Turn-based RPG in Unity: A group project focused on creating a turn-based combat system in Unity.
  • Reverse Polish Calculator with Antlr Grammar Tree: A project implementing a context-free grammar parser and lexer to evaluate expressions in reverse Polish notation.
  • Weather Forecast for Rock Climbers: A web application providing weather forecasts tailored for rock climbing trips.
  • Dijkstra's Algorithm Visualization: A C++ and Qt5 application visualizing Dijkstra's algorithm step by step.

Animations

Animations play a crucial role in enhancing the user experience and providing visual feedback. The project employs a variety of animation techniques:

• Pre-determined Animations: Continuous animations, such as the Earth and cloud rotation, are managed using the useFrame hook from React Three Fiber.
• Responsive Animations: Triggered by user interactions or scroll events, these animations are controlled using Redux and GSAP. EarthMeshesPhysical uses gsap timelines to smoothly transition between locations.
• Shader Animations: The Earth Season component animates textures by manipulating a transformation matrix within a custom shader.

GUI

The graphical user interface (GUI) provides users with controls to interact with the globe and explore different features. The GUI is built with:

• React Hooks: For managing component state and callbacks.
• Redux: For global state management, enabling communication between different components.
• shadcn/ui: For reusable and customizable UI components, ensuring a consistent and modern design.

During development, Leva is used for debugging and quick UI adjustments, thanks to its easy and fast hook implementation.

File Structure

The project structure is organized to promote maintainability and scalability:

.
├── .eslintrc.cjs           # ESLint configuration
├── .gitignore              # Specifies intentionally untracked files that Git should ignore
├── CNAME                   # Custom domain name configuration
├── components.json         # Configuration for shadcn/ui components
├── index.html              # Main HTML file
├── package.json            # Project dependencies and scripts
├── postcss.config.js       # PostCSS configuration
├── README.md               # Project documentation
├── tailwind.config.js      # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
├── vite.config.js          # Vite build tool configuration
├── .github/                # GitHub workflow configurations
│   └── workflows/
├── public/                 # Public assets
│   ├── basis/              # Basis Universal transcoder files
│   ├── music/              # Music files
│   ├── textures/           # Static textures
│   ├── textures_sequence/  # Texture sequences for animations
│   └── textures_transition/ # Transition textures
├── readme_assets/          # Assets for the README file
│   ├── Animation.gif
│   ├── Earth_Examine.gif
│   ├── earth_layers.gif
│   └── Screenshot (508).png
└── src/                    # Source code
    ├── index.css           # Global styles
    ├── Template_main.jsx     # Main application component
    ├── assets/             # Static assets
    ├── cameras/            # Camera configurations
    ├── components/         # Reusable React components
    ├── context/            # React Context providers
    ├── editor/             # Editor-related components
    ├── grid/               # Grid-related components
    ├── Hook/               # Custom React hooks
    ├── lib/                # Utility functions
    ├── lights/             # Light configurations
    ├── meshes/             # 3D mesh components
    │   └── earth/          # Earth-related components
    ├── music/              # Music-related components
    ├── official/           # Official components
    ├── postprocesses/      # Post-processing effects
    └── UI/                 # User interface components

Technologies Used

This project leverages a range of modern web development technologies:

• React
• Vite
• Three.js
• React Three Fiber
• GSAP
• Tailwind CSS
• shadcn ui
• Redux
• KTX2Loader
• THREE-CustomShaderMaterial

Texture Optimization

To optimize texture loading and performance, the project utilizes KTX2 compressed textures. These textures are efficiently loaded using the KTX2Loader from Three.js. The public/basis directory contains the necessary Basis Universal transcoder files for decoding these textures.

The project also includes a script, public/textures_sequence/upscayl_batch.sh, used for upscaling textures. This script automates the process of enhancing texture resolution using Upscayl, an AI-based image upscaling tool.

Installation

To run this project locally:

1. Clone the repository:

git clone https://github.com/th-nguyen-dev/ryannguyenweb.git
cd ryannguyenweb

2. Install dependencies:

npm install

3. Start the development server:

npm run dev