Babylon简单总结

前言

老板说：在编辑器里面调模型效果。

技术人员：......

老板说：还是写代码调模型效果吧。

技术人员：......

以下就是我常用到的基础语句，其他的可自行查看官网：Tools And Resources | Babylon.js Documentation (babylonjs.com)

1、获取（scene场景查找）

获取灯光节点名字：

scene.getLightByName("sun_Day");

获取Nodes模型图层 ：

scene.getMeshByName("3F_2");

获取Material单个材料名字：

scene.getMaterialByName('a1_2');

获取Textures单个贴图名字：

scene.getTextureByName('d2 (Occlusion)');

获取多个Materials材料名字：

利用 filter  来过滤  配合 indexOf 筛选条件 返回一个数组，在用 forEach 来循环数组，达到一起修改的效果。
var arr = scene.materials.filter(item => (item.name.indexOf("Tree") > -1) && (item.name.length == 5));
arr.forEach(item => {
      item.emissiveColor = new W3D.BJS.Color3(0.5, 0.5, 0.5);
    })

获取多个Textures贴图名字：

利用 filter  来过滤  配合 indexOf 筛选条件 返回一个数组，在用 forEach 来循环数组，达到一起修改的效果。
 var arr = scene.textures.filter(item => item.name.indexOf("Occlusion") > -1);
arr.forEach(item => {
      item.level = 0.1
    })

获取/操作 模型__root__下面所有子节点

let  __root__ = scene.getMeshByName("__root__");

  __root__.getChildTransformNodes(false).forEach((childroot) => {
    if (childroot.getClassName() == "Mesh") {
      childroot.isVisible = true;
    }
  })

2、修改/设置

修改Scene参数

scene.ambientColor = new W3D.Color4(1.000, 1.000, 1.000);
scene.clearColor = new W3D.Color4(1.000, 1.000, 1.000);

// 强度
scene.environmentIntensity = 2.0

// 模式
scene.fogMode = W3D.Scene.FOGMODE_NONE;    // none
scene.fogMode = W3D.Scene.FOGMODE_EXP;     // Exp
scene.fogMode = W3D.Scene.FOGMODE_EXP2;    // Exp2
scene.fogMode = W3D.Scene.FOGMODE_LINEAR;  // Linear

//灰雾密度  Fog Density
scene.fogDensity = 0.0001; 

//灰雾颜色  Fog Color
scene.fogColor =  W3D.Color3.FromInts(78, 78, 78);
scene.fogColor =  new W3D.Color3(0.1, 0.1, 0.1);

//开始 和 结束 Fog Start ， Fog End 
scene.fogEnd = 400000.0000;
scene.fogStart = 2000.0000;

// 位置
scene.gravity = new W3D.Vector3(-15.93,2,-88.51);
scene.gravity =new W3D.BJS.Vector3(1, 2.050, -0.07)

修改Nodes模型参数

myPlane.isVisible = false   //设置隐藏
myPlane.setEnabled(false)

myPlane.position.x = -50;   //平面位置
myPlane.position.y = -50;   //平面位置
myPlane.position.z = -50;   //平面位置

myPlane.rotation.x = Math.PI / 2;    //Math.PI 是90° 
myPlane.rotation.y = Math.PI / 2;    //角度计算： myPlane.rotation.y = Math.PI / 2-->(180 /  需要旋转的角度) ;
myPlane.rotation.z = Math.PI / 2;

scaling  //缩放

修改Materials材料参数 class为 PBRMaterial

1、给材料通道贴上图片
a28.albedoTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);  第四个参数反转图片
a28.metallicTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true); 
a28.reflectionTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true); 
a28.refractionTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);
a28.reflectivityTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);
a28.microSurfaceTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);
a28.bumpTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);
a28.emissiveTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);
a28.opacityTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);
a28.ambientTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);
a28.lightmapTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);
a28.lightmapTexture =  new W3D.BJS.Texture("../../assets/img.jpg", scene , false , true);


2、修改材料 Metallic 的值
a28.metallic = 1;

3、修改材料 Roughness 的值
a28.roughness = 0;

4、修改材料 Albedo 反射光 的颜色值
a28.albedoColor = new W3D.Color3(0.863, 0.863, 0.863);
a28.albedoColor = W3D.BJS.Color3.FromInts(255, 86, 19);

5、修改材料 Reflectivity 反射光 的颜色值
a28.reflectivityColor = new W3D.Color3(0.863, 0.863, 0.863);
a28.reflectivityColor = W3D.BJS.Color3.FromInts(255, 86, 19);

6、修改材料 Emissive 自发光 的颜色值
a28.emissiveColor = new W3D.BJS.Color3(0.675, 0.776, 0.847);
a28.emissiveColor = W3D.BJS.Color3.FromInts(255, 86, 19);

7、修改材料 Ambient 环境光 的颜色值
a28.ambientColor = new W3D.Color3(0.863, 0.863, 0.863);
a28.ambientColor = W3D.BJS.Color3.FromInts(255, 86, 19);

8、修改材料 Micro-surface 的值
a28.microSurface = 0;

9、修改材料 Direct 的值
a28.directIntensity = 1.00;

10、修改材料 Ambient Strength 的值
a28.ambientTextureStrength = 1.8;

11、修改材料 Unlit 无光 （没有灯光也可以显示物体）
a28.unlit = true;

修改灯光

1、灯光强度
light.intensity = 1.00;

2、颜色
light.diffuse = new W3D.Color3(1, 1, 1);
light.groundColor = new W3D.Color3(0.306, 0.373, 0.384);

3、位置
light.direction = new W3D.Vector3(-15.93,2,-88.51);
light.direction =new W3D.BJS.Vector3(1, 2.050, -0.07)

修改相机

1、设置左右角度
camera.alpha = 5.18;

2、设置上下角度
camera.beta = 0.7;

3、设置远近距离
camera.radius = 1426;

4、设置鼠标右键的移动速度
camera.panningSensibility = 20; 

5、设置广角
camera.fov = 1.6000;

6、设置是否开启碰撞
camera.checkCollisions = true

7、设置是否应用重力
camera.applyGravity = false   

8、设置转角移动速度  大--越快
camera.angularSensibility = 2500; 

9、设置按键移动速度 大--越快
camera.speed = 0.15;

10、视角转换
app.CameraFlyTo(scene, new W3D.Vector3(0, 0, 0), 4.7168, 0.000, 3314.2387);

11、设置左右的移动速度
camera.angularSensibilityX = 5000;

12、设置上下的移动速度
camera.angularSensibilityY = 5000;

3、 创建

创建并设置精灵图 Sprite Manager

案例：
var spriteManagerPlayer4 = new W3D.BJS.SpriteManager("spriteManagerPlayer4", "../../assets/2hldl.png", 2, { width: 235, height: 120 }, scene);  //创建精灵管理器
var player4 = new W3D.BJS.Sprite("player4", spriteManagerPlayer4);  //把精灵管加在理器上
player4.width = 25;   //设置图片大小
player4.height = 15;
player4.position =new BABYLON.Vector3(1, 1, 1);  //设置 位置
player4.angle = Math.PI/4;  //设置图片旋转角度
player4.invertU = true;    //设置图片反转
player4.invertV = true;  
player4.isVisible = false;  //设置图片显示/隐藏

//设置位置
player4.position.x = 50.000;
player4.position.y = 70.000;
player4.position.z = -10.000;

创建长方形平面 并附上材质贴图

var myPlane = W3D.BJS.MeshBuilder.CreatePlane("myPlane", { width: 6000, height: 4000 }, scene);  //创建一个长方形平面

  myPlane.rotation.x = Math.PI / 2; //平面位置
  myPlane.position.y = -50;  
  myPlane.position.x = -120.000;  
  myPlane.position.z = 220.000;

  var myPlaneMaterial = new W3D.BJS.PBRMaterial("PlaneLayerPbr", scene);   //创建材质
  myPlaneMaterial.backFaceCulling = false;   //禁止掉背景剔除
  myPlaneMaterial.roughness = 0.5400;   //亮度亮一点
  myPlaneMaterial.emissiveTexture = new W3D.BJS.Texture("../../assets/img.jpg", scene);  //把图片给到emissiveTexture通道里面
  myPlaneMaterial.emissiveColor = new W3D.Color3(0.863, 0.863, 0.863);   //设置材质Albedo颜色
  myPlaneMaterial.reflectivityColor = new W3D.Color3(0, 0, 0);  //设置材质reflectivity颜色

  myPlane.material = myPlaneMaterial   //把材质给到myPlane平面

  myPlane.isVisible = false   //设置隐藏

创建一个纹理

var myMaterial = new W3D.BJS.StandardMaterial("myMaterial", scene);  //创建一个纹理

创建后处理

// !创建后处理
  var pipeline = new W3D.BJS.DefaultRenderingPipeline(
    "defaultPipeline",
    true,
    scene,
    [camera]
  ); 
  pipeline.samples = 16;  //样本 （数字越高 清晰度越高）
  pipeline.fxaaEnabled = false;  //抗锯齿
  pipeline.imageProcessing.fromLinearSpace = false;  //线性

结束语

最近一直忙着学习新的知识，都忘记过来总结了。我也是刚开始学习babylon，一边开着官网，一边看着需求，一边做着笔记。慢慢来，学习新知识总有一个过程，不过最近有一件开心的事，值得一说，我把我家大猫猫带去嘎了，哈哈哈哈，总算不用担心它发情了，唉。拜拜啦！下期可能还是分享的babylon哈哈哈。