Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cobe) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
A lightweight (5kB) WebGL globe lib. The name "COBE" stands for Cosmic Background Explorer.
- Demo and configurations
- Use with React: https://codesandbox.io/s/eager-sky-r2q0g
- Use with vanilla JS: https://codesandbox.io/s/peaceful-gwen-m579y
- Use with Vue3: https://stackblitz.com/edit/vitejs-vite-l5a8xk?file=src/App.vue
- Use with Svelte: https://codesandbox.io/s/great-visvesvaraya-78yf6?file=/App.svelte
Quick Start
<canvas
id="cobe"
style="width: 500px; height: 500px;"
width="1000"
height="1000"
></canvas>import createGlobe from 'cobe'
let phi = 0
let canvas = document.getElementById("cobe")
const globe = createGlobe(canvas, {
devicePixelRatio: 2,
width: 1000,
height: 1000,
phi: 0,
theta: 0,
dark: 0,
diffuse: 1.2,
scale: 1,
mapSamples: 16000,
mapBrightness: 6,
baseColor: [0.3, 0.3, 0.3],
markerColor: [1, 0.5, 1],
glowColor: [1, 1, 1],
offset: [0, 0],
// You can specify a custom color for each marker using the color property
// If not specified, markers will use the global markerColor
markers: [
{ location: [37.7595, -122.4367], size: 0.03 }, // Uses global markerColor
{ location: [40.7128, -74.006], size: 0.1, color: [1, 0, 0] }, // Custom red color
],
onRender: (state) => {
// Called on every animation frame.
// `state` will be an empty object, return updated params.
state.phi = phi
phi += 0.01
},
})
// `globe` will be a Phenomenon (https://github.com/vaneenige/phenomenon) instance.
// To pause requestAnimationFrame:
// `globe.toggle()`
// To remove the instance:
// `globe.destroy()`
// ...Acknowledgment
This project is inspired & based on the great work of:
- Spherical Fibonacci Mapping, Benjamin Keinert et al.
- https://www.shadertoy.com/view/lllXz4, Inigo Quilez
- https://github.blog/2020-12-21-how-we-built-the-github-globe
- https://github.com/vaneenige/phenomenon
- https://github.com/evanw/glslx
World map asset from:
License
The MIT License.