使用three.js中的经度纬度创建地形

时间:2013-09-11 20:53:52

标签: javascript geolocation three.js terrain

我想基于纬度和经度数据在立方体几何体的顶部创建地形。我有一个对象数组,包含纬度,经度和变形特定坐标的数量。

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;
            }
        }
    }
}

现在,这段代码只是推动了最接近纬度和经度的每个坐标。有没有办法可以平滑每个locatiuon坐标周围的区域,使它看起来像是地形而不是尖峰?

1 个答案:

答案 0 :(得分:0)

美好的一天,听起来像你想要细分网格,从而“平滑”峰谷效应。这可以通过修改器来完成,如这个Three.js示例中所示:

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

现在基本原则是:

1)使用最新版本的Three.js

2)下拉SubdivisionModifier.js文件并将其链接到:

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

3)在初始化期间创建修饰符(使用值,我尝试3):

var modifier = new THREE.SubdivisionModifier( 3 );

4)然后在你的顶点操作之后,在将几何体添加到网格物体之前,渲染应用修饰符,如下所示:

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

modifier.modify( geometry );    

尝试一下,让我们知道它是如何运作的,我会非常热衷于发现自己。