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.

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.


4. Destroy.


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.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

Your email address will not be published. Required fields are marked *