How to create triangle faces for a real-world terrain in three.js?

问题

My goal is to create a scene similar to http://css.dzone.com/articles/threejs-render-real-world but using vector X,Y,Z points rather than a raster image.

In this question I received some help in creating a three.js scene using real-world coordinates from a GIS. This showed that it is possible to use coordinates in meters.

That question's answer said to create a face between 3 points:

var face = new THREE.Face3(2, 1, 0);
geometry.faces.push(face);

How would I go about creating faces between hundreds of points? Is it left up to me to determine which sets of 3 coordinates constitute a face, or is there an inbuilt method which will compute this from the geometry object?

There's a rudimentary sample at http://jsfiddle.net/slead/rJj3f/1/ showing a larger sample of the input points.

Thanks

回答1:

Someone else might be able to answer this one better. But basically yeah, you need to figure out which sets of 3 points make each face, as it depends on how the source data is arranged. Is it sorted in some way, is it random samples, or samples in the form of a grid of some kind? Do the source points describe arbitrary shapes or are they already describing triangles. Without knowing that it is kind of impossible to construct meaningful faces. If the source data were already describing triangles, something like this could work:

for (var i = 0; i < points.length; i = i +3) {
  var face = new THREE.Face3(i + 2, i + 1, i);
  geometry.faces.push(face);
}

But looks like it's not that simple in your case. Might be it's not possible to directly interpret the data as triangles. Splitting arbitrary shapes and polygons with more than 3 corners is called tessellation and/or triangulation, I think. Three.js has some utilities for triangulation, I think. There is also THREE.Shape which you can use to construct geometry from arbitrary shapes, but looks like it only works with 2D source vector data.

Using particles at first might be a good idea, so you can see and study your data in a point cloud form. Then figure out how that might be converted to terrain.

If you only care about using your data as a kind of height map (not sure, but I'm assuming the GIS data consists of arbitrary 3-dimensional shapes). You could maybe generate terrain by creating a THREE.Plane grid with as many points as you have data points. Then sort your source data by the X and Z, then traverse the grid vertices and set each grid point to same X,Y,Z as the closest (ignoring elevation) source data point. Or something like that...

回答2:

You have all these data points representing the real-world terrain. Essentially, these data points make up a big grid. So for any given point (vertex) you know the adjacent data points (vertices). Therefore, building your triangles should be trivial.

Now suspect you already know this. So I'm guessing you are trying to see if three.js has a way to generate the faces based on some concept of triangle strips or even triangle fans. Am I correct?

Either way, I believe you will have to make use of buffering in order to render so many triangles with a good framerate. You should also look into some kind of level of detail (LOD) management here like a classic quad-tree.

来源：https://stackoverflow.com/questions/18170539/how-to-create-triangle-faces-for-a-real-world-terrain-in-three-js

标签

three.js