【温故知新】——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(比如是浮点数),一个向量(比如是方向),或四元数。具体的值会是:
  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:<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;

 

三十、其它链接

 

 

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

发表评论

提供优质的WebGL、ThreeJS源码

立即查看 了解详情