jdomingu / threegeojson Goto Github PK
View Code? Open in Web Editor NEWRendering GeoJSON with three.js
License: BSD 2-Clause "Simplified" License
Rendering GeoJSON with three.js
License: BSD 2-Clause "Simplified" License
<head>
<title>ThreeGeoJSON Demo</title>
<script src="lib/threeGeoJSON.js"></script>
<script src="lib/three.js"></script>
<script src="lib/TrackballControls.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<style>
html, body {
padding: 0;
margin: 0;
}
</style>
<script type="text/JavaScript">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.5, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var planet = new THREE.Object3D();
var geometry = new THREE.BoxGeometry(0,0,0);
var material = new THREE.MeshBasicMaterial({
color: 0x333333,
wireframe: true,
transparent: true
});
var sphere = new THREE.Mesh(geometry, material);
planet.add(sphere);
$.getJSON("test_geojson/bld_floor1base.geojson", function(data) {
drawThreeGeo(data, 1, 'plane', {
color: 0x80FF80
}, planet);
});
$.getJSON("test_geojson/bld_floor1rooms.geojson", function(data) {
drawThreeGeo(data, 1, 'plane', {
color: 0x80FF80
}, planet);
});
$.getJSON("test_geojson/bld_floor1ex.geojson", function(data) {
drawThreeGeo(data, 0, 'sphere', {color: 0x80F080, size: 1}, planet);
});
scene.add(planet);
camera.position.z = 15;
var controls = new THREE.TrackballControls(camera);
function render() {
controls.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
</script>
</body>
This is the code.
The GeoJSON files can be obtained from the link
https://github.com/tempseptember/threeproj
So if you get a threejs sphere and wrap a "map" image of the globe around it then add a point on Mexico, for example, it works fine, you can see the point ON Mexico, BUT if I remove the image and draw the polygons using ThreeGeoJSON, that "Mexico" point that we drew becomes "out of place" and, again, since it worked fine with the image I'm assuming ThreeGeoJSON is misplacing the polygons.
I've been debugging this all day and I can't seem to understand why it's happening.
Thanks for building this very useful module! Did you consider publishing ThreeGeoJSON as a reusable module on the public NPM registry so it can be easily integrated with other applications?
I'm having some trouble getting the plane to render using the demo countries data. Any ideas?
Here's a demo https://codesandbox.io/s/react-three-fiber-geo-json-i0lmf?file=/src/App.js
hi, @jdomingu. I try to test polygon with hole using this repo, and change the rectangle data to this:
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-131.1328125,
-46.55886030311718
],
[
-131.1328125,
55.97379820507658
],
[
66.4453125,
55.97379820507658
],
[
66.4453125,
-46.55886030311718
],
[
-131.1328125,
-46.55886030311718
]
],
[
[
-78.046875,
-11.867350911459294
],
[
-78.046875,
34.30714385628804
],
[
14.0625,
34.30714385628804
],
[
14.0625,
-11.867350911459294
],
[
-78.046875,
-11.867350911459294
]
]
]
}
}
but not show the hode in three web, does the repo support polygon with hole? thanks
Thank you for writing this code, I'm using it to produce a sphere with Voronoi cells represented as GeoJSON polygon shapes. I am getting an interesting bug though:
I believe that this is because of a bug in interpolatePoints
when interpolating points on the "prime meridian" or 0 degrees longitude. It looks like it takes the longest path to the next point on the other side of that line, instead of the shortest path. I'm not sure exactly what's causing it.
I was wondering if it possible to add color into each country. Since you are drawing a line in 3d is it a way to draw shape in 3d as well?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.