【溫故知新】——BABYLON.js學習之路·前輩經驗（二）
阿新 • • 發佈：2018-11-13
前言：在上一篇隨筆BABYLON.js學習之路·前輩經驗（一）中回顧了組內同事們長時間在Babylon開發實踐中的總結出的學習之路和經驗，這一篇主要對開發中常見的一些功能點做一個梳理，這裡只作為溫故知新。
| 一、相機 |
弧形旋轉相機 —— 使用滑鼠和游標鍵將相機繞著一個三維點(此處時0座標處) 旋轉
- 引數: 名稱, 水平角(alpha), 垂直角(beta), 半徑, 圍繞的目標, 場景
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new
自由相機 —— 你可以使用滑鼠和游標鍵將之在場景中移動
- 引數: 名稱，位置，場景
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
- 限制相機引數
//物件上下移動範圍
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])
| 二、燈光 |
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安裝過程非常簡單，只需下面幾步即可完成：
| 二十八、非同步載入 |
var anim = scene.beginAnimation(box1, 0, 100, false);
console.log("before");
await anim.waitAsync();