基于Babylonjs自制WebGL3D模型編輯器

二、界面和基本操作

　　程序基于新版的Chrome瀏覽器編寫和調(diào)試，需要設(shè)備上具有獨立或集成顯卡，并且需要用戶具有通過瀏覽器調(diào)用顯卡的權(quán)限。目前測試可以在windows7和Centos7操作系統(tǒng)上運行。

　　程序主界面如下圖所示：

　　主界面本身是一個簡單的Babylonjs場景，由天空盒與地面網(wǎng)格組成，應(yīng)用半球形光照（？）。在場景中可以使用“wasd、空格、ctrl”控制視點位置，使用鼠標拖動控制視角；界面上部是十二個快捷菜單，可以通過鼠標單擊打開或使用“1”到“=”鍵打開，打開菜單后可以使用“tab”鍵上下移動菜單項，“Enter”鍵選定菜單項或打開下一級菜單，“ESC”鍵取消選擇，“/”鍵隱藏菜單按鈕。

　　“調(diào)整”菜單欄下的“按住鼠標”選項可以使鼠標一直保持按下的狀態(tài)（類似FPS游戲的鼠標控制），但因為運行在瀏覽器中的JavaScript無權(quán)限直接控制鼠標復(fù)位到屏幕中心，所以這種控制模式有一定的范圍限制。
　　“視角切換”選項可以在“當前載具”的第一人稱和第三人稱視角之間切換，未來計劃設(shè)置多種不同載具，不同載具具有不同的默認速度和默認功能，使用者可以在不同載具之間自由切換。
　　“調(diào)整速度”選項可以調(diào)整視點移動速度、編輯器中網(wǎng)格的調(diào)整幅度、鼠標靈敏度等控制參數(shù)。
　　“自由瀏覽”選項可以使視點脫離載具的限制自由移動，這時的移動按鍵由wasd鍵改為上下左右鍵

三、網(wǎng)格調(diào)整
　　選擇“添加-》新增網(wǎng)格-》正方體”可以在場景中添加一個默認的正方體網(wǎng)格如下圖所示：

　　在這里可選物體是可以自由配置的，使用者也可以把自己設(shè)計的網(wǎng)格添加進來，配置代碼位于mymesh.js文件的309行左右：

1 //可以加載的網(wǎng)格的列表2 var arr_choosemesh=3 [4 ["code","BABYLON.MeshBuilder.CreateBox('","',{size:1},scene)"]5 ,["code","BABYLON.MeshBuilder.CreateSphere('","',{segments:10,diameter:1},scene);"]6 ,["babylon","", "../MODEL/allbase/", "2017512_8_13_30testscene.babylon"]7 ,["babylon","Cube", "../MODEL/octocat/", "octocat.babylon"]8 ,["babylon","Cube", "../MODEL/test3/", "test3.babylon"]9 ];

　　“code”表示通過執(zhí)行后面的代碼生成網(wǎng)格，“Babylon”表示按后面的參數(shù)加載現(xiàn)有的babylon格式模型。

　　網(wǎng)格上的坐標軸指示網(wǎng)格的局部坐標系坐標，也表示這個網(wǎng)格正處于選中狀態(tài)中。對于選中的網(wǎng)格，點擊調(diào)整菜單欄下的“調(diào)整位置”、“調(diào)整姿態(tài)”、“調(diào)整縮放”可以調(diào)整當前選中的網(wǎng)格的位置、姿態(tài)、縮放屬性，調(diào)整時可以直接在對應(yīng)的屬性處輸入值，也可以使用腳本即時生成值，也可以使用“上下左右、PgUp、PgDn”鍵進行屬性調(diào)整，如下圖所示：

　　因為可能需要輸入JavaScript腳本，在做以上調(diào)整時移動控制按鍵會失效。

　　調(diào)整完畢后按Enter鍵坐標軸消失網(wǎng)格屬性固定，在這一步時也會對網(wǎng)格的紋理坐標進行重新分配，為下面的紋理配置做準備。通過類似的方式固定多個網(wǎng)格可以生成較為復(fù)雜的網(wǎng)格對象，比如下面的人形網(wǎng)格：

　　點擊“文件-》導出”可以將這個網(wǎng)格對象以文本文件形式導出（默認的導出文件后綴名是txt需要手工修改成babylon）

四、紋理設(shè)置
　　點擊“選擇-》選擇三角形”光標會變?yōu)椤癱rosshair”，這時點擊網(wǎng)格中的三角形，被選中的三角形會突出顯示：

　　在右側(cè)的對話框中填寫RGB分量可以設(shè)置選中三角形的顏色，點擊“選擇顏色”會在正方形的canvas里繪制出這個三角形圖元對應(yīng)的圖素，同時被選中的三角形會以canvas中的對應(yīng)圖素作為紋理（透明度A暫時不好使）：

　　再次點擊選擇-》選擇三角形可以對其他的三角形進行設(shè)置，可以點擊“從圖片中選取”使用本地圖片作為這個三角形的圖素提供者：

　　圖片左下角黃線圍成的區(qū)域是一個透明的p，對應(yīng)紋理圖片中的三角形色塊（沒有找到制作透明三角形p的方法，只能用弧線代替斜邊）?？梢允褂檬髽送献來設(shè)置選擇圖素的區(qū)域，調(diào)整“u長度、v長度”可以設(shè)置p的寬高，下面的四個按鈕可以水平旋轉(zhuǎn)圖片：

　　點擊確定，選擇的圖素會被應(yīng)用到網(wǎng)格上：

　　從圖片提取紋理時有兩個思路：一是使用canvas的像素提取功能將素材圖片中被選取的像素提取出來灌入紋理圖片中；二是記錄素材圖片的偏移量和縮放量，使用canvas變形和剪切把素材圖顯示在紋理圖片里?？紤]到大部分情況下素材圖和紋理圖的像素點不能一一對應(yīng)，采用第二種思路。
　　點擊文件-》導出圖片可以將紋理圖片以PNG格式導出，再點擊文件-》導出可以導出以這張圖片作為紋理的模型文件。
　　load_mesh.html是一個簡單的babylon模型查看器，在本地部署后加載模型即可查看效果：

　　因為紋理圖片其他區(qū)域都是白色，所以模型的其他區(qū)域也都是白色。

五、總結(jié)

　　在未來的世界，不懂編程等于文盲。

　　當然，只要遵守別人設(shè)置好的規(guī)則，文盲也可能生活的很好。但如果一個人想要對所生活世界的運行方式有所了解，甚至加以影響，他就不可能安于做一個文盲。

　　在各種編程形式中，3D編程具有最為直觀的表現(xiàn)力和影響力，而JavaScript則是一門簡單易用又受眾廣泛的編程語言，作為二者結(jié)合的WebGL編程技術(shù)正是業(yè)余編程愛好者涉獵編程技術(shù)的最佳途徑之一。

　　而對于專業(yè)的3D編程人員來講，當代3D編程技術(shù)正處在向GPU加速運算和多終端3D呈現(xiàn)轉(zhuǎn)變的三叉路口，WebGL技術(shù)作為多終端3D呈現(xiàn)方向的核心技術(shù)之一，也值得專業(yè)程序員深入研究。

　　限于時間，Newland編輯器的介紹就到這里，以后有新的進展會繼續(xù)更新。希望大家能在評論區(qū)里和我交流意見和建議，您的正面評論將是對我的巨大鼓勵。

　　謝謝。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com