Loading real terrain into three.js using free map data

Question

Has anyone got any ideas on how to load real terrain data into a three.js scene.

I would like to have a 3D model on a the actual terrain , i.e the elevations and overlayed satellite imagery .

Create scene : ok Load and animate models : ok Terrain and satellite imagery : ???

Thanks in advance. Jon

I have found a solution that answer your question. The answer i have posted has no code; but is correct. Did you found the solution you were searching? Don't forget to check an approved answer; or answer your own question so the question will be considered closed. — prieston, Oct 22 '15 at 15:35

score 3 · Answer 1 · answered Feb 19 '15 at 19:24

3

Three.js has an example on how to make a terrain, so that one's covered. Regarding the satellite imagery, you'll use that as a texture on your terrain. The only thing that is important is to get the texture coordinates right, so that may end up being tricky.

This blog post gives a good example and its code is available online, too.

answered Feb 19 '15 at 19:24

geekonaut

5,714
2
28
30

From further investigation , the appear to be various types of terrain data , where the general trend is to have a X Y Z and ideally an added RGB colour ( for HD Camera Laser scanners ) . So I am going to try to focus on CSV files ( due to their simplicity ).http://papaparse.com/ will be used to stream the points into the three.js scene , and the point will be cooured by the RGB . Ideally the use of the octree function should be used to reduce memory usage , as the point cloud scans are very large . I have tried to use http://potree.org/wp/ however the .las format is not as robust as the csv – JonoD Feb 20 '15 at 09:23

score 3 · Answer 2 · edited Nov 02 '18 at 14:48

If you some how have, or able to calculate, the elevation data of the points needed in grid mode.

You can use plane geometry and javascript xml Loader to load your data to the planes' geometry vertices.
Use any type of material for the plane you need and define the "map" attribute to add the image texture loaded with ImageLoader

If you have random placed elevation data you can use face3 or other type of three.js geometry and an algorithm to create a TIN (triangulated irregular network) to visualize the terrain.

Also you might want to take a look at cesium library and cesium.js documentation as about the geospatial part of the question, about the terrain loading using this three.js method and this osg.js demo.

Loading real terrain into three.js using free map data

2 Answers2