Press "Enter" to skip to content

A Lightweight 3D Globe With Dotted World Map Using WebGL | COBE

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.

dotted world map generator, world map dotted svg, javascript world map visualization, d3 world map visualization, css world map, world map dotted svg

How to make use of it:

1. Import createGlobe from the package.

import createGlobe from 'cobe'

2. Create a 3D globe on the 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 the instance.

globe.destory()

3D Globe With Dotted World Map Using WebGL, COBE Plugin/Github, interactive world map, javascript world map free


See Demo And Download

Official Website(shuding): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.