
- BabylonJS 教程
- BabylonJS - 首頁
- BabylonJS - 簡介
- BabylonJS - 環境設定
- BabylonJS - 概述
- BabylonJS - 基本元素
- BabylonJS - 材質
- BabylonJS - 動畫
- BabylonJS - 相機
- BabylonJS - 光照
- BabylonJS - 引數化形狀
- BabylonJS - 網格
- 向量位置和旋轉
- BabylonJS - 貼花
- BabylonJS - Curve3
- BabylonJS - 動態紋理
- BabylonJS - 視差貼圖
- BabylonJS - 鏡頭光暈
- BabylonJS - 建立螢幕截圖
- BabylonJS - 反射探針
- 標準渲染管線
- BabylonJS - ShaderMaterial
- BabylonJS - 骨骼和骨架
- BabylonJS - 物理引擎
- BabylonJS - 播放聲音和音樂
- BabylonJS 有用資源
- BabylonJS - 快速指南
- BabylonJS - 有用資源
- BabylonJS - 討論
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>
輸出
以上程式碼行生成以下輸出 -

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

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

上圖就像地面影像周圍的包裝器,根據地面高度圖呼叫中給出的高度建立高度。
var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "images/heightmap1.jpeg", 200, 200, 250, 0, 10, scene, false);
babylonjs_basic_elements.htm
廣告