jdomingu / threegeojson Goto Github PK
View Code? Open in Web Editor NEWRendering GeoJSON with three.js
License: BSD 2-Clause "Simplified" License
threegeojson's People
Contributors
Stargazers
Watchers
Forkers
zsumore jimmux lloves lixuanxian gis520 stevestrongapp vicwue dodolooking yingcom che603000 krisgardiner bailihua93 marioada sbrudz notbrain hopepdm guardwu2015 wegiangb sermonis oodavy41 visgato-gmbh fastref pierrenoll spencermountain massimiliano76 andrewhickey koulong nicolehm1 zyb51 wat-cha-colm lspcoder paradox010 kuoth86 patryk-janik-ellipsis sunyonglincanada lukereed76 wang-zao xiaoyibaba wwwk eww125 ayymericarn wuzhenzhen1314 miguelamd0 marax27 kingna seelingzheng huguohuithreegeojson's Issues
does the repo support polygon with hole?
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
Polygon lines wrapping around 0 degrees longitude
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.
Point Geometry not properly displayed
<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
'plane' not working with 'countries.json' provided
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
Can I add color in each country?
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?
Publish as NPM module
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?
Something's wrong with the "location" of the polygons
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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.