【温故知新】——BABYLON.js学习之路·前辈经验（二）

前言：在上一篇随笔BABYLON.js学习之路·前辈经验（一）中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验，这一篇主要对开发中常见的一些功能点做一个梳理，这里只作为温故知新。

---

 

一、相机

 

 

     弧形旋转相机 —— 使用鼠标和光标键将相机绕着一个三维点(此处时0坐标处) 旋转

• 参数:  名称, 水平角(alpha), 垂直角(beta), 半径, 围绕的目标, 场景

var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
cameras.target = new BABYLON.Vector3(0,0,0);

    自由相机 —— 你可以使用鼠标和光标键将之在场景中移动

• 参数:  名称，位置，场景

var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);
 cameras.setTarget(new BABYLON.Vector3(0,0,0));

    触控相机 —— 使用触控设备来在场景中移动它

• 参数:  名称，位置，场景

var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);
//使用 setPosition() 把相机准确地放置到我们期望的三维空间中的位置. 便捷的 setPosition() 方法将会做好剩下的事情
camera.setPosition(new BABYLON.Vector3(0, 15, -30));

• 限制相机参数

//对象上下移动范围
camera.lowerBetaLimit = Math.PI/2-Math.PI/6;
camera.upperBetaLimit = Math.PI/2+Math.PI/6;
//对象左右移动范围
camera.lowerAlphaLimit = -Math.PI/2-Math.PI/5;
camera.upperAlphaLimit = -Math.PI/2+Math.PI/5;
//对象远近移动范围
camera.lowerRadiusLimit  = -Math.PI/3;
camera.upperRadiusLimit = Math.PI/3;
   
camera.wheelPrecision = 0.5;  //电脑滚轮速度 越小灵敏都越高
camera.pinchPrecision = 1;    //手机放大缩小速度 越小灵敏都越高

    定向相机 —— 根据设备导向事件做出反应的相机 ， 例如向前或向后倾斜的现代化移动设备

var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 0, 0), scene);
// 将相机对准一个特地的位置
camera.setTarget(new BABYLON.Vector3(0, 0, -10));
// 设置相机对运动和旋转的灵敏度
camera.angularSensibility = 10;
camera.moveSensibility = 10;
// 把相机固体在画布上
camera.attachControl(canvas, true);

    相机相关设置

//可旋转相机
camera.attachControl(canvas, true);

//不可旋转相机
camera.detachControl(canvas);
 
camera.inertia  //相机惯性
camera.targetScreenOffset.x=40; //相机X轴偏移量  
camera.targetScreenOffset.y=-70;  //相机Y轴偏移量

    相机与Mesh

//获取摄像机能看到的mesh
scene.activeCamera.getActiveMeshes()
scene.getActiveMeshes()

//判断mesh是否在摄像机范围内
scene.isActiveMesh(scene.meshes[2])
scene.activeCamera.isActiveMesh(scene.meshes[2])

 

二、灯光

 

 

 

漫反射(diffuse) 和 镜面反射(specular) 属性来控制任何光源的颜色:

 

    点光源 —— 点光源时世界空间中由一个唯一点定义的光源. 光源从该点向所有方向发射光线. 点光源的一个好例子是太阳.

var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);
light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

    定向光源 —— 定向光建立在原点(0,0,0)的位置. 像点光源一样

var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene);
light0.diffuse = new BABYLON.Color3(1, 0, 0);

    聚光灯光源 —— 一个聚光灯光源是通过一个位置 (第二个参数), 一个方向(第三个参数), 一个角度(第四个参数), 和一个衰减指数(第五个参数)定义的. 这些值定义了一个圆椎体，光源从中发射出来

• 角度(弧度单位)定义了聚光灯光源椎体光束的大小(照明q区域), 同时指数定义了光随距离(光照射的距离)衰减的速度

• 一个带红色漫反射的白色镜面反射光聚光灯光源，椎体0.8弧度，衰减指数2

var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -10, 0), 0.8, 2, scene);
light0.diffuse = new BABYLON.Color3(1, 0, 0); 
light0.specular = new BABYLON.Color3(1, 1, 1);

    半球状光源 —— 半球光源是模式现实环境光的简单方法. 半球光源是通过一个朝天的方向(构造函数的第二个参数)和三种颜色定义， 一种颜色提供给漫反射(天空的颜色-朝上的像素/面片)，一种是给地面的 (朝下的像素/面片的颜色), 以及一种给镜面反射的

• 白/黑半球光源 - 朝上的像素白色(漫反射), 朝下的像素黑色(底色)

var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
light0.diffuse = new BABYLON.Color3(1, 1, 1);
light0.specular = new BABYLON.Color3(1, 1, 1);
light0.groundColor = new BABYLON.Color3(0, 0, 0);

scene.lights[0].excludedMeshes.push(mesh)// mesh不受灯光影响

• 清除灯光

if (scene.lights[0]) {
      scene.lights[0].setEnabled(false);
      scene.lights[0].dispose();
}

 

三、创建模型

 

 

    创建一个球体

• 参数:  名字, 细分段数 (高度细节或不需), 大小, 将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面)

• 如果你需要默认的表现那么最后两个参数可以忽略:

var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, 场景, false,  BABYLON.Mesh.DEFAULTSIDE);

    创建一个平面

• 参数:  名字, 大小, 和将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面)

• 如果你需要默认的表现,那么最后两个参数可以忽略:

var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);

    创建一个盘片(或一个规则多边形)

• 参数:  名字, 半径, 边数, 场景, 可更新否和可选的朝向(参见下面)

• 如果你需要默认的表现,那么最后两个参数参数可以忽略:

var disc = BABYLON.Mesh.CreateDisc("disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);

    创建一个圆柱体

• 参数:  名称, 高度, 顶直径, 底直径, 边数, 高向细分度, 场景, 可更新否和可选的朝向(参见下面)

• 如果你需要默认表现,那么最后两个参数可以忽略:

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false, BABYLON.Mesh.DEFAULTSIDE);

    创建一个环面体

• 参数:  名称, 直径, 厚度, 边数(高度细节或不是), 场景, 可更新否和可选的朝向(参见下面)

• 如果你使用默认表现那么最后两个参数可忽略 :

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);

    创建一个结

• 参数:  名称, 半径, tube, 半径上分段数, tubularSegments, p, q, 场景, 可更新否和可选的朝向(参见下面)

• 如果你使用默认的表现那么最后的两个参数可以忽略 :

var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);

    创建一个地面

• 参数: 名称, 宽度, 纵深, 子分段数, 场景

var ground = BABYLON.Mesh.CreateGround("ground", 6, 6, 2, scene);

    创建一个SubMesh

new SubMesh（materialIndex，verticesStart，verticesCount，indexStart，indexCount，mesh，renderingMesh，createBoundingBox）
//materialIndex    数    要使用的材料的索引（此索引用于在多材质的subMaterials集合内找到正确的材质）
//verticesStart    数    
//verticesCount    数    使用的顶点数
//indexStart    任何要使用的第一个indice的索引
//indexCount       数    指数计数
//Mesh  @param mesh   网格    摘要
//renderingMesh    网格    如果已定义，则用于代替网格参数（可选的）

    创建空Mesh

new BABYLON.Mesh("a", scene);

    其它Mesh相关

• 合并网格

var boxes_merged = BABYLON.Mesh.MergeMeshes(scene.getMeshesByTags("box"));
boxes_merged.position.x = 0;

• position 是mesh的位置

• absolutePosition是 mesh轴的位置

• 如果将diameterTop设置为零，则会得到锥体而不是圆柱体。示例：

var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);

•  获取mesh数据类型——位置/uv/color/材质

mesh.getVerticesDataKinds()

 

四、动画

 

 

    创建动画对象

• 参数1 - 动画的名称，仅此而已。

• 参数 2 - 关心的属性。这个可以是网格的任何属性，取决于你要修改什么。此处我们想在X轴方向上放大对象, 所以此处使用“scaling.x”。

• 参数 3 - 请求的每秒帧数：这个动画里最大 的FPS。

• 参数 4 - 修改的类型。此处你决定开始修改什么类型的数据：floating（比如是浮点数），一个向量(比如是方向)，或四元数。具体的值会是：

1. BABYLON.Animation.ANIMATIONTYPE_FLOAT 
2. BABYLON.Animation.ANIMATIONTYPE_VECTOR2
3. BABYLON.Animation.ANIMATIONTYPE_VECTOR3
4. BABYLON.Animation.ANIMATIONTYPE_QUATERNION
5. BABYLON.Animation.ANIMATIONTYPE_MATRIX
6. BABYLON.Animation.ANIMATIONTYPE_COLOR3

• 参数 5 - 最后, 你需要决定并输入这个动画的行为类型，这些会决定动画的受限(比如:当到最后一帧时是否继续，是否重新开始，或者停止)：

1. 使用之前的值然后递增： BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
2. 从初始值重启 BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
3. 保持最后的值: BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

var animationBox = new BABYLON.Animation("myAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    创建动画

CreateAndStartAnimation(name, node, targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction, onAnimationEnd)
BABYLON.Animation.CreateAndStartAnimation("mesh", mesh[0], 'rotation.y', 30, 150, mesh[0].rotation.y, mesh[0].rotation.y+(Math.PI*2), 1);
// name           姓名  
// node           节点（目标）  
// targetProperty 目标属性  
// framePerSecond 帧每秒
// totalFrame     总共帧数  
// from           开始状态
// to             结束状态
// loopMode       循环模式(次数) 可选  
// easingFunction EasingFunction   可选

• 创建一个动画以将属性的当前值插入给定目标

new InterpolateValueAction(triggerOptions, target, propertyPath, value, duration, condition, stopOtherAnimations, onInterpolationDone)
// triggerOptions  触发器选项
// target          目标
// propertyPath    目标的属性
// value           目标的值
// duration        持续时间
// condition       条件
// stopOtherAnimations   停止其他动画  boolean (可选的)

• 此操作是一个容器。 您可以使用它在同一触发器上同时执行多个操作。 children属性必须是一个操作数组

new CombineAction(triggerOptions, children, condition) ：
// triggerOptions：触发器选项
// children ：  The childrens actions
// condition ： 执行动作的条件（可选）

• 创建新的设置值操作

new SetValueAction(triggerOptions, target, propertyPath, value, condition)
//triggerOptions  触发器选项
//target         行动目标
//propertyPath   行动目标
//value          动作值

new DoNothingAction(triggerOptions, condition) //不作为

new SetStateAction(triggerOptions, target, value, condition)

• BABYLON.IncrementValueAction：向数字属性添加指定的值

IncrementValueAction(trigger, target, propertyPath, value, condition)

• 状态条件构造函数

new StateCondition(actionManager, target, value)
//举例
var condition1 = new BABYLON.StateCondition(sphere.actionManager, light1, "off");

    动画API

animation.stop()    // 完全停止， 要想开始动画，就要重建动画
animation.pause()   // 动画暂停，保存帧数
animation.reset()   // 动画回到第0帧 ， 但动画没启动
animation.restart() // 动画启动， 从暂停的帧数开始

 

五、贴图

 

 

    贴图视频

var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
var mat = new BABYLON.StandardMaterial("mat", scene);
var videoTexture = new BABYLON.VideoTexture("video", ["video/babylonjs.mp4"], scene, true, true);
mat.diffuseTexture = videoTexture;
ground.material = mat;

    贴图翻转

materialSphere4.diffuseTexture.vOffset = 0.1; //垂直翻转
materialSphere4.diffuseTexture.uOffset = 0.4; //水平翻转
materialSphere6.backFaceCulling = false; //背面贴图显示
materialSphere5.diffuseTexture.hasAlpha = true;//适用png的透明（png比较消耗性能）

    贴图纹理

• reflectionTexture  反射纹理

• MirrorTexture 镜子纹理

mirror.material.reflectionTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, true);
mirror.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);

• bumpMaterial  凹凸纹理

var bumpMaterial = new BABYLON.StandardMaterial("texture1", scene);
bumpMaterial.diffuseColor = new BABYLON.Color3(0, 0, 1);//Blue
bumpMaterial.bumpTexture = new BABYLON.Texture("textures/normalMap.jpg", scene);

• getTextureCoordinates()  计算所选点的纹理坐标; 这些将作为Vector2纹理空间返回，这意味着它的坐标将在0和1之间

 

六、旋转轴

 

 

    门的旋转轴

var door=scene.getMeshByName("56_Box03");
var doorParent=new BABYLON.Mesh.CreateBox("doorParent",100,scene);
doorParent.position=door.position.add(new BABYLON.Vector3(300,0,0));
door.parent=doorParent;
door.position=new BABYLON.Vector3.Zero().add(new BABYLON.Vector3(-300,0,0))

     模型边框

plan.renderOutline = true;
plan.outlineWidth = 10;
plan.outlineColor = new BABYLON.Color3(0, 1, 1);

 

七、材质

 

 

    网格材质

grid = new BABYLON.GridMaterial("grid", scene);

scene.getMeshByName('woshichuanglian').material= grid;

grid.gridRatio = 1;
grid.majorUnitFrequency = 2;
grid.minorUnitVisibility = 4;

grid.opacity = 0.58;
grid.mainColor = new BABYLON.Color3(1,1,1)
grid.lineColor = new BABYLON.Color3(1,1,1)

    多材质

var multi = new BABYLON.MultiMaterial('multi' , scene);

var hdrTexture = new BABYLON.HDRCubeTexture("img/room.hdr", scene, 512);
var metal = new BABYLON.PBRMaterial("metal", scene);

metal.reflectionTexture = hdrTexture; //反射纹理
metal.directIntensity = 3; //直接灯的强度
metal.specularIntensity = 5;
metal.emissiveIntensity = 100; //材料的发射部分的强度。 这有助于控制发光效果而不修改发光颜色。
metal.environmentIntensity = 1; //环境的强度，例如环境将会点亮对象多少 无论是通过粗糙材料的谐波或通过对闪亮材料的补偿
metal.cameraExposure = 1.2; //相机曝光 亮度
metal.cameraContrast = 1; //相机对比度 明暗对比
metal.microSurface =0.9; //反射出的物体的细致程度
metal.useRadianceOverAlpha = true; //指定材料会将反射亮点保持在透明表面上
metal.reflectivityColor = new BABYLON.Color3(1, 1, 1); //反射的物体
metal.albedoColor = new BABYLON.Color3(1, 1, 1); //反射出的光
mesh[0].material = metal;

    如果纹理有alpha 设置hasAlpha为true

materialSphere1.diffuseTexture.hasAlpha = true;
materialSphere1.useAlphaFromDiffuseTexture = true //alpha混合

    所产生的颜色与漫反射颜色相乘

    如果要使用烘烤成纹理的光照贴图，这一点尤其有用。您可以使用ambientColor属性指定纯色：

materialSphere1.ambientColor = new BABYLON.Color3(1, 0.2, 0.7);
materialSphere1.ambientTexture = new BABYLON.Texture("grass.png", scene);

    材质属性

• directIntensity：控制材质反射的漫反射和镜面反射量。

• emissiveIntensity：控制材质发射的发射光的水平。

• environmentIntensity：控制来自环境的反射光的水平。

• specularIntensity：由于材质仍然使用像闪光计算那样的blinn Phong，这可以帮助降低材料的镜面水平而不会影响反射率。

pbr.cameraExposure = 0.66; //相机曝光
pbr.cameraContrast = 1.66; //相机对比度

materialSphere.albedoColor = new BABYLON.Color3(0.2, 0.9, 1.0); //球颜色
materialSphere.reflectivityColor = new BABYLON.Color3(0.8, 0.8, 0.8); //反射率颜色 ，黑色镜面将意味着几乎没有反射，白色将从完美的镜子接近
materialSphere.microSurface = 0.98;//越高，光泽度越高 反射越清晰
materialSphere.usePhysicalLightFalloff = false;
//光泽度存储在反射率图的alpha通道中，可以防止在一种材料上具有恒定的光泽度
materialSphere.useMicroSurfaceFromReflectivityMap = false;
pbr.useMicroSurfaceFromReflectivityMapAlpha = true;

     注： 环境色彩需要设置场景的环境颜色，给予环境背景照明。

scene.ambientColor = new BABYLON.Color3(1, 1, 1);

• TexturesMode

coordinatesMode: int (0 = explicit, 1 = spherical, 2 = planar, 3 = cubic, 4 = projection, 5 = skybox),
projectionMat.reflectionTexture.coordinatesMode = BABYLON.Texture.PROJECTION_MODE;

• billboardMode

"billboardMode": int (0 = None, 1 = X, 2 = Y, 4 = Z, 7 = All),
CreatePlane.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_ALL; //始终面向你 广告板

    其它

material.maxSimultaneousLights = lightsCount; //最大同时能接受灯光

material.disableLighting = true;//材质不收灯光影响

mat.diffuseColor = BABYLON.Color3.FromInts(121,189,224);
mat.diffuseColor = BABYLON.Color3.FromeHexDtring("#000000");

    注意： PBRMaterial不受灯光影响

 

八、高度地图

 

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);
// 名称
// 高度地图图片网址
// 此网格的大小：宽度  高度
// 细分数量：增加此网格的复杂性，以提高其视觉质量：
// 最小高度：网格的最低水平
// 最大高度：网格的最高水平
// 场景：实际场景
// 可更新：表示如果此网孔可以动态在未来被更新（布尔）
// successCallback：将在创建高度图并创建顶点数据后调用。它是一个具有网格作为其第一个变量的函数。

最后，当我们的新网格准备好了，我们只需应用我们的材料：

ground.material = groundMaterial;

 

九、发光

 

    官方文档 

var hl = new BABYLON.HighlightLayer("hl1", scene);
hl.addMesh(box, BABYLON.Color3.Green());
hl.isEnabled = true;

    想让体积散射光放到mesh上时 ， 必须给mesh加上material

var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays',1, camera, sphere, 100, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, true);

 

十、展示边界

 

 

mesh.showBoundingBox =true;

 

十一、粒子系统

 

 

    创建粒子系统

var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene, customEffect);
//第一个参数是名称，第二个参数是粒子的最大数量，第三个参数是场景，
//可选的第四个参数是对粒子的着色效果的引用，覆盖默认着色器


// 把blendmode换成下面这个就可以了。但是颜色好像有影响
BLENDMODE_ONEONE //- colors are added without alpha affecting the result; //粒子颜色不受alpha影响。
BLENDMODE_STANDARD //- colors are added using particle’s alpha. //粒子颜色使用粒子本身alpha

 

十二、天空盒

 

 

    创建Skybox天空盒

var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", scene);

hdrSkyboxMaterial.backFaceCulling = false;
hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
hdrSkyboxMaterial.microSurface = 1.0;
hdrSkyboxMaterial.cameraExposure = 0.6;
hdrSkyboxMaterial.cameraContrast = 1.6;
hdrSkyboxMaterial.disableLighting = true;
hdrSkybox.material = hdrSkyboxMaterial;
hdrSkybox.infiniteDistance = true;

skybox.infiniteDistance = true; //无线距离
skybox.renderingGroupId = 0;
skyboxMaterial.disableLighting = true; //对光照没反应， 不能照明

    天空盒图片命名

• n开头的都在相应轴的反方向： _nx   _ny   _nz
• p开头的都在相应轴的正方向： _px   _py   _pz

    场景默认天空盒

scene.imageProcessingConfiguration.contrast = 1; //对比度
scene.imageProcessingConfiguration.exposure = 1; //曝光
scene.imageProcessingConfiguration.toneMappingEnabled = true; //色调映射启用

    场景天空盒图片   

var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData("images/environment.dds", scene); //场景天空盒的图片， 可以是.dds文件
var hdrTexture =new BABYLON.CubeTexture('images/cubemap/cubemap', scene); //场景天空盒的图片，可以是图片
hdrTexture.gammaSpace = false; //贴图的空间，不知道干什么用

    绘制场景天空盒

• 本质上就是创建了一个很大的天空盒， 用了pbr材质， 然后贴了材质并且模糊， 就是这样:)
• 注意： 在这只场景天空盒子的时候， 场景内默认的pbr材质的反射和折射贴图，默认为场景天空盒的贴图

var sky = scene.createDefaultSkybox(hdrTexture, true, 100000, 1); // 第一个参数是文件， 第二个参数是pbr材质， 第三是范围， 半径， 第四是模糊程度（0是不模糊）

    创建场景默认的灯光和相机

scene.createDefaultCameraOrLight(true, true, true);

 

十三、阴影

 

 

var shadowGenerator = new BABYLON.ShadowGenerator(2048, light2);
shadowGenerator.setDarkness(0);  //阴影黑暗程度
shadowGenerator.usePoissonSampling = true;
plane.receiveShadows = true;

shadowGenerator.getShadowMap().renderList.push(mesh[0]);

 

十四、反射

 

 

    选择要反射的物体

var probe = new BABYLON.ReflectionProbe("main", 512, scene);
probe.renderList.push(plane);
probe.attachToMesh(mesh);

var mainMaterial = new BABYLON.ReflectionProbe("meta2", scene);
mainMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);
mainMaterial.reflectionTexture = probe.cubeTexture;
mainMaterial.reflectionFresnelParameters = new BABYLON.FresnelParameters();
mainMaterial.reflectionFresnelParameters.bias = 0.02;
mesh[0].material = mainMaterial;

    镜面反射

• 设置反射材质时候，如果反射材质没出现，看看是不是光强度太大【还可以设置材质不受光照影响】

var material3 = new BABYLON.StandardMaterial('met3' , scene)

material3.reflectionTexture = new BABYLON.MirrorTexture('mirror' ,512, scene, true); //镜子纹理
material3.reflectionTexture.mirrorPlane= new BABYLON.Plane(0,-1.0,0,-10.0); //反射层
material3.reflectionTexture.renderList = [plane];  //添加把要反射的东西
material3.reflectionTexture.level = 0.6;

mesh[0].material = material3;

 

十五、折射

 

 

    平面

var refractionTexture = new BABYLON.RefractionTexture("th", 1024, scene);

refractionTexture.renderList.push(yellowSphere);
refractionTexture.renderList.push(greenSphere);
refractionTexture.renderList.push(ground);
refractionTexture.refractionPlane = new BABYLON.Plane(0, 0, -1, 0);
refractionTexture.depth = 2.0;

    非平面

var probe = new BABYLON.ReflectionProbe("main", 512, scene);

probe.renderList.push(yellowSphere);
probe.renderList.push(greenSphere);
probe.renderList.push(blueSphere);
probe.renderList.push(mirror);

mainMaterial.refractionTexture = probe.cubeTexture;

    得要有refraction

materialSphere3.indexOfRefraction = 1; //折射率越大， 镜片越薄，看起来越折射

 

十六、菲涅尔

 

  

    只有standardMaterial 才有fresnel

StandardMaterial.diffuseFresnelParameters
StandardMaterial.opacityFresnelParameters
StandardMaterial.reflectionFresnelParameters
StandardMaterial.emissiveFresnelParameters
StandardMaterial.refractionFresnelParameters

    FresnelParameters

• isEnabled   激活或停用菲涅尔效应
• leftColor     定义边缘上使用的颜色
• rightColor   定义中心使用的颜色
• bias            定义施加到计算的菲涅尔项的偏差 数值越大越模糊，能容忍的误差越大
• power         菲涅耳期的指数的权力 越大界限越明显，中心地带越清晰

 

十七、位置

 

 

pilot.translate(vector, distance, space) //space == BABYLON.Space.WORLD || BABYLON.Space.LOCAL
greenSphere.setPivotMatrix(BABYLON.Matrix.Translation(0, 0, 3)); //在不改变旋转轴的情况下，移动位置
greenSphere.setPivotPoint() // 改变轴心的位置
greenSphere.position = new BABYLON.Vector3(0,0,3) //旋转轴随着物体的改变而改变

 

十八、轴

 

 

BABYLON.Space.LOCAL //本地轴
BABYLON.Space.WORLD //世界轴
sphere.flipFaces(); //法线反向

    通过如下创建四元数来设置rotationQuaternion属性给定轴和角度

var axis = new BABYLON.Vector3(2, 6, 4);
var angle = 0;
mesh.rotationQuaternion = new BABYLON.Quaternion.RotationAxis(axis, angle);

 

十七、babylon截屏工具

 

var size = { width: 1000, height: 900} // 512，size = { precision: 2 };
BABYLON.Tools.CreateScreenshot(engine, touchCamera, size);

 

十八、instance实例

 

var mesh = newMeshes[0];
for (var index = 0; index < 100; index++) {
     var newInstance = mesh.createInstance("i" + index);
}

    实例具有与网格相同的材质,支持碰撞，挑选，渲染和阴影

• position
• rotation
• rotationQuaternion
• setPivotMatrix
• scaling

 

十九、相机视图（多相机）

 

 

BABYLON.Viewport = function (x, y, width, height);
camera.viewport = new BABYLON.Viewport(0, 0, 1, 1);
camera2.viewport = new BABYLON.Viewport(0,0, 0.5, 0.5);

scene.activeCameras.push(camera);
scene.activeCameras.push(camera2);

 

二十、视图清晰程度

 

 

engine.setHardwareScalingLevel(0.2)  //像素精确度，数值越大，越模糊

 

二十一、GUI

 

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);

var text1 = new BABYLON.GUI.TextBlock();
text1.text = "Hello world";
text1.color = "green";
text1.fontSize =80;
text1.textHorizontalAlignment = 0;
advancedTexture.addControl(text1);

var text2 = new BABYLON.GUI.TextBlock();
text2.text = "1111111";
text2.color = "green";
text2.fontSize =80;
text2.textHorizontalAlignment = 1;
advancedTexture.addControl(text2);

var image = new BABYLON.GUI.Image("but", "./images/ruler.png");
image.width = 0.2;
image.height = 0.2;
advancedTexture.addControl(image);

 

二十二、动态贴图

 

 

var dynTexture = new BABYLON.DynamicTexture('texture', 512, scene, true);
dynTexture.hasAlpha = true ;
var ctx = dynTexture.getContext();
var font = '1.2rem Arial';
var size = dynTexture.getSize();
var img = new Image();
//img.src = './images/ruler.png';

//dynTexture.drawText('hello, worls',50,70,font, 'green','red');
//dynTexture.drawText('arre',50,100,font, 'green','red');

img.src = './images/content.png';
img.onload = function () {
ctx.drawImage(img,0,0,size.width, size.height);
//ctx.drawImage(img,0,0);
dynTexture.update(false);
};

 

二十三、视差映射

 

 

 

您可以通过以下材料使用视差映射：

• StandardMaterial
• PBRMaterial
• useParallax：启用Bump上的视差映射。如果您没有分配一个bumpTexture，这些属性将不会有任何影响。
• useParallaxOcclusion：启用视差遮挡，设置此属性时，还必须将useParallax设置为true。
• allaxScaleBias：应用缩放因子，确定哪个“深度”应该代表高度图。视差值在0.05和0.1之间是合理的，您可以使用视差遮挡达到0.2。

 

二十四、获取二维坐标

 

 

    获取模型的在画布上面的二维坐标

var mesh2d = BABYLON.Vector3.Project(mesh.position,
BABYLON.Matrix.Identity(),
scene.getTransformMatrix(),
camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
console.log(mesh2d.y)
console.log(mesh2d.x)

    在最小宽度为760所以小于760的尺寸如移动端 必须使用百分比获取坐标

var mesh2d = BABYLON.Vector3.Project(mesh.position,
BABYLON.Matrix.Identity(),
scene.getTransformMatrix(),
camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
console.log(mesh2d.y/engine.getRenderHeight()*100+"%")
console.log(mesh2d.x/engine.getRenderWidth()*100+"%")

 

二十五、点击事件

 

 

    点击事件

scene.onPointerObservable.add(function (e) {
     console.log(e.pickInfo.pickedMesh.name)
}, BABYLON.PointerEventTypes.POINTERDOWN);

    点击类型

scene.onPointerObservable.add((pointerInfo) => {

   if(pointerInfo.pickInfo.hit){
    console.log(pointerInfo.pickInfo.pickedMesh.name)
   }

    switch (pointerInfo.type) {
      case BABYLON.PointerEventTypes.POINTERDOWN:
        console.log("POINTER DOWN");
        break;
      case BABYLON.PointerEventTypes.POINTERUP:
        console.log("POINTER UP");
        break;
      case BABYLON.PointerEventTypes.POINTERMOVE:
        console.log("POINTER MOVE");
        break;
      case BABYLON.PointerEventTypes.POINTERWHEEL:
        console.log("POINTER WHEEL"); //滚轮
        break;
      case BABYLON.PointerEventTypes.POINTERPICK:
        console.log("POINTER PICK");
        break;
      case BABYLON.PointerEventTypes.POINTERTAP:
        console.log("POINTER TAP");
        break;
      case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
        console.log("POINTER DOUBLE-TAP"); //双击
        break;
}
});

scene.onKeyboardObservable.add((kbInfo) => {
   switch (kbInfo.type) {
      case BABYLON.KeyboardEventTypes.KEYDOWN:
        console.log("KEY DOWN: ");
        break;
      case BABYLON.KeyboardEventTypes.KEYUP:
        console.log("KEY UP: ");
        break;
    }
});

 

二十六、babylon生成png

 

 

 

    创建网格后

//BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, size, function(data){
// 获取的图片
//})
BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, scene.activeCamera, 400);

    创建网格时

BABYLON.Tools.CreateScreenshot(engine, camera, 400);

 

二十七、手机调试

 

 

• Vorlon.js安装过程非常简单，只需下面几步即可完成：

       1、从npm安装vorlon.js服务器： $ npm i -g vorlon；

       2、运行vorlon.js服务器： $ vorlon，此时可以在浏览器中打开 http://localhost:1337，查看仪表盘页面；

       3、向应用添加script标签，启用vorlon.js：

 

二十八、异步加载

 

var anim = scene.beginAnimation(box1, 0, 100, false);
console.log("before");
await anim.waitAsync(); //等待异步执行完毕， 在执行下一步
console.log("after");

 

二十九、闭塞查询

 

 

    官方文档 

mesh.occlusionQueryAlgorithmType = BABYLON.AbstractMesh.OCCLUSION_ALGORITHM_TYPE_ACCURATE;
mesh.isOccluded = true;
mesh.occlusionType = BABYLON.AbstractMesh.OCCLUSION_TYPE_OPTIMISTIC;

 

三十、其它链接

 

 

• https://doc.babylonjs.com/how_to/how_to_use_lens_flares 镜头光晕

• https://www.babylonjs-playground.com/#1282WV#11 二维坐标转成三维坐标

• https://www.babylonjs-playground.com/#1SLLOJ#420 // 变形

• https://www.babylonjs-playground.com/#1AD81E#7

• https://www.babylonjs-playground.com/#1M67K8#18

• https://www.babylonjs-playground.com/#9NHBCC#1 烟花

---

版权声明：本文整理只做学习，未经允许不得转载

转载于:https://www.cnblogs.com/ljq66/p/9944340.html