CODEWITHSUNDEEP
three.js
Stephen Lead
Stephen Lead

Reputation: 1976

Is it possible to use GIS terrain vector data in three.js?

I'm new to three.js and WebGL in general.

The sample at http://css.dzone.com/articles/threejs-render-real-world shows how to use raster GIS terrain data in three.js

Is it possible to use vector GIS data in a scene? For example, I have a series of points representing locations (including height) stored in real-world coordinates (meters). How would I go about displaying those in three.js?

The basic sample at http://threejs.org/docs/59/#Manual/Introduction/Creating_a_scene shows how to create a geometry using coordinates - could I use a similar approach with real-world coordinates such as 

"x" : 339494.5,
"y" : 1294953.7,
"z": 0.75

or do I need to convert these into page units? Could I use my points to create a surface on which to drape an aerial image?

I tried modifying the simple sample but I'm not seeing anything (or any error messages): http://jsfiddle.net/slead/KpCfW/

Thanks for any suggestions on what I'm doing wrong, or whether this is indeed possible.

Upvotes: 1

Views: 1953

Answers (1)

yaku
yaku

Reputation: 3111

I did a number of things to get the JSFiddle show something.. here: http://jsfiddle.net/HxnnA/

  • You did not specify any faces in your geometry. In this case I just hard-coded a face with all three of your data points acting as corner. Alternatively you can look into using particles to display your data as points instead of faces.
  • Set material to THREE.DoubleSide. This is not usually needed or recommended, but helps debugging in early phases, when you can see both sides of a face.
  • Your camera was probably looking in a wrong direction. Added a lookAt() to point it to the center and made the field of view wider (this just makes it easier to find things while coding).
  • Your camera near and far planes were likely off-range for the camera position and terrain dimensions. So I increased the far plane distance.
  • Your coordinate values were quite huge, so I just modified them by hand a bit to make sense in relation to the camera, and to make sure they form a big enough triangle for it to be seen in camera. You could consider dividing your coordinates with something like 100 to make the units smaller. But adjusting the camera to account for the huge scale should be enough too.

Nothing wrong with your approach, just make sure you feed the data so that it makes sense considering the camera location, direction and near + far planes. Pay attention to how you make the faces. The parameters to Face3 is the index of each point in your vertices array. Later on you might need to take winding order, normals and uvs into account. You can study the geometry classes included in Three.js for reference.

Three.js does not specify any meaning to units. Its just floating point numbers, and you can decide yourself what a unit (1.0) represents. Whether it's 1mm, 1 inch or 1km, depends on what makes the most sense considering the application and the scale of it. Floating point numbers can bring precision problems when the actual numbers are extremely small or extremely big. My own applications typically deal with stuff in the range from a couple of centimeters to couple hundred meters, and use units in such a way that 1.0 = 1 meter, that has been working fine.

Upvotes: 2

Related Questions