Subsurface geology. loading elevation rasters

Threejs noob here with a data ‘import’ question.

As a Geospatial(GIS) professional, i work with raster surfaces(DEMs), Lidar point clouds, TINs etc, and I am trying to visualize several subsurface geologic formations using Threejs.
I can use many GIS tools for this, but would like to visualize this in a browser.

I’ve dabbled in simple geometries and shapes already, but I would like to ‘import’ my existing elevation data(TIFF, point cloud, xyz, TIN, …) into the viewer. The data is basically xyz data in real world coordinates, I’d like to create a mesh from those point or cell locations.

I included a screenshot of what i’m attempting, from within a GIS. but would like to duplicate this using Threejs.

any help?

3js main job is to show things, it has less codes to make things. Someone has posted similar question recently 3D Mesh from cloud of points maybe you could employ similar hack to use THREE.ConvexGeometry? so, basically,

  • add the point way below everything (think center of the earth, but not to scale),
  • normalize the distances from your points to that center,
  • make ConvexGeometry out of that,
  • remove all the faces that include the point added at step 1,
  • replace vertex coordinates with the original values.

Another option would be just warping Plane(Buffer)Geometry, of course, assuming you have xz data in regular intervals, for example, or if TIFF refers to heightmap texture (in which case you could also just write some 5 lines ShaderMaterial to render it).


Without any caves, i’d use something like delunay triangulation, if this is not a regular grid. This seems pretty nice:

Feed only the horizontal coordinates into the triangulator (flatten them), and then reassign the height on the resulting mesh.


And there’s an example of Three.js + Delaunator.


Great! thanks for all the ideas everyone.
The data i’m starting with is an elevation Image or Raster. each cell has an elevation value. for visualizing, these values could mean any unit of measurement, they don’t NEED to be real-world coordinates at this point. is there a ‘loader’ that would bring in an Image and use its cell values to create a surface? then add a Material to it to visualize it? not sure if i need to Triangulate any xyz points if i already have an image(cells) of those xyz values?

thanks for the quick responses everyone!

plan view of one of the elevation rasters with a color stretch, zoomed showing cells, and perspective(in GIS software)…

I’m starting to believe this is a “Heightmap” or “PlaneGeometry” thing…

1 Like

Yeah, I think that using of heightmap technique is the best way in your case.

Just an example of how it can be done: Displacement Maps questions

1 Like

Agreed no need to triangulate anything here.

1 Like