chrisrzhou / React Globe
Licence: mit
Create beautiful and interactive React + ThreeJS globe visualizations with ease.
Stars: ✭ 167
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Globe
Giojs
🌏 A Declarative 3D Globe Data Visualization Library built with Three.js
Stars: ✭ 1,528 (+814.97%)
Mutual labels: io, webgl, threejs, globe
Openglobus
JavaScript 3d maps and geospatial data visualization engine library.
Stars: ✭ 199 (+19.16%)
Mutual labels: webgl, earth, globe
React Globe.gl
React component for Globe Data Visualization using ThreeJS/WebGL
Stars: ✭ 139 (-16.77%)
Mutual labels: webgl, threejs, globe
Three Globe
WebGL Globe Data Visualization as a ThreeJS reusable 3D object
Stars: ✭ 270 (+61.68%)
Mutual labels: webgl, threejs, globe
Glmaps
Data visualization examples and tutorials from scratch. 数据可视化示例代码集与新手学习教程。
Stars: ✭ 288 (+72.46%)
Mutual labels: webgl, threejs, earth
Webglobe
基于HTML5原生WebGL实现的轻量级Google Earth三维地图引擎
Stars: ✭ 685 (+310.18%)
Mutual labels: webgl, earth, globe
google-globe-trends
Create beautiful and interactive Google Trends globe visualizations with ease
Stars: ✭ 33 (-80.24%)
Mutual labels: earth, globe, io
Globe.gl
UI component for Globe Data Visualization using ThreeJS/WebGL
Stars: ✭ 479 (+186.83%)
Mutual labels: webgl, threejs, globe
Webworldwind
The NASA WorldWind Javascript SDK (WebWW) includes the library and examples for creating geo-browser web applications and for embedding a 3D globe in HTML5 web pages.
Stars: ✭ 628 (+276.05%)
Mutual labels: webgl, earth, globe
Encom Globe
🌎 WebGL globe based on the boardroom scene from Tron: Legacy
Stars: ✭ 872 (+422.16%)
Mutual labels: webgl, threejs, globe
Patches
Patches is a visual programming editor for building WebVR and WebGL experiences.
Stars: ✭ 164 (-1.8%)
Mutual labels: webgl, threejs
Stickyimageeffect
A sticky image effect for a slideshow inspired by ultanoir's website.
Stars: ✭ 158 (-5.39%)
Mutual labels: webgl, threejs
R3f Next Starter
Repo is moving to https://github.com/pmndrs/react-three-next
Stars: ✭ 137 (-17.96%)
Mutual labels: webgl, threejs
3d Force Graph
3D force-directed graph component using ThreeJS/WebGL
Stars: ✭ 2,386 (+1328.74%)
Mutual labels: webgl, threejs
Interactive Repulsive Effect
🍫 An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot "Holographic-Interactions".
Stars: ✭ 141 (-15.57%)
Mutual labels: webgl, threejs
Ego
A lightweight decision making library for game AI.
Stars: ✭ 145 (-13.17%)
Mutual labels: webgl, threejs
Andromeda
This is a WebGL recreation of the popular music video Gorillaz - Andromeda.
Stars: ✭ 145 (-13.17%)
Mutual labels: webgl, threejs
Texture Compressor
CLI tool for texture compression using ASTC, ETC, PVRTC and S3TC in a KTX container.
Stars: ✭ 156 (-6.59%)
Mutual labels: webgl, threejs
Sketch
Explorations on cross-hatching, engraving, and similar non-photorealistic rendering.
Stars: ✭ 136 (-18.56%)
Mutual labels: webgl, threejs
🌎 react-globe
Create beautiful and interactive React + ThreeJS globe visualizations with ease.
Features
- ✨ Beautiful and complete with clouds, backgrounds and lighting.
- ✌️ Incredibly simple to use and configure.
- 📍 Render interactive markers on the globe using simple data.
- 🎞 Easy globe animations and marker transitions.
- ⚛️ Modern Javascript + build tools.
Install
npm install react-globe
Note that react-globe
requires react >= 16.13.1
and three >= 0.118.3
as peer dependencies.
Use
Simple
Render a simple interactive globe with a single line of code!
import React from 'react';
import ReactGlobe from 'react-globe';
function SimpleGlobe() {
return <ReactGlobe />
}
Kitchen Sink
An example showing various features (markers, tooltips, options, callbacks, textures).
import React, { useState } from 'react';
import ReactGlobe from 'react-globe';
// import optional tippy styles for tooltip support
import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css';
function MyGlobe() {
// support rendering markers with simple data
const markers = [
{
id: 'marker1',
city: 'Singapore',
color: 'red',
coordinates: [1.3521, 103.8198],
value: 50,
},
{
id: 'marker2',
city: 'New York',
color: 'blue',
coordinates: [40.73061, -73.935242],
value: 25,
},
{
id: 'marker3',
city: 'San Francisco',
color: 'orange',
coordinates: [37.773972, -122.431297],
value: 35,
},
{
id: 'marker4',
city: 'Beijing',
color: 'gold',
coordinates: [39.9042, 116.4074],
value: 135,
},
{
id: 'marker5',
city: 'London',
color: 'green',
coordinates: [51.5074, 0.1278],
value: 80,
},
{
id: 'marker6',
city: 'Los Angeles',
color: 'gold',
coordinates: [29.7604, -95.3698],
value: 54,
},
];
// simple and extensive options to configure globe
const options = {
ambientLightColor: 'red',
cameraRotateSpeed: 0.5,
focusAnimationDuration: 2000,
focusEasingFunction: ['Linear', 'None'],
pointLightColor: 'gold',
pointLightIntensity: 1.5,
globeGlowColor: 'blue',
markerTooltipRenderer: marker => `${marker.city} (${marker.value})`,
};
const [globe, setGlobe] = useState(null);
console.log(globe); // captured globe instance with API methods
// simple component usage
return (
<ReactGlobe
height="100vh"
globeBackgroundTexture="https://your/own/background.jpg"
globeCloudsTexture={null}
globeTexture="https://your/own/globe.jpg"
initialCoordinates={[1.3521, 103.8198]}
markers={markers}
options={options}
width="100%"
onClickMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
onGetGlobe={setGlobe}
onMouseOutMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
onGlobeTextureLoaded={() => console.log('globe loaded')}
onMouseOverMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
>
)
}
Examples
View all documented examples and gallery of react-globe
applications at https://react-globe.netlify.com/.
You can also run the examples locally:
git clone [email protected]:chrisrzhou/react-globe
cd react-globe
npm install && npm run docs
Basic Example (no props)
Interactive Example (with markers)
Custom Marker Renderer Example
Google Globe Trends
Contributing
The code is written in typescript
, linted with xo
, and built with microbundle
. Examples and documentations are built with docz
.
Feel free to contribute by submitting a pull request.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].