babylon.js 學習筆記(8)

接上回繼續，現在的村莊已經有點象樣了，但是遠處的背景仍比較單調(如下圖），今天來學習如何處理天空背景。

babylon.js中，把整個空間假象成一個巨大的立方體(稱爲SkyBox)，然後依次給立方體的6個面，貼上天空的背景圖(如下圖)

在代碼中只要指定這6張圖的rootUrl即可，babylon.js會自動拼上一系列後綴，按如下約定去加載圖片：

_px.jpg	_nx.jpg	_py.jpg	_ny.jpg	_pz.jpg	_nz.jpg

這個不用死記：p指positive(座標軸正向)，n指negtive(座標軸負向)，所以_px.jpg，即貼在x軸正向（即：立方體右面），類似的 _nz.jpg，就是z軸負方向（立方體前面）

參考代碼如下：重點在於CubeTexture的使用

var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 40, new BABYLON.Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene);
    light.diffuse = new BABYLON.Color3(1, 0, 0);

    // Skybox
    var skybox = BABYLON.MeshBuilder.CreateBox("skyBoxDemo", { size: 15.0 }, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox1", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../assets/img/sky/skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    return scene;

};

注意目錄的相對路徑：

在線地址： https://yjmyzz.github.io/babylon_js_study/day08/01.html

當這個SkyBox放到足夠大時，就會產生天空背景的效果： 

var createScene = function () {
    ...
    //設置攝像機的radius爲5(離目標近一點)
    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
   ...
    //Skybox（設置size調整成1000）
    var skybox = BABYLON.MeshBuilder.CreateBox("skyBoxDemo", { size: 1000.0 }, scene);
    ...
    return scene;

};

在線地址 ：https://yjmyzz.github.io/babylon_js_study/day08/02.html

 

將這個天空背景應用到先前畫的村莊：

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 3.5, Math.PI / 1.5, 30, new BABYLON.Vector3(0, 0, 0));

    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    //導入村莊的模型
    BABYLON.SceneLoader.ImportMeshAsync("", "../assets/glb/", "valleyvillage.glb");

    // Skybox
    var skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000.0 }, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skybox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../assets/img/sky/skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    //限制攝像的視角
    camera.upperBetaLimit = Math.PI / 2.2;

    return scene;
}

在線地址: https://yjmyzz.github.io/babylon_js_study/day08/03.html

 

調整reflectionTexture.coordinatesMode的枚舉值，還能產生類似"天空之鏡"的效果：

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 3.5, Math.PI / 1.5, 30, new BABYLON.Vector3(0, 0, 0));
    camera.upperBetaLimit = Math.PI / 1.5;
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    // Skybox
    var skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000.0 }, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skybox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../assets/img/sky/skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    var shapeMaterial = new BABYLON.StandardMaterial("mat", scene);
    shapeMaterial.backFaceCulling = true;
    shapeMaterial.reflectionTexture = new BABYLON.CubeTexture("../assets/img/sky/skybox", scene);
    //指定爲“平面模式”
    shapeMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.PLANAR_MODE;
    shapeMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1);
    shapeMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);

    // Box
    var box = BABYLON.MeshBuilder.CreateBox("box", { size: 5 }, scene);
    box.material = shapeMaterial;
    box.position.x = -20;
    box.rotation.y = Math.PI / 8;
    box.rotation.x = -Math.PI / 4;

    // Sphere
    var ball = BABYLON.MeshBuilder.CreateSphere("ball", { diameter: 8 }, scene);
    ball.material = shapeMaterial;
    ball.position = new BABYLON.Vector3(-5, 2, 5);
    ball.rotation.y = Math.PI / 8;
    ball.rotation.x = -Math.PI / 8;

    //Ground
    var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
    ground.material = shapeMaterial;
    ground.position = new BABYLON.Vector3(10, 0, 5);
    ground.rotation.y = Math.PI / 8;
    ground.rotation.x = -Math.PI / 2;
    return scene;
}

在線地址：https://yjmyzz.github.io/babylon_js_study/day08/04.html

  

參考文檔：

https://doc.babylonjs.com/features/introductionToFeatures/chap5/sky

https://doc.babylonjs.com/features/featuresDeepDive/materials/using/reflectionTexture