├── 3d-earth.gif ├── README.md ├── clouds_2048.jpg ├── galaxystarfield.png └── index.html /3d-earth.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cheeaun/3d-earth/11b242acfb78524987d7029617c6d9a5cabad41d/3d-earth.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 3D Earth with Mapbox GL, D3.js and Three.js 2 | === 3 | 4 | ![](3d-earth.gif) 5 | 6 | My *noob* attempt to create a 3D earth out of [Mapbox GL](https://www.mapbox.com/mapbox-gl-js/api/) (vector) tiles, using a little of [D3](https://d3js.org/) and [Three.js](https://threejs.org/). 7 | 8 | Note that I'm still figuring out how these WebGL/Canvas/3D/performance thing. **Contributions and pull requests are welcomed!** 9 | 10 | Tweets: 11 | 12 | - https://twitter.com/cheeaun/status/904317333862203392 13 | - https://twitter.com/cheeaun/status/904341545293275136 14 | 15 | Getting started 16 | --- 17 | 18 | 1. `git clone` this repository 19 | 2. `npx serve` to load a local server 20 | 21 | Todos (Contributions welcomed!) 22 | --- 23 | 24 | - [x] Replace A-frame with ThreeJS? 25 | - [x] Fix the weird equirectangular dimension (actually not weird) 26 | - [ ] Better performance with the raster reprojection 27 | - [ ] Less CPU usage 28 | 29 | Credits 30 | --- 31 | 32 | Cloud image from . 33 | 34 | Resources 35 | --- 36 | 37 | - https://blog.mapbox.com/mapbox-gl-js-ar-js-a-frame-vr-mapbox-ar-vr-93c09be08742 38 | - https://aframe.io/docs/ 39 | - http://hanmomhanda.github.io/mastering-d3-html/chapter11/05-raster/ 40 | - https://bl.ocks.org/rasmuse/75fae4fee3354ec41a49d10fb37af551 41 | - https://github.com/rasmuse/d3-geo-warp 42 | - https://github.com/d3/d3-geo/ 43 | - https://bl.ocks.org/mbostock/4329423 44 | - https://threejs.org/examples/software_geometry_earth.html 45 | - https://github.com/miguelmota/threejs-earth 46 | - https://github.com/yomotsu/camera-controls 47 | - https://threejs.org/docs/#api/geometries/SphereGeometry 48 | - https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext 49 | - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D 50 | - https://github.com/tizzle/aframe-orbit-controls-component 51 | - https://github.com/mrdoob/three.js/issues/9716 52 | - https://stackoverflow.com/questions/7156971/webgl-readpixels-is-always-returning-0-0-0-0 53 | - https://mapzen.com/blog/escape-from-mercator/ 54 | -------------------------------------------------------------------------------- /clouds_2048.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cheeaun/3d-earth/11b242acfb78524987d7029617c6d9a5cabad41d/clouds_2048.jpg -------------------------------------------------------------------------------- /galaxystarfield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cheeaun/3d-earth/11b242acfb78524987d7029617c6d9a5cabad41d/galaxystarfield.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 3D Earth with Mapbox GL, D3.js and Three.js 5 | 28 |
29 | 30 |
31 |
Loading…
32 |
33 | 39 |
40 | 41 |
42 | 45 | 46 | 47 | 48 | 49 | 50 | 314 | --------------------------------------------------------------------------------