Premium & Brand

3 D Globe

A textured 3D globe with avatar pins, orbit, and auto-rotate.

Import

tsx

import { Globe3D } from "@cronus-ui/ui/globe-3d";

bash

npx cronus-ui add globe-3d

Examples

Distributed team

NASA Blue Marble globe with avatar pins, orbit drag, and a slow auto-rotate. Optional peers: three, @react-three/fiber, @react-three/drei.

tsx

<Globe3D
  markers={markers}
  config={{
    atmosphereColor: "#4da6ff",
    atmosphereIntensity: 20,
    bumpScale: 5,
    autoRotateSpeed: 0.3,
  }}
/>

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

Globe3DLabels

Prop	Type	Default	Description
`globe`*	`string`	`"Globe"`	Accessible name for the globe canvas.
`loading`*	`string`	`"Loading globe..."`	Loading copy shown while textures resolve.

Globe3DProps

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`markers`	`GlobeMarker[]`	`[]`	Array of markers to display on the globe
`config`	`Globe3DConfig`	`{}`	Globe configuration
`className`	`string`	—	Additional CSS classes
`onMarkerClick`	`(marker: GlobeMarker) => void`	—	Callback when a marker is clicked
`onMarkerHover`	`(marker: GlobeMarker \| null) => void`	—	Callback when a marker is hovered
`labels`	`Partial<Globe3DLabels>`	—	Accessible copy.