BabylonJS-HeightMapからのグラウンド

このセクションでは、HeightMapからGroundを作成する方法を学びます。

構文

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

パラメーター

HeightMapからGroundを作成するには、次のパラメーターを考慮してください-

名前-高さマップに付けられた名前。
URL -高さマップの画像URL。
メッシュのサイズ-幅と高さが必要です。
サブディビジョン-サブディビジョンの数。
最小高-メッシュの最低レベル。
最大高-メッシュの最高レベル。
シーン-地上高マップを追加する必要がある実際のシーン。
更新可能-デフォルトでは、falseです。メッシュを更新する必要がある場合、このプロパティはtrueになります。
Sucesscallback -高さマップと頂点データが作成された後に呼び出されます。これは、メッシュを最初の変数とする関数です。

デモ-HeightMapからのグラウンド

<!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>

出力

上記のコード行は、次の出力を生成します-

基本的な要素の地面の高さマップ

このデモでは、earth1.jpgとheightmap1.jpegの2つの画像を使用しました。画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。任意の画像をダウンロードして、デモリンクで使用できます。

私たちは地面の形状を使用して地面を描き、下に示すように地面の画像テクスチャを与えます-

基本的なセメント地のテクスチャマップ

後で、地上高マップを使用して、上記の画像の高さを描画します。地面の高さマップの場合、使用する画像の高さは次のとおりである必要があります。

Basic Element Ground HeightMap1

上記の画像は、地上高マップの呼び出しで指定された高さを作成する地上画像の周囲のラッパーのようなものです。

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

Babylonjs-ground-from-heightmap

BabylonJS-HeightMapからのグラウンド

構文

パラメーター

デモ-HeightMapからのグラウンド

出力

目次