babylon101

Height_Map


介绍

在本教程中,我们的目标是了解高度图,并学习如何生成现实的理由。

HeightMap

最后结果

我怎样才能做到这一点 ?

  • 简介 那些山脉很容易用Babylon.js生成,并且只有一个功能。但在我们这样做之前,我们必须创建一种新材料,就像我们之前做过很多次一样:

    // Create a material with our land texture.
    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
    groundMaterial.diffuseTexture = new BABYLON.Texture("Earth__land.jpg", scene);
    
    // This shows how we would apply this material to a plane. In our later
    // example we'll replace this with CreateGroundFromHeightMap.
    var groundPlane = BABYLON.Mesh.CreatePlane("groundPlane", 200.0, scene);
    
    // When our new mesh is read, apply our material.
    groundPlane.material = groundMaterial;
    

HeightMap2

我们的材料,纹理,适用于飞机

  • 高度图的说明

    了解高度贴图是本教程的主要目标。高度图只是一个灰度图像,就像我们要使用的图像一样:

    HeightMap3

    此图像现在将用于生成我们的地面,使用我们图片的不同灰色变体。此图像是您的地面高程数据。每个像素的颜色被解释为距网格“地板”的位移距离或“高度”。所以,像素越白,你的山就越高。

    为了帮助您生成这些灰度高度贴图,您可以使用“Terragen”或“Picogen”等软件。

  • Javascript代码 现在让我们看看这个名为“CreateGroundFromHeightMap”的强大函数:

    // Create a material with our land texture.
    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
    groundMaterial.diffuseTexture = new BABYLON.Texture("Earth__land.jpg", scene);
    
    // Use CreateGroundFromHeightMap to create a height map of 200 units by 200
    // units, with 250 subdivisions in each of the `x` and `z` directions, for a
    // total of 62,500 divisions.
    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);
    
    // When our new mesh is read, apply our material.
    ground.material = groundMaterial;
    

    这里有很多参数:

    • 名称
    • 高度图图片网址
    • 网格宽度
    • 网格高度
    • 细分数量:增加此网格的复杂性,以提高结果的视觉质量

    HeightMap4

    • 最小高度:网格的最低级别
    • 最大高度:网格的最高级别
    • 场景:实际场景
    • Updatable:指示此网格是否可以在以后动态更新(布尔值)
    • successCallback:将在创建高度贴图并创建顶点数据后调用。它是一个以网格作为第一个变量的函数。

    现在我们有一个美丽的地球3D视图!

    HeightMap4

    在我的例子,我添加了一个天空盒(就像我们之前已经了解到 这里),和聚光灯模拟太阳活动。

    这是另一个显示使用BabylonJS高度图可以实现的内容的示例:

    HeightMap5

  • 提示 当用户操作相机时,如果他们可以在地下看到,或者如果它们在天空盒外缩小,则可能会很笨拙。所以,为了避免这种情况,我们可以约束相机运动:

    var camerasBorderFunction = function () {
            //Angle
            if (camera.beta < 0.1)
                camera.beta = 0.1;
            else if (camera.beta > (Math.PI / 2) * 0.9)
                camera.beta = (Math.PI / 2) * 0.9;
    
      //Zoom
            if (camera.radius > 150)
                camera.radius = 150;
    
            if (camera.radius < 30)
                camera.radius = 30;
        };
    
        scene.registerBeforeRender(camerasBorderFunction);
    

您可能有兴趣参观本教程附带 的游乐场演示.

下一步

做得好!你的场景现在很好看,你可以想象很多新的景观!您需要知道的另一件重要事情是 如何创建阴影. 阴影会给你的场景带来漂亮的渲染效果,所以不要忘记它们!