COBE is a lightweight (5 KB) WebGL Globe. The name “COBE” stands for Cosmic Background Explorer. Cobe is a WebGL library for creating a customizable, animated, 3D globe with a pixelated world map.

Must Read: Rendering 3D WebGL Graphics Components Library In Vue.js

How to make use of it:

1. Import createGlobe from the package.

import createGlobe from 'cobe'

2. Create a 3D globe on Canvas.

const globe = createGlobe(canvas, {
      devicePixelRatio: 3,
      width: 600,
      height: 600,
      phi: 1,
      theta: 0.41,
      dark: 1,
      diffuse: 1.63,
      mapSamples: 15000,
      mapBrightness: 6,
      baseColor: [0.3, 0.3, 0.3],
      markerColor: [1, 0.5, 1],
      glowColor: [1, 1, 1],
      markers: [ // add custom markers
        { location: [37.7595, -122.4367], size: 0.03 },
        { location: [40.7128, -74.006], size: 0.1 },
      ],
      onRender: (state) => {
        // Called on every animation frame.
        // `state` will be an empty object, return updated params.
        state.phi = phi
        phi += 0.01
      },
})

3. Toggle the animation.

globe.toggle()

4. Destroy.

globe.destory()

See Demo And Download

Official Website(shuding): Click Here

This superior jQuery/javascript plugin is developed by shuding. For extra Advanced Usage, please go to the official website.