blend4web的三維小場景的開發應用（3）

        blend4web做爲一個開源的框架，它提供了很多好的案例，在官網的案例中是不能打包到本地的，可是在項目管理頁面中能夠找到案例，而且能打包到本地，這樣就能夠研究它的代碼和blender裏面的一些設置。（這裏重點講一下：B4w的不少api必須和blender結合，只有在blender裏面設置好了，才能在外部對模型對象進行相關的控制，好比：控制對象的顯示隱藏，必須在blender裏面設置物體爲動態對象才能夠，後續會仔細講解這一設置）。

    一、打包項目到本地

    首先打開項目管理頁面，而後點擊 Back to index ,以後能夠看到以下圖頁面：

而後點擊紅色圈圈內的連接，就能夠看到以下圖的案例界面：

上圖左上角都是案例。能夠選擇看看，我如今作的項目，有很多功能都是在案例中找的辦法。很值得研究。

左下角的make Project 點擊，就能夠把案例打包到本地。

點擊make 就會自動打包項目

打包完成界面；

返回到項目管理界面就能夠找到剛剛打包的項目了

在第三列中，能夠打開它的Blender文件，而後研究想關的設置了

紅色圈內的至關於圖層管理器，圖層的名稱在作項目的時候仍是先統一規劃好，在編寫程序的時候會方便，同時也便於後期維護。下面那個小框框內的是各類屬性選擇及下面與之對應的屬性面板。至此，怎麼打包案例到本地也就算是完成了。下面開始算是正式進行web開發了，可是怎麼把這些項目集成到系統裏面，做爲其中的一部分功能，同時在編譯器裏面進行編譯。目前我發現兩種集成的方法，下面我會詳細介紹：

二、項目集成到系統的兩種方法：

（1）直接先進行編譯，最後構建部署。(開發工具我用的是Hbuilder)

    在項目管理頁面看到的本地項目，都是能夠在以前下載的 Blender ce文件夾下的projects文件下找的到的。

而後我把整個project文件夾都放到hbuilder中

雖然這個裏面有html。可是不能直接打開它，打開是不能加載三維場景的。只能是編寫代碼後，在項目管理頁面中打開頁面。

若是代碼編譯完成以後，須要在項目管理頁面點擊build project

而後再去看開發工具中能夠看到多了很多東西

它是多了一個builde文件夾，這裏面的纔是最後項目須要的代碼和頁面，這個html頁面是能夠直接打開的。

可是這裏面的Camera Animation.min.js裏面的代碼是壓縮的

因此不能直接編寫更改內容。若是想要編寫代碼，須要在外層的Camera Animation.js中編寫。而後再次build project一下才能用。那有的同窗可能會問有沒有方法能夠直接編寫的，這個問題我當時也是摸索了大半天才找到方法。下面我介紹第二個方法。

(2) 直接構建項目，而後再編譯

這個方法的關鍵點是在建立項目的時候要在設置裏面進行以下圖的選項，（我在第二篇介紹過爲何這麼這樣設置的緣由）

建立好以後，builde project一下，而後在開發工具中，能夠看到以下圖所示：

能夠看到，demo2.min.js不是壓縮的，而後就能夠直接進行編寫了。

因爲初始建立的時候，blender裏面會自動建立一個場景，若是咱們須要把官網案例的場景移植到本身的blender文件中去，有個偷懶的快捷方法，就是Crtl +C 和Ctrl +V。

在建立的項目中的blender文件，快捷鍵A 全選，而後del刪除以後，再到案例的blender文件中，全選，Crtl +C，再切換到項目的blender文件中，Ctrl +V。就能夠了。

而後記得保存，保存以後，因爲是更改了blender文件裏面的內容，須要從新導出一json文件，

同時必須保證，導出的文件必須和 blender CE文件夾是在一個磁盤下。否則不能導出。

個人blender ce是在c盤下放置的，因此我能夠導出到桌面，我在桌面新建一個json文件夾，而後導出兩個文件

把這兩個文件複製，而後直接覆蓋這裏面的兩個文件就能夠了。

我我的比較喜歡這個方法，畢竟修改模型是不多的。若是是多人協同編寫代碼，若是採用第一個方法是很麻煩進行協助編譯的。

總結：這短短的三篇內容，倒是我耗費了幾周的時間和精力總結出來的，因爲以前沒有用過三維建模軟件，更加沒有用過blender，因此我一邊本身摸索，一邊在羣裏面很不要臉的反覆問着基礎的問題。沒有辦法，如今blend4web用的人不多。資料也基本上是找不到的。我寫這些也就是但願避免再跳入本身走過的坑，讓你們有更多的精力去作更有意義的研發。也但願有更多人一塊兒探索這個新大陸。