前面我們學習瞭如何畫一堆房子(如下圖),顯然這單調的綠色大地,看上去效果並不好。
babylon.js中,可以用圖片模擬出地勢高低不同的效果,比如下面這張圖片:
顏色越深的地方,表示地勢越低(即:盆地),而顏色越淺的地方,地勢越高(即:高山),可以參考下面的代碼:
const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 200, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(4, 1, 0)); //利用圖片模擬地勢高低不同的groud const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "../assets/img/villageheightmap.png", { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }); return scene; }
在線地址:https://yjmyzz.github.io/babylon_js_study/day07/01.html
再給它加上點草皮貼圖:
代碼如下:
const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 200, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(4, 1, 0)); const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "../assets/img/villageheightmap.png", { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }); //給largeGround加上材質貼圖 const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat"); largeGroundMat.diffuseTexture = new BABYLON.Texture("../assets/img//valleygrass.png"); largeGround.material = largeGroundMat; return scene; }
在線地址:https://yjmyzz.github.io/babylon_js_study/day07/02.html
看上去有點模糊,我們還可以再貼一層,將山谷底部的區域,貼1塊相對清晰點的圖:
const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 30, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(4, 1, 0)); const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "../assets/img/villageheightmap.png", { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }); const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat"); largeGroundMat.diffuseTexture = new BABYLON.Texture("../assets/img/valleygrass.png"); largeGround.material = largeGroundMat; largeGround.position.y = -0.001; //再畫一塊相對較小的谷底區域 const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 24, height: 24 }); //將谷底貼個更清晰的圖片 const groundMat = new BABYLON.StandardMaterial("groundMat"); groundMat.diffuseTexture = new BABYLON.Texture("../assets/img/villagegreen.png"); groundMat.diffuseTexture.hasAlpha = true; ground.material = groundMat; return scene; }
在線地址:https://yjmyzz.github.io/babylon_js_study/day07/03.html
再將先前畫好的房屋導入:
const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 30, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(4, 1, 0)); const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "../assets/img/villageheightmap.png", { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }); const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat"); largeGroundMat.diffuseTexture = new BABYLON.Texture("../assets/img/valleygrass.png"); largeGround.material = largeGroundMat; largeGround.position.y = -0.001; const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 24, height: 24 }); const groundMat = new BABYLON.StandardMaterial("groundMat"); groundMat.diffuseTexture = new BABYLON.Texture("../assets/img/villagegreen.png"); groundMat.diffuseTexture.hasAlpha = true; ground.material = groundMat; //導入村莊裏的房屋 BABYLON.SceneLoader.ImportMeshAsync("", "../assets/glb/", "village.glb"); return scene; }
在線地址:https://yjmyzz.github.io/babylon_js_study/day07/04.html
問題很明顯:village.glb中自帶了1個綠色的ground,得想辦法把它去掉,好在加載glb文件裏,可能指定回調函數
BABYLON.SceneLoader.ImportMeshAsync("", "../assets/glb/", "village.glb").then((result) => { //把village.glb中自帶的綠色ground設置爲不可見 console.log(result); var _ground = result.meshes[1]; _ground.isVisible = false; });
在線地址:https://yjmyzz.github.io/babylon_js_study/day07/05.html
這樣就行了,可能有同學會問:
1. 你咋知道meshes[1] 就是這個綠色的ground?
2. 你咋知道有isVisible屬性,可以讓它消失?
最簡單的辦法,就是console.log大法:
當然還可以用sandbox 或 playground 在線平臺進行分析,大家可以自行試試。此外Mesh對象的各種屬性,官方文檔上也有詳細說明
參考文檔:
https://doc.babylonjs.com/features/introductionToFeatures/chap5/hills