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

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);

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

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

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 (可选的)

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)

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

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比较消耗性能）

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

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);

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;

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

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

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

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

"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");

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;

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

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; //对光照没反应， 不能照明

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; //贴图的空间，不知道干什么用

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;

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

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

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(); //法线反向

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

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

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

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)  //像素精确度，数值越大，越模糊

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);
};

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.Tools.CreateScreenshotUsingRenderTarget(engine, camera, size, function(data){
// 获取的图片
//})
BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, scene.activeCamera, 400);

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

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;