15 Babylonjs基础入门 高度图

这一节，我们的目标是了解高度图，并学习如何生成真实的地面。

最后效果。

如何实现？

实现没有高度的一个平面效果很简单，直接可以用Babylon.js的方法生成：

var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("Earth__land.jpg", scene);

var groundPlane = BABYLON.Mesh.CreatePlane("groundPlane", 200.0, scene);
groundPlane.material = groundMaterial;

设置一个材质添加上纹理，并贴到一个平面上面。

高度图的说明

了解高度图是本节的主要目标。高度图只是一个灰度图像，就像我们要使用的图像一样：

此图像将用于生成高度，高度图的内容是由黑到灰的不同颜色组成。里面代表着地面的高程数据。每个像素的颜色将被解析为到‘地面’距离或者‘高度’。所以，像素的颜色越白，海拔就越高。
为了生成那些高度图，你可以使用“Terragen”或“Picogen”等软件。

创建高度地形

我们可以通过Babylon.js的CreateGroundFromHeightMap方法，加上高度图创建具有高度的地形：

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);

这个方法的参数依次是：

• 名称
• 高度图纹理地址
• 网格的宽度
• 网格的深度
• 网格的分段数：数值越大，网格显得越精密
  
• 最小高度
• 最大高度
• 场景对象
• 是否动态更新此网格（true为是，false为不会更新）
• 成功后的回调，将在创建高度贴图并创建完网格的顶点后触发。回调函数的第一个参数为网格对象。

最后，具有高度的网格创建完成后，我们只需要再添加上材质：

ground.material = groundMaterial;

现在，我们就实现了地球的3D视图。

我们还添加了上一节讲到的天空盒，还有点光源来模拟太阳运动。
这是另一个使用Babylon.js实现的高度图内容案例：

• 提示
  当用户操作相机时，如果他能看到底下，或者缩小到天空盒外面，可能会很尴尬。为了避免这种情况，我们约束的相机运动：

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
    camera.lowerBetaLimit = 0.1; //限制相机平衡的最低角度
    camera.upperBetaLimit = (Math.PI / 2) * 0.9; //限制相机平行的最高角度
    camera.lowerRadiusLimit = 30; //限制相机距离焦点最近距离
    camera.upperRadiusLimit = 150; //限制相机距离焦点最远距离
    camera.attachControl(canvas, true);

• 官方高度图案例