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.