ThreeGeoJSON
IMPORTANT: This project has been retired and does not work with the current version of three.js. Turning this project into something other than the one-off it currently is would require a bit more time than I'm willing to sink in. Thanks to everyone who took an interest.
This project aims to be a simple way to render geojson data in 3D with three.js.
Demo
http://jdomingu.github.io/ThreeGeoJSON/
Note: To view the demo, ensure that your browser supports WebGL rendering.
Instructions
Enter the following code to render a geoJSON file in 3D:
drawThreeGeo(json, radius, shape, {options});
You can enter the following parameters:
| Parameter | Description |
|---|---|
| json | The variable that contains the geoJSON that you want to render. |
| radius | The radius of the sphere that you want to render. |
| shape | The 3D shape to use when rendering the geoJSON. Either 'sphere' or 'plane'. |
| options | The threeJS options that you want to use to style the line or particle material. |
| container | Optional. THREE.Object3D instance which will be used as a container for threejson shapes. |
For example, you might enter:
drawThreeGeo(json, 10, 'sphere', {
color: 'green'
});
Important Note About Parsing geoJSON
The demo uses the jquery $.getJSON method to pass the geoJSON to the drawThreeGeo function. You can only use this method if the geoJSON is hosted on a server that allows requests for json data. To test this code locally, complete the following steps:
- Add
var json =to the beginning of the geoJSON file that you want to display. - Change the file extension of your geoJSON file to
.js. - Add the
json.jsfile to the head of your HTML page. For example, you might add the following line:
<script src="test_geojson/json.js"></script>