skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

globe-particles

Generate a Three.js globe-like 3D particle visualization with orbital ring.

4.5k|536|Updated Feb 3, 2026
Search Tags:#webgl#threejs#particle shader#data globe#orbital ring#interactive motion#premium visuals
One-click install
npx skills add https://github.com/MengTo/Skills --skill globe-particles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: globe-particles
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/globe-particles
Command: npx skills add https://github.com/MengTo/Skills --skill globe-particles

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve?

It solves the problem of creating a premium, globe-like 3D particle visualization that looks like a synthesized planetary “data globe” instead of a generic starfield.

Core Features & Use Cases

  • Dense luminous globe core: A bright spherical cluster of crisp circular particles to define a clear planetary silhouette.
  • Orbital ring or flattened disc: A thinner, tilted secondary particle population that reads as an orbit layer.
  • Brand-aware color tuning: Neutral/white-hot core color with accent coloration derived from the design’s primary brand accent.
  • Tuned motion & depth: Subtle rotation, gentle pointer drift, shader falloff for depth layering, and reduced-motion support.
  • Use Case: Apply when designing a hero section or section background that needs a cinematic planetary effect without changing page layout or unrelated animations.

Quick Start

Use the globe-particles skill to render a tilted globe-like particle scene by mounting the provided canvas element and initializing Three.js with the globe particle recipe.

Frequently Asked Questions about globe-particles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a 3D data globe particle visualization with Three.js?▼

A 3D data globe uses Three.js point geometry with custom shaders and additive blending to render a luminous spherical core and an orbital ring. This creates premium planetary visuals for hero sections without altering page layout.

Can I use particle shaders for brand-aware color tuning on a WebGL globe?▼

Yes, WebGL globe particle shaders support brand-aware color tuning by applying a neutral or white-hot core color with accent coloration derived from your design's primary brand accent for customized visuals.

Does this Three.js particle globe support pointer drift and reduced-motion?▼

Yes, the Three.js particle globe supports subtle rotation, gentle pointer drift, and depth layering via shader falloff. It also includes reduced-motion support and proper cleanup for geometry, materials, and render loops.

What's the best way to render an orbital ring around a 3D particle globe?▼

Render an orbital ring by generating a thinner, tilted secondary particle population around the dense spherical core using Three.js. This creates a distinct orbit layer that adds cinematic depth to infrastructure or data-globe visuals.

Do I need to manually handle cleanup for Three.js particle renderer listeners?▼

No, this approach automatically handles cleanup of geometry, materials, renderer, event listeners, and request animation frames. This prevents memory leaks when removing the WebGL particle scene from your layout.

Related Skills

Explore More Design & Creative Skills→
Impertio-StudioImpertio-Studio
11

threejs-errors-rendering

Diagnoses common Three.js rendering errors like black screens and z-fighting.

Official
Advanced
rakibulismrakibulism
2

webgl-creative-coder

Build GPU-driven WebGL visuals and shader effects for Three.js and React Three Fiber.

Community
Advanced
Yakoub-aiYakoub-ai
17

phaser-input

Process keyboard, pointer, and gamepad input for Phaser 4 games.

Official
Intermediate
tanepipertanepiper
27

particles-gpu

Render large particle counts via GPU instancing and custom shaders in Three.js.

Community
Advanced