【温故知新】——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（比如是浮点数），一个向量(比如是方向)，或四元数。具体的值会是：
- 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://www.babylonjs-playground.com/#1282WV#11 二维坐标转成三维坐标
版权声明：本文整理只做学习，未经允许不得转载
越是迷茫、浮躁的时候，保持冷静和耐心，尤为重要
