babylon.js 學習筆記(1)

簡單來說，babylon.js 是一個能跑在瀏覽器上的(3D)遊戲渲染引擎，而且官方提供了一個友好在線交互學習平臺Playground，其開源項目在github上star數截止2023.05.14高達20.6K。下面是官方文檔的學習筆記 ：

一、hello world

強烈建議新手通過Playground在線體驗，先來看第1個示例：

核心代碼如下：(關鍵地方已加註釋)

//核心代碼
var createScene = function () {
    // 創建babylon場景(或者叫"舞臺"更容易理解)
    var scene = new BABYLON.Scene(engine);

    // 新建1個攝像機（對着舞臺，有興趣的同學可以調整下0, 5, -10這幾個參數值，可以分別控制x,y,z三個軸的觀察視角）
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // 將攝像機的目標正對場景中心
    camera.setTarget(BABYLON.Vector3.Zero());

    //攝像頭與canvas關聯後，鼠標就能控制目標旋轉、放大、縮小等動作
    camera.attachControl(canvas, true);

    //光源（想象一下舞臺上，演員表演時，要有聚光燈照在主角身上）
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // 控制光源的亮度
    light.intensity = 0.7;

    //在scene上放置1個球（diameter-直徑,segments -邊的個數，越大球看起來越圓潤，有興趣的，可以把segments調整成1對比看看）
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2, segments: 32 }, scene);

    //將球向上移1/2的高度(即：讓球底部在場景中心點之上，默認y=0，球心與場景中心重合)
    sphere.position.y = 1;

    //放一塊"地板"在場景中央(長寬均爲6，即正方形)
    var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);

    return scene;
};

上面這段代碼不用死記，理解scene、camera、light、mesh 這4要素即可。

 

運行效果：

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

 

二、設置Groud爲紅色

可以給地板換個顏色

//核心代碼
var createScene = function () {
    ...

    //放一塊"地板"在場景中央(長寬均爲6，即正方形)
    var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);

    //！！！設置地板爲紅色
    let groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
    ground.material = groundMaterial;
    ground.material.diffuseColor = BABYLON.Color3.Red();

    return scene;
};

運行效果：

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

 

三、地板貼圖

//核心代碼
        var createScene = function () {
            ...

            //放一塊"地板"在場景中央(長寬均爲6，即正方形)
            var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);


            let groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
            ground.material = groundMaterial;

            //！！！設置地板貼上紅黑相間的方塊
            let groundTexture = new BABYLON.Texture(Assets.textures.checkerboard_basecolor_png.rootUrl, scene);
            ground.material.diffuseTexture = groundTexture;

            return scene;
        };

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

 

四、添加複雜對象

//核心代碼
var createScene = function () {
    ...

    //設置地板貼上紅黑相間的方塊
    let groundTexture = new BABYLON.Texture(Assets.textures.checkerboard_basecolor_png.rootUrl, scene);
    ground.material.diffuseTexture = groundTexture;

    //加1個小怪物
    BABYLON.SceneLoader.ImportMesh("", Assets.meshes.Yeti.rootUrl, Assets.meshes.Yeti.filename, scene, function (newMeshes) {
        newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
    });

    return scene;
};

注：由於球體部分的代碼，並沒有去掉，所以最終球跟小怪物是疊加在一起的，形成了1對奇怪的組合。

在線地址： https://yjmyzz.github.io/babylon_js_study/day01/04.html (小怪物加載需要一點時間，打開網頁時要等一會兒)

tips：任何複雜的對象(即mesh)，都是一堆小三角形及各種切面的組合，三角形數越多，最終的對象越逼真。借用一張官網的圖體會下：

 這裏可以做1個小測試，把球體的segments值，調成1個很小的值，比如4

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2, segments: 4 }, scene);

就能發現球不那麼圓潤了。 

 

五、改變攝像機

//核心代碼
var createScene = function () {
    ...

    // 新建1個攝像機（對着舞臺，有興趣的同學可以調整下0, 5, -10這幾個參數值，可以分別控制x,y,z三個軸的觀察視角）
    // var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 10, BABYLON.Vector3.Zero(), scene);

    ...

    // //在scene上放置1個球（diameter-直徑,segments -邊的個數，越大球看起來越圓潤，有興趣的，可以把segments調整成1對比看看）
    // var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2, segments: 32 }, scene);

    // //將球向上移1/2的高度(即：讓球底部在場景中心點之上，默認y=0，球心與場景中心重合)
    // sphere.position.y = 1;

    ...

    
    return scene;
};

換了1種攝像機，同時把球體去掉後

在線地址：https://yjmyzz.github.io/babylon_js_study/day01/05.html