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

原文地址：https://www.cnblogs.com/ljq66/p/9944340.html

前言：在上一篇随笔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（比如是浮点数），一个向量(比如是方向)，或四元数。具体的值会是：

BABYLON.Animation.ANIMATIONTYPE_FLOAT
BABYLON.Animation.ANIMATIONTYPE_VECTOR2
BABYLON.Animation.ANIMATIONTYPE_VECTOR3
BABYLON.Animation.ANIMATIONTYPE_QUATERNION
BABYLON.Animation.ANIMATIONTYPE_MATRIX
BABYLON.Animation.ANIMATIONTYPE_COLOR3

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

使用之前的值然后递增： BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
从初始值重启 BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
保持最后的值: 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：<script src=”http://10.0.4.102:1337/vorlon.js”></script>

二十八、异步加载

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 烟花

WEBGL学习网（WebGLStudy.COM）专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息：
1. 本站部分资源来源于用户上传和网络，如有侵权请邮件联系站长：1218436398@qq.com！我们将尽快处理。
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源打赏售价用于赞助本站提供的服务支出（包括不限服务器、网络带宽等费用支出）！
7.欢迎加QQ群学习交流：549297468 ，或者搜索微信公众号：WebGL学习网
WEBGL学习网 » 【温故知新】——BABYLON.js学习之路·前辈经验（二）