Create terrain using longitude latitude in three.js

Question

I would like to create a terrain on top of a cube geometry based on latitude and longitude data. I have an array of objects that contain the latitude, longitude, and amount to deform a specific coordinate.

var geo = new THREE.CubeGeometry( 10, 20, 40, 40, worldWidth, worldDepth);
var worldWidth = 100, worldDepth = 100;
for ( var i = 0; i < worldWidth; i++ ) {
    for ( var j = 0; j < worldDepth; j++ ){
        for (var k = 0; k < locations.length; k++ ) {
            var index = j * worldWidth + i;
            var x = worldWidth * (locations[k].lng + 180) / (2 * 180);
            var y = worldDepth * (locations[k].lat + 180) / (2 * 180);
            var dx = i - x;
            var dy = j - y;
            var dist = Math.sqrt( dx*dx + dy*dy );
            if ( dist < .5 ) {
                geo.vertices[index].x += locations[k].count * .05;
            }
        }
    }
}

Right now, this code just pushes up each individual coordinate that is closest to the latitude and longitude. Is there a way I can smooth the area around each locatiuon coordinate so that it looks like a terrain rather than spikes?

score 0 · Accepted Answer · answered Sep 12 '13 at 15:11

Good day, it sounds to me like your looking to Subdivide the mesh, thereby "smoothing" out the peak to valley effect. This can be done with a Modifier as seen in this Three.js example:

http://threejs.org/examples/#webgl_geometry_subdivision

Now the basic principles here are:

1) use the latest revision of Three.js

2) pull down the SubdivisionModifier.js file and link it in:

<script src="js/modifiers/SubdivisionModifier.js"></script>

3) create the modifier during initializaion (play with the value, I tried 3):

var modifier = new THREE.SubdivisionModifier( 3 );

4) then after your vertices manipulation and before adding your geometry to a mesh to render apply the modifier like so:

geometry.mergeVertices();
geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.computeVertexNormals();

modifier.modify( geometry );

Give that a try and let us know how it's working out, I'd be super keen to find out myself.

Create terrain using longitude latitude in three.js

1 Answers1