首页 > 其他分享 >babylon.js 学习笔记(1)

babylon.js 学习笔记(1)

时间:2023-05-14 15:55:59浏览次数:52  
标签:babylon scene 笔记 js var new BABYLON ground

简单来说,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;
};

运行效果:

在线地址: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

 

四、添加人物

在babylonjs中称为mesh

//核心代码
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 (小怪物加载需要一点时间,打开网页时要等一会儿)

 

五、改变摄像机

//核心代码
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

标签:babylon,scene,笔记,js,var,new,BABYLON,ground
From: https://www.cnblogs.com/yjmyzz/p/babylon_js_study.html

相关文章

  • python安全攻防学习笔记一 语言基础篇
    1.列表python中创建一个列表,只要把逗号分隔的不同的数据项使用方括号括起来即可。如:l1=["你好",0,1,2,3,4,5,6,7,8,9,0]l2=["嘟嘟嘟嘟嘟","雪球来了"]列表中的数据可以进行增删改查,方法有:dell1[1]#删除指定的数据l1.append("我不好")#在末尾添加数据......
  • 显示器与显卡的关系,记录古董笔记本的显示器画质提升经历
    手上有一台老笔记本,用了5年了。显示效果辣眼睛。就一直用公司电脑,家里的就闲置了很久。有一天,拿公司闲置显示器到家里,插上笔记本一试。哇塞!不得了,这画面效果比我笔记本好多了。但是分辨率是一样的,画质提升不少。我就想,如果显示屏再厉害一点,分辨率能不能提高?帧数能不能提高?上......
  • mysql8 json 索引总结
    表结构如下所示:CREATETABLE`test_json`(`id`bigintNOTNULLAUTO_INCREMENT,`name`varchar(32)NOTNULL,`age`intNOTNULL,`test_json_array`jsonNOTNULL,`test_json_object`jsonNOTNULL,`test_json_array_object`jsonNOTNULL,`custinfo......
  • MySQL8之JSON_OVERLAPS、JSON_CONTAINS
    表结构如下所示:CREATETABLE`test_json`(`id`bigintNOTNULLAUTO_INCREMENT,`name`varchar(32)NOTNULL,`age`intNOTNULL,`test_json_array`jsonNOTNULL,`test_json_object`jsonNOTNULL,`test_json_array_object`jsonNOTNULL,`custinfo......
  • MySQL8版本之json_keys、json_object、json_overlaps、json_pretty
    CREATETABLE`test_json`(`id`bigintNOTNULLAUTO_INCREMENT,`name`varchar(32)NOTNULL,`age`intNOTNULL,`test_json_array`jsonNOTNULL,`test_json_object`jsonNOTNULL,`test_json_array_object`jsonNOTNULL,`custinfo`jsonDEFAU......
  • 线段树合并 学习笔记
    算法两棵动态开点线段树,直接把一棵线段树上的信息合并到另一棵树上。递归合并:如果某个节点两棵都有,合并,然后递归下去。否则直接返回节点。复杂度证明记权值线段树值域范围为\(m\),\(n\)次插入操作。因为动态开点,一次插入会新增\(\log_2m\)个节点,总节点数\(n\ti......
  • Java学习笔记7
    ......
  • Java学习笔记2
    数据类型Java是一种强类型语言,必须为每一个变量声明一种类型。在Java中数据类型分为:基本数据类型和引用数据类型。下面讨论Java的8种基本数据类型,4种整型,2种浮点型,1种字符类型char(用于表示Unicode编码的代码单元)和1种表示真值的boolean类型。标识符:就是给类,方法,变量等起的名......
  • Java学习笔记3
    流程控制语句流程控制即控制流程,具体指控制程序的执行流程,而程序的执行流程分为三种结构:顺序结构(之前我们写的代码都是顺序结构)、分支结构(用到if判断)、循环结构(用到while与for)。顺序结构顺序结构语句是Java程序默认的执行流程,按照代码的先后顺序,从上到下依次执行。分支结构......
  • Java学习笔记4
    练习题练习1:机票机票价格按照淡旺季,头等舱和经济舱收费,输入机票原价,月份和头等舱或经济舱。按照如下规则计算机票价格:旺季(5-10月)头等舱9折,经济舱8.5折,淡季(11月到来年4月)头等舱7折,经济舱6.5折。importjava.util.Scanner;publicclassHello{publicstaticvoidmain(S......