目錄

inspector基本操作

1、在場景想要通過鼠標點擊選中模型

2、鼠標點擊場景內(nèi)的小桌子，選中模型后，可以通過左邊的眼睛開關，確認是否選擇正確。

3、inspector左側面板的上方的可以單選控制模型的transform值（移動、旋轉、放大）

額外補充:中心點pivot最好是模型師修改，也可以代碼設置坐標點，查詢api→Mesh→pivot。

（1）點亮移動圖標選項后，鼠標拖拽紅綠藍可以讓模型沿著xyz軸移動，

（2）點亮旋轉圖標選項后，紅綠藍圈可拖拽，分別表示繞著xyz軸旋轉。【正常情況】

（3）點亮縮放圖標選項后，紅綠藍線可拖拽，分別表示沿著xyz軸放大縮小。

額外補充：基礎教程101里面的Position篇有世界坐標和自身坐標案例，以及畫坐標系

（4）點亮左邊面板第四個圖標，顯示模型邊框，可以拖拽邊框上的不同節(jié)點，分別操作移動、旋轉、拉伸。 拖拽面控制移動；線中的點 拖拽控制旋轉；8個頂點拖拽控制縮放；

額外補充：可以通過代碼給模型開啟boundingBox相關功能 gizmo

（5）在編輯器調(diào)整好模型尺寸后，可以通過代碼設置模型transform的三維向量值（坐標、選擇、縮放）

額外補充：如果是導入的glb、gltf模型，模型可能自帶四元數(shù)，rotation.y設置失效，需要通過特殊處理才能設置rotation

（6）根據(jù) id name Uniqueid 找到場景內(nèi)的模型，Uniqueid每次加載完成后都被重新分配

（7）vertices 和 faces 三角頂點和面數(shù)，對于web項目來說，一定需要找模型師優(yōu)化面數(shù)

（8）面板的is enabled屬性，模型的顯示隱藏控制，控制隱藏的內(nèi)存性價比查看內(nèi)存章節(jié)

額外補充：有isEnabled方法，只不過是給節(jié)點使用，檢查父類用的

（9）visibility 設置顯示、隱藏、半透明 0~1變動，可以制作隱藏但是有碰撞的空氣墻使用

（10）Alpha Index 沒用過不了解，記錄官方文檔

（11）ReceiveShadows，必須設置為true后，才能有物體的實時光倒影

（12）InfiniteDistance 無限遠，常用于天空盒

（13）RenderingGroupID 渲染組 圖層是按ID升序渲染的，從默認的圖層開始（ID為0）可用于處理廣告牌標簽的面板永遠在最上層顯示

（14）Layer mask?和攝像機進行位與計算 A&B的值不為0，就顯示。

（15）collisions 碰撞

（16）uv set 2套UV，添加了烘焙好的光影貼圖，這個場景使用了材質(zhì)中的lightmap

（17）occlusions 遮擋 （性能優(yōu)化方面查閱另一篇內(nèi)存相關的文章）

（18）edge rendering 邊緣、邊框渲染 ，會增加1次drawCall（下文對比renderOutline）

（19）renderOutline?渲染輪廓邊框線，對比如圖，只有邊框，沒有中間那條線，增加2次drawcall

額外補充：后處理時，注意drawcall

（20）debug模式常用wireframe選項，查看模型是否優(yōu)化到位，normal 法線查看是否反了，如果反了，貼圖就是黑色一塊

本章節(jié)使用的例子代碼：

上一章節(jié)詳細介紹了inspectorcamera類（FreeCamera）的各個參數(shù)和使用方法，

接下來章節(jié)介紹Mesh Material Texture在sandbox基礎操作，

進階內(nèi)容為材質(zhì)的部分貼圖通道，貼圖的uv通道，固有色貼圖，光影貼圖，反射光設置

因為很多小伙伴沒接觸過3dmax maya blender u3d ue4這類的3d編輯器，

babylon的inspector操作類似上述的3d編輯器，本章節(jié)從最基本的操作講解；

基本在babylon的inspector編輯器內(nèi)的操作為控制模型的transform值（位置、旋轉、縮放），

模型Mesh 引用了 材質(zhì)Material，材質(zhì)Material 引用了貼圖Texture；替換材質(zhì)和貼圖，修改參數(shù)查看效果。

額外補充：（基于gltf2.0標準，1個mesh只有1個Material，.babylon文件除外，在.babylon模型代碼中可實現(xiàn)復合模型和復合材質(zhì)）

官方操作文檔的末尾有拓展進階鏈接 The Inspector | Babylon.js Documentationhttps://doc.babylonjs.com/how_to/debug_layer

Display and Use the Inspector

本次模型用到glb資源可以下載，只設置1分。

babylonjs官方虛擬展廳.glb模型資源_glb模型下載,babylon加載glb模型-互聯(lián)網(wǎng)文檔類資源-CSDN下載https://download.csdn.net/download/maki077/13061978

方便直接把.glb 丟到官方在線沙盒查看，或者是本地加載配合inspector調(diào)試。

如果不想下載，也可以查看官方在線運行地址：

模型為兩個展廳和lightmap二套uv技術展示

Babylon.js Playgroundhttps://www.babylonjs-playground.com/#4AJ16M#5

Babylon.js - Glowing Espilit demohttps://www.babylonjs.com/demos/glowingespilit/

Vernissagehttps://vernissage.phire.de/

inspector基本操作

以下說明使用glowingespilit的例子，也可以從上述鏈接里下載模型拖拽到sandbox中

?

1、在場景想要通過鼠標點擊選中模型

首先需要在左邊面板打開picking mode，確認按鈕常亮后，

這是點擊場景的模型，就可以選中模型了。

缺點：piking常亮后，很容易誤觸點到其他模型。

2、鼠標點擊場景內(nèi)的小桌子，選中模型后，可以通過左邊的眼睛開關，確認是否選擇正確。

避免點擊到玻璃等模型。（隱藏后還能看到影子，是因為使用了光影貼圖，非實時光影）

?

3、inspector左側面板的上方的可以單選控制模型的transform值（移動、旋轉、放大）

但是根據(jù)模型建模時，模型有中心點pivot，控制transform的坐標系位置就中心點位置。旋轉則是繞著中心點旋轉。

額外補充:中心點pivot最好是模型師修改，也可以代碼設置坐標點，查詢api→Mesh→pivot。

例如一扇門，中心點在正中心，繞y軸(綠軸)旋轉，則是龍卷風或者輪胎旋轉

中心點在門的一側，繞y軸(綠軸)旋轉就是正常的開門

中心點在門外，繞y軸(綠軸)旋轉就是 衛(wèi)星繞地運動

（1）點亮移動圖標選項后，鼠標拖拽紅綠藍可以讓模型沿著xyz軸移動，

展廳中的小桌子中心點就在模型外

?

（2）點亮旋轉圖標選項后，紅綠藍圈可拖拽，分別表示繞著xyz軸旋轉?！菊Ｇ闆r】

【特殊情況】這個小屏風模型的中心點在模型邊緣，

它的xyz朝向為z-up的左手坐標系，

它繞y軸旋轉的方向則應該是如圖垂直于地面的綠色圓圈，平行于xz平面。

但是拖拽圓圈時則亂動bug，例如下方gif圖

猜測bug原因可能是因為模型制作時的y-up和z-up坐標系不同

也可能是因為模型制作時是垂直放置，然后再水平擺放，才導致繞y軸的綠圈垂直地面（大膽猜測）

但是通過右側面板調(diào)整旋轉值則正常，所以拖拽右邊面的旋轉y值時，正常的繞y軸旋轉。

類似于在ue4場景全局坐標系中修改某個物體的坐標系

?【就很神奇，不是y-up，結果修改rotation-y值，卻按照y-up的方式旋轉】如gif圖

?

符合正常的xyz旋轉的紅綠藍圈，繞y軸旋轉的綠圈平行于地面，控制繞y旋轉可以通過拖拽綠圈，也可以右邊面板調(diào)試。

?

（3）點亮縮放圖標選項后，紅綠藍線可拖拽，分別表示沿著xyz軸放大縮小。

?

額外補充：基礎教程101里面的Position篇有世界坐標和自身坐標案例，以及畫坐標系

Babylon.js Playgroundhttps://www.babylonjs-playground.com/#UBWFJT#2

可以試著拖拽旋轉小模型，查看坐標系變化，就非常正常，和上面的小屏風不是一個手感

?

（4）點亮左邊面板第四個圖標，顯示模型邊框，可以拖拽邊框上的不同節(jié)點，分別操作移動、旋轉、拉伸。 拖拽面控制移動；線中的點 拖拽控制旋轉；8個頂點拖拽控制縮放；

缺點：在場景里非常容易誤操作點到其他模型

?

額外補充：可以通過代碼給模型開啟boundingBox相關功能 gizmo

API:BoundingBoxGizmo | Babylon.js Documentationhttps://doc.babylonjs.com/api/classes/babylon.boundingboxgizmo

案例：Playground search page | Babylon.js Documentationhttps://doc.babylonjs.com/playground/?code=Boundingbox

?

（5）在編輯器調(diào)整好模型尺寸后，可以通過代碼設置模型transform的三維向量值（坐標、選擇、縮放）

在模型加載完畢后，通過加載返回值的模型數(shù)組，或是通過模型名字找到模型對象

scene.getMeshByName("bloc.000").position = new BABYLON.Vector3(-1,0, -9);
mesh[0].rotation = new BABYLON.Vector3(0, Math.PI/2, 0);//繞y周旋轉90°，弧度和角度的換算
mesh[i].scaling = new BABYLON.Vector3(0.5, 0.6, 0.5);

額外補充：如果是導入的glb、gltf模型，模型可能自帶四元數(shù)，rotation.y設置失效，需要通過特殊處理才能設置rotation

官方提示信息，有四元數(shù)存在，三維向量會被忽視

?

處理方法①：四元數(shù)設置為空

mesh.rotationQuaternion = null; //Any version of Babylon.js

mesh.rotation = BABYLON.Vector3(); //babylon.js versions > 4.00

mesh.rotate(BABYLON.Axis.Y, yaw, BABYLON.Space.LOCAL);
mesh.rotate(BABYLON.Axis.X, pitch, BABYLON.Space.LOCAL);
mesh.rotate(BABYLON.Axis.Z, roll, BABYLON.Space.LOCAL);
//Math.PI
mesh.rotation = new BABYLON.Vector3(pitch, yaw, roll);

參考論壇地址鏈接：

Can't get skull rotator (playground) to work with GLTF model - #2 by Evgeni_Popov - Questions - Babylon.js

摘要：

rotation.y不起作用原因：

The meshes loaded from a .gltf file use the?rotationQuaternion?property instead of?rotation.

If you want to switch to using?rotation?instead, use:

scene.getMeshByName("Cube").rotationQuaternion = null;

By default, your camera is far from your object, that’s why it appears small on the screen.

You can use?scene.createDefaultCamera(true, true, true);?

in the?ImportMesh?callback to set a camera that will display your mesh with a good size on the screen.

scene.getMeshByName("Cube").rotationQuaternion = null;
scene.getMeshByName("Cube").rotation.y += 0.005;

②可以new一個三維向量值給rotation

e.source.rotation = new BABYLON.Vector3(0, 30, 0);//OK
e.source.scaling=new BABYLON.Vector3(1,1,1);//或者
e.source.rotation.y = Math.PI/2 ;//先用上方Vector重新設置，就可以這樣設置值

③【個人習慣】可以new一個單位的三維向量值給scale值（代碼調(diào)用為.scaling =）

//個人習慣用賦予scale的方法，來使rotation position生效
e.source.scaling=new BABYLON.Vector3(1,1,1);//放大縮小值為1
e.source.rotation.y = Math.PI/2 ;//先用上方Vector重新設置，就可以這樣設置值

（6）根據(jù) id name Uniqueid 找到場景內(nèi)的模型，Uniqueid每次加載完成后都被重新分配

//在BABYLON.SceneLoader.ImportMesh加載成功的回調(diào)函數(shù)中查找模型
//注意3dmax里面配置名字時可能帶空格，或者同名情況發(fā)生，babylon會另外命名
scene.getMeshById("bloc.000").position.y = 1;
scene.getMeshByName("bloc.000").scaling = new BABYLON.Vector3(1,1.5,1);
//scene.getMeshByUniqueId(512).rotation.y = Math.PI  //[不推薦使用]

//或者通過scene類的數(shù)組變量meshes，通過下標找到對應的模型
//【注意】數(shù)組下標0經(jīng)常為整個模型對象，多看打印log數(shù)據(jù)和inspector列表節(jié)點scene.transformNodes
scene.meshes[0].rotation.y=Math.PI;

?

?

?

（7）vertices 和 faces 三角頂點和面數(shù)，對于web項目來說，一定需要找模型師優(yōu)化面數(shù)

?

右側mesh面板最下方可以打開線框模式，查看當前模型的面是否密集

?

（8）面板的is enabled屬性，模型的顯示隱藏控制，控制隱藏的內(nèi)存性價比查看內(nèi)存章節(jié)

//用setEnabled(Boolean)控制
scene.getMeshByName("bloc.000").setEnabled(false);

?

?

額外補充：有isEnabled方法，只不過是給節(jié)點使用，檢查父類用的

?

（9）visibility 設置顯示、隱藏、半透明 0~1變動，可以制作隱藏但是有碰撞的空氣墻使用

?

（10）Alpha Index 沒用過不了解，記錄官方文檔

scene.getMeshByName("bloc.000").alphaIndex=1.7976931348623157e+308

Transparent Rendering | Babylon.js Documentationhttps://doc.babylonjs.com/divingDeeper/materials/advanced/transparent_rendering#alpha-index

?

（11）ReceiveShadows，必須設置為true后，才能有物體的實時光倒影

上面例子用的都是lightmap貼圖烘焙出來的虛擬影子，使用lightmap可以節(jié)約內(nèi)存資源。

scene.getMeshByName("bloc.000").receiveShadows  = true;

（12）InfiniteDistance 無限遠，常用于天空盒

scene.getMeshByName("bloc.000").infiniteDistance = true;

設置infiniteDistance?為true后，不在原地，變成遠處物體

?

?

（13）RenderingGroupID 渲染組 圖層是按ID升序渲染的，從默認的圖層開始（ID為0）可用于處理廣告牌標簽的面板永遠在最上層顯示

把mesh的renderingGroupId改成大于0的數(shù)，可以讓mesh最后繪制

?

Transparent Rendering | Babylon.js Documentation

?

?

例如猴子RenderingGroupID為3，在柱子上一層，所以柱子無法遮擋猴子

scene.getMeshByName("bloc.000").renderingGroupId = 1 ;
scene.getMeshByName("suzanne.000").renderingGroupId = 3 ;

（14）Layer mask?和攝像機進行位與計算 A&B的值不為0，就顯示。

類似u3d的，每一位都是一種狀態(tài)。

所以默認值為0xFFFFFFF0，16進制除了個位所有值都為1，位與計算后不為0，則顯示。

API：限制攝像機查看具有相同 layerMask 的對象。

layerMask為1的攝像機將渲染mesh.layerMask & camera.layerMask!==0。

API：Restricts the camera to viewing objects with the same layerMask. A camera with a layerMask of 1 will render mesh.layerMask & camera.layerMask!== 0

Playground search page | Babylon.js Documentationhttps://doc.babylonjs.com/playground/?code=layerMask

?

（15）collisions 碰撞

要想與鏡頭有碰撞效果，鏡頭也需要添加checkCollisions為true；

空氣墻的做法就是隱藏visibility?=?0，且有碰撞

scene.getMeshByName("bloc.000").checkCollisions = true
scene.cameras[0].checkCollisions = true

（16）uv set 2套UV，添加了烘焙好的光影貼圖，這個場景使用了材質(zhì)中的lightmap

material.diffuseColor = BABYLON.Color3.Black();
material.lightmapTexture = lightmapTexture;
material.lightmapTexture.coordinatesIndex = 1;// 0  1  2  3，使用第二套uv通道
material.useLightmapAsShadowmap = true;//設置允許光影貼圖

?

?

（17）occlusions 遮擋 （性能優(yōu)化方面查閱另一篇內(nèi)存相關的文章）

繪制對象之前在目標網(wǎng)格上繪制一個透明的邊界框，并創(chuàng)建一個查詢，與WebGL引擎檢查邊界框是否可見。如果邊界框可見，對象就會被繪制，如果不可見，對象就不會被繪制。

?

sphere.occlusionQueryAlgorithmType
           = BABYLON.AbstractMesh.OCCLUSION_ALGORITHM_TYPE_CONSERVATIVE;
sphere.isOccluded = true;
sphere.occlusionType = BABYLON.AbstractMesh.OCCLUSION_TYPE_STRICT;   

algorith算法 分為 Conservative保守 和 Accurate精確

Occlusion Queries | Babylon.js DocumentationLearn all about leveraging occlusion queries in Babylon.js.https://doc.babylonjs.com/divingDeeper/occlusionQueries

?

官方例子，看不到墻后的球，背景為綠色

看到墻后的球，背景為藍色

Babylon.js Playgroundhttps://playground.babylonjs.com/#QDAZ80#5

?

看到墻后的球，背景為藍色

?

（18）edge rendering 邊緣、邊框渲染 ，會增加1次drawCall（下文對比renderOutline）

?

scene.getMeshByName("bloc.000").enableEdgesRendering();  //0.95  1.1   0.5  
//.enableEdgesRendering(0.95);//默認值
scene.getMeshByName("bloc.000").edgesWidth = 2;
//【注意】顏色要4維向量才能生效
// scene.getMeshByName("bloc.000").edgesColor = new BABYLON.Color4(0,1,0,1);
// scene.getMeshByName("bloc.000").edgesColor = new BABYLON.Color4.FromHexString("#FF00FFFF");
scene.getMeshByName("bloc.000").edgesColor = new BABYLON.Color4.FromInts(0,255,255,255);

 // scene.getMeshByName("bloc.000").disableEdgesRendering();//停止邊框渲染

 // instance實例化的也有邊框，【特殊不額外增加drawcall】
// scene.getMeshByName("bloc.000").edgesShareWithInstances = true;

點積是矢量之間角度的余弦，所以對于默認的epsilon 0.95，角度是acos(.95) ~= 18度--所以如果兩個面之間的角度小于這個角度，則不會畫線。

?

enableEdgesRendering(0.8)

?

默認 （0.95）

?

enableEdgesRendering(1.1)

?

enableEdgesRendering(0.5)

?

sourceMesh.edgesShareWithInstances = true;//影分身也添加邊框，不影響drawcall

Babylon.js Playgroundhttps://playground.babylonjs.com/#7BY3TM

?

?

（19）renderOutline?渲染輪廓邊框線，對比如圖，只有邊框，沒有中間那條線，增加2次drawcall

?

//scene.getMeshByName("bloc.000").renderOverlay = true;
scene.getMeshByName("bloc.000").renderOutline = true;
scene.getMeshByName("bloc.000").outlineWidth = 0.01
scene.getMeshByName("bloc.000").outlineColor = BABYLON.Color3.Red();

?overlay為true效果：

?

額外補充：后處理時，注意drawcall

再加個dof（depth of field）景深效果，

每個模型的drawcall又會增加

再開bloom輝光特效，增加一個mesh要多出來3次drawcall

再加一個outline，加一個mesh會總計多出來5個drawcall

如果場景有多個模型，每個模型多5次drawcall，在優(yōu)化時請多注意，畢竟特效越多就越卡

?

?

bloom輝光測試drawcall：

Babylon.js Playgroundhttps://playground.babylonjs.com/#LRFB2D#159

?

（20）debug模式常用wireframe選項，查看模型是否優(yōu)化到位，normal 法線查看是否反了，如果反了，貼圖就是黑色一塊

剩下vertex colors 和 vertex normals 頂點顏色 和 頂點法線 ，

以及面法線和頂點法線區(qū)別 涉及shader著色器相關，請參閱其他文章

?

本章節(jié)使用的例子代碼：

Babylon.js Playgroundhttps://www.babylonjs-playground.com/#4AJ16M#366文章來源地址http://www.zghlxwxcb.cn/news/detail-405511.html

function assignLightmapOnMaterial(material, lightmap) {
    material.diffuseColor = BABYLON.Color3.Black();
    material.lightmapTexture = lightmap;
    material.lightmapTexture.coordinatesIndex = 1;
    material.useLightmapAsShadowmap = true;
}

var delayCreateScene = function () {
    
    var scene = new BABYLON.Scene(engine);  

    BABYLON.SceneLoader.ImportMesh(
        "",
        "https://models.babylonjs.com/CornellBox/",
        "cornellBox.babylon",
        scene,
        function (meshes) {          
            scene.createDefaultCameraOrLight(true, true, true);
            scene.createDefaultEnvironment();
            scene.ambientColor = BABYLON.Color3.White();
            // we have to cycles through objects to assign their lightmaps
            let lightmappedMeshes = ["bloc.000", "suzanne.000", "cornellBox.000"];
            console.log(scene);
// scene.transformNodes
scene.getMeshById("bloc.000").position.y=1;
scene.getMeshByName("bloc.000").scaling=new BABYLON.Vector3(1,1.5,1);
// scene.getMeshByUniqueId(651).rotation.y=Math.PI;
// scene.getMeshByName("bloc.000").setEnabled(false);
//  scene.rootNodes[0].isEnabled (false) ;//no
// scene.getMeshByName("bloc.000").visibility = 0.5

// scene.getMeshByName("bloc.000").alphaIndex=1.7976931348623157e+308

// scene.getMeshByName("bloc.000").receiveShadows  = true;

// scene.getMeshByName("bloc.000").infiniteDistance = true;

// scene.getMeshByName("cornellBox.000").renderingGroupId = 0 ;
// scene.getMeshByName("bloc.000").renderingGroupId = 1 ;
// scene.getMeshByName("suzanne.000").renderingGroupId = 3 ;

// scene.getMeshByName("bloc.000").checkCollisions = true
// scene.cameras[0].checkCollisions = true

 scene.getMeshByName("bloc.000").occlusionType
         = BABYLON.AbstractMesh.OCCLUSION_TYPE_OPTIMISTIC;
 scene.getMeshByName("bloc.000").isOccluded = true;
 scene.getMeshByName("bloc.000").occlusionQueryAlgorithmType
        = BABYLON.AbstractMesh.OCCLUSION_ALGORITHM_TYPE_CONSERVATIVE;

            for (let i = 0; i < lightmappedMeshes.length; i++) {
                let currentMesh = scene.getMeshByName(lightmappedMeshes[i]);
                // lightmap texture creation
                let currentLightmap = new BABYLON.Texture(
                    "https://models.babylonjs.com/CornellBox/" + currentMesh.name + ".lightmap.jpg",
                    scene);
                // if only one material
                if (!currentMesh.material.subMaterials) {
                    assignLightmapOnMaterial(currentMesh.material, currentLightmap);
                } else {
                    // subMaterials
                    for (let j = 0; j < currentMesh.material.subMaterials.length; j++) {
                        assignLightmapOnMaterial(currentMesh.material.subMaterials[j], currentLightmap);
                    }
                }
            }

            
    });

    return scene;
};

到了這里，關于Babylonjs 基礎教程與填坑④sandbox+inspector面板中的Mesh類的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！