babylon.js 學習筆記(7)

前面我們學習瞭如何畫一堆房子（如下圖），顯然這單調的綠色大地，看上去效果並不好。

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