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