基于Babylonjs自制WebGL3D模型編輯器的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹基于Babylonjs自制WebGL3D模型編輯器的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、主機(jī)域名、虛擬空間、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

 一、總述
　　當(dāng)代WebGL編程所使用的3D模型大多是從3DsMax模型或Blender模型轉(zhuǎn)化而來，這種工作模式比較適合3D設(shè)計(jì)師和3D程序員分工配合的場(chǎng)景。但對(duì)于單兵作戰(zhàn)的WebGL愛好者來講這種模式過于沉重：且不說轉(zhuǎn)化插件本身存在的各種bug嚴(yán)重降低了轉(zhuǎn)化的成功率，光是為了生成一個(gè)簡(jiǎn)單的模型就需要系統(tǒng)的學(xué)習(xí)3DsMax或Blender的使用方法就讓人感覺得不償失。
　　基于以上考慮，我計(jì)劃編寫一個(gè)基于Babylonjs的簡(jiǎn)單WebGL模型編輯器，供自己和其他有同樣需求的WebGL愛好者使用。編輯器命名為Newland，意為通過自己的努力建立一個(gè)更好的世界，現(xiàn)已完成了第一階段的網(wǎng)格調(diào)整和紋理設(shè)置功能。測(cè)試程序基于MIT協(xié)議發(fā)布在github上，可以通過http://ljzc002.github.io/Newland/HTML/index_newland.html訪問。
　　因?yàn)榇a過多，這里主要介紹使用方法和設(shè)計(jì)思路，完整代碼可以在https://github.com/ljzc002/ljzc002.github.io/tree/master/Newland上查看。具體使用或修改代碼需要一定的3D編程基礎(chǔ)，可以參看我錄制的3D編程入門視頻教程：http://www.bilibili.com/video/av8248516/、http://www.bilibili.com/video/av8834942/、http://www.bilibili.com/video/av9234256/、http://www.bilibili.com/video/av9546734/，也可以自己尋找渠道了解。

二、界面和基本操作

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

　　程序主界面如下圖所示：

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

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

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

　　在這里可選物體是可以自由配置的，使用者也可以把自己設(shè)計(jì)的網(wǎng)格添加進(jìn)來，配置代碼位于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)格上的坐標(biāo)軸指示網(wǎng)格的局部坐標(biāo)系坐標(biāo)，也表示這個(gè)網(wǎng)格正處于選中狀態(tài)中。對(duì)于選中的網(wǎng)格，點(diǎn)擊調(diào)整菜單欄下的“調(diào)整位置”、“調(diào)整姿態(tài)”、“調(diào)整縮放”可以調(diào)整當(dāng)前選中的網(wǎng)格的位置、姿態(tài)、縮放屬性，調(diào)整時(shí)可以直接在對(duì)應(yīng)的屬性處輸入值，也可以使用腳本即時(shí)生成值，也可以使用“上下左右、PgUp、PgDn”鍵進(jìn)行屬性調(diào)整，如下圖所示：

　　因?yàn)榭赡苄枰斎隞avaScript腳本，在做以上調(diào)整時(shí)移動(dòng)控制按鍵會(huì)失效。

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

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

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

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

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

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

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

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

　　因?yàn)榧y理圖片其他區(qū)域都是白色，所以模型的其他區(qū)域也都是白色。

五、總結(jié)

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

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

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

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

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

以上是“基于Babylonjs自制WebGL3D模型編輯器的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：基于Babylonjs自制WebGL3D模型編輯器的示例分析-創(chuàng)新互聯(lián)
本文鏈接：http://bm7419.com/article44/ihhee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、動(dòng)態(tài)網(wǎng)站、虛擬主機(jī)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)