Globe Pins 3D

An interactive 3-D globe built with Three.js featuring auto-rotation, location pins with labels, animated arc trails, optional bloom post-processing, and OrbitControls for manual exploration.

3D Components3dglobemap3dthreejspinsconnectionsarcslocationwebglbloomtrails

Globe Pins 3D — Variant 1

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

autoRotate

Enable continuous globe rotation.

rotationSpeed

Radians per second of rotation.

initialRotation

Starting Y-axis rotation in degrees.

dotColor

Color of country outline and fill dots.

dotSize

Size of country dots.

dotOpacity

Opacity of country dots (0–1).

bloom

Enable bloom glow on dots.

pinColor

Color of pin spheres and halos.

Generated JSX

Copy this into your page.

<GlobePins3D
  autoRotate={true}
  rotationSpeed={0.03}
  initialRotation={0}
  dotColor="#7AE1FF"
  dotSize={0.006}
  dotOpacity={0.72}
  bloom={false}
  pinColor="#7AE1FF"
/>

Globe Pins 3D — Variant 2

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

autoRotate

Enable continuous globe rotation.

rotationSpeed

Radians per second of rotation.

initialRotation

Starting Y-axis rotation in degrees.

dotColor

Color of country outline and fill dots.

dotSize

Size of country dots.

dotOpacity

Opacity of country dots (0–1).

bloom

Enable bloom glow on dots.

pinColor

Color of pin spheres and halos.

Generated JSX

Copy this into your page.

<GlobePins3D
  autoRotate={true}
  rotationSpeed={0.03}
  initialRotation={0}
  dotColor="#7AE1FF"
  dotSize={0.006}
  dotOpacity={0.72}
  bloom={false}
  pinColor="#7AE1FF"
/>

Globe Pins 3D — Variant 3

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

autoRotate

Enable continuous globe rotation.

rotationSpeed

Radians per second of rotation.

initialRotation

Starting Y-axis rotation in degrees.

dotColor

Color of country outline and fill dots.

dotSize

Size of country dots.

dotOpacity

Opacity of country dots (0–1).

bloom

Enable bloom glow on dots.

pinColor

Color of pin spheres and halos.

Generated JSX

Copy this into your page.

<GlobePins3D
  autoRotate={true}
  rotationSpeed={0.03}
  initialRotation={0}
  dotColor="#7AE1FF"
  dotSize={0.006}
  dotOpacity={0.72}
  bloom={false}
  pinColor="#7AE1FF"
/>

Animation effects

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation

Globe Pins 3D — Variant 1

Shape the component before you copy it.

Globe Pins 3D — Variant 2

Shape the component before you copy it.

Globe Pins 3D — Variant 3

Shape the component before you copy it.

Animation effects