BabylonJS - 從高度圖建立地面



在本節中,我們將學習如何從高度圖建立地面。

語法

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

引數

請考慮以下引數來建立從高度圖建立地面 -

  • 名稱 - 給高度圖指定的名稱。

  • URL - 高度圖的影像 URL。

  • 網格尺寸 - 它需要寬度和高度。

  • 細分 - 細分的數量。

  • 最小高度 - 網格的最低水平。

  • 最大高度 - 網格的最高水平。

  • 場景 - 需要新增地面高度圖的實際場景。

  • 可更新 - 預設情況下為 false。如果需要更新網格,此屬性將為 true。

  • 成功回撥 - 在建立高度圖和頂點資料後將被呼叫。它是一個函式,其第一個變數是網格。

演示 - 從高度圖建立地面

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo</title>
      <script src = "babylon.js"></script>
      <style>
         canvas { width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            // Light
            var spot = new BABYLON.PointLight("spot", new BABYLON.Vector3(0, 30, 10), scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);

            // Camera
            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);

            // Ground
            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
            groundMaterial.diffuseTexture = new BABYLON.Texture("images/earth1.jpg", scene);

            var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "images/heightmap1.jpeg", 200, 200, 250, 0, 10, scene, false);
            ground.material = groundMaterial;		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

以上程式碼行生成以下輸出 -

Basic Element Ground HeightMap

在此演示中,我們使用了兩個影像 - earth1.jpg 和 heightmap1.jpeg。這些影像儲存在本地 images/ 資料夾中,並在下面貼上以供參考。您可以下載任何您選擇的影像並用於演示連結。

我們將使用地面形狀繪製地面併為地面提供影像紋理,如下所示 -

Basic Eement Ground Texture Map

稍後,我們將使用地面高度圖繪製上面顯示的影像的高度。對於地面高度圖,使用的影像需要具有如下所示的高度。

Basic Element Ground HeightMap1

上圖就像地面影像周圍的包裝器,根據地面高度圖呼叫中給出的高度建立高度。

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "images/heightmap1.jpeg", 200, 200, 250, 0, 10, scene, false);
babylonjs_basic_elements.htm
廣告