15 Babylonjs基础入门 高度图

时间:2024-04-09 16:50:08

这一节,我们的目标是了解高度图,并学习如何生成真实的地面。
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;

15 Babylonjs基础入门 高度图
设置一个材质添加上纹理,并贴到一个平面上面。

高度图的说明

了解高度图是本节的主要目标。高度图只是一个灰度图像,就像我们要使用的图像一样:
15 Babylonjs基础入门 高度图
此图像将用于生成高度,高度图的内容是由黑到灰的不同颜色组成。里面代表着地面的高程数据。每个像素的颜色将被解析为到‘地面’距离或者‘高度’。所以,像素的颜色越白,海拔就越高。
为了生成那些高度图,你可以使用“Terragen”或“Picogen”等软件。

创建高度地形

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

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

这个方法的参数依次是:

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

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

ground.material = groundMaterial;

现在,我们就实现了地球的3D视图。
15 Babylonjs基础入门 高度图
我们还添加了上一节讲到的天空盒,还有点光源来模拟太阳运动。
这是另一个使用Babylon.js实现的高度图内容案例:
15 Babylonjs基础入门 高度图

  • 提示
    当用户操作相机时,如果他能看到底下,或者缩小到天空盒外面,可能会很尴尬。为了避免这种情况,我们约束的相机运动:
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);