[發明專利]一種基于WebGL的三維家居設計及展示系統

在審

• 申請號: 201710414781.2
• 申請日: 2017-06-05
• 公開（公告）號: CN107194978A
• 公開（公告）日: 2017-09-22
• 發明（設計）人: 李羚;許鴻文;薛印璽;曾浩
• 申請（專利權）人: 中國地質大學（武漢）
• 主分類號: G06T11/00
• 分類號: G06T11/00;G06T15/00;G06T17/00
• 代理公司: 武漢知產時代知識產權代理有限公司42238
• 代理人: 馮必發

技術領域

本發明涉及家居設計技術領域，尤其涉及一種基于WebGL的三維家居設計及展示系統。

背景技術

目前，較多軟件都能夠進行3D模型的設計和3D模型的展示，但均存在共同的缺陷，即必須借助于相應軟件來實現，同時在使用時安裝繁瑣，且對適用人群具有一定的技術要求。WebGL的出現解決了上述問題，WebGL可以為HTML5Canvas提供硬件3D加速渲染，這樣Web開發人員就可以借助系統顯卡在瀏覽器里更流暢地展示3D場景和模型，還能創建復雜的導航和數據視覺化。但介于WebGL在開發中難度較大、開發效率較低，使得WebGL的使用在實際應用開發中具有一定的難度。

發明內容

有鑒于此，本發明提供了一種具有較好的適用性和遷移性的基于WebGL的三維家居設計及展示系統。

本發明提供一種基于WebGL的三維家居設計及展示系統，該系統包括房型構建系統、硬裝設計系統和軟裝設計系統，所述房型構建系統包括模型繪制模塊和自定義繪制模塊，所述硬裝設計系統包括壁紙設置模塊和門窗添加模塊，所述軟裝設計系統包括家具模型導入模塊和燈光渲染模塊，所述房型構建系統設置為在二維界面中構建常規房型和特殊房型，實現常規房型和特殊房型的添加，所述硬裝設計系統設置為在三維界面中對墻體進行添加門窗的操作以及更改墻體和地面的壁紙，所述軟裝設計系統設置為在已經設計好的房型中添加家具，并設置燈光渲染效果。

進一步地，所述三維家居設計及展示系統設有轉換模塊，通過轉換模塊可以將二維界面中的圖片對應轉換為三維界面中的模型，所述房型構建系統提供有繪圖區域，所述繪圖區域內設有控制按鈕，通過所述控制按鈕實現二維界面與三維界面的切換。

進一步地，所述模型繪制模塊設有樣板房模型庫，所述樣板房模型庫包括樣板房圖片，所述模型繪制模塊通過在繪圖區域直接添加樣板房圖片實現常規房型的繪制。

進一步地，所述自定義繪制模塊設有墻體繪制按鈕和直線連接按鈕，其通過利用所述直線連接按鈕在繪圖區域繪制特殊房型的框架，然后利用所述墻體繪制按鈕在特殊房型的框架中繪制墻體，繪制過程中，利用矢量圖形的裁剪算法處理發生交叉的墻體。

進一步地，所述壁紙設置模塊設有壁紙庫，所述壁紙庫包括各種壁紙圖片，所述壁紙設置模塊用以利用壁紙圖片在墻體或地面上修改壁紙，所述壁紙圖片的尺寸與所選墻體或地面的尺寸相適配。

進一步地，所述門窗添加模塊設有門窗圖片庫，所述門窗圖片庫包括各種門窗圖片，所述門窗添加模塊用以利用門窗圖片在墻體中添加門窗，其對門窗位置對應的墻體進行了不可見處理，使得添加的門窗對墻體進行覆蓋。

進一步地，所述家具模型導入模塊設有家具庫，所述家具庫包括各種家具圖片，在二維界面中，通過所述家具模型導入模塊在房型的對應位置添加家具圖片，家具圖片放置完成后，三維界面中添加家具圖片的位置會同步生成并顯示相應的家具模型。

進一步地，所述燈光渲染模塊設有燈光庫，所述燈光庫包括各種效果的燈光，在三維界面中，所述燈光渲染模塊用以在房型中添加燈光，實現燈光的渲染效果，每個燈光設有對應的燈光模型實體，添加的燈光在三維界面中是可視化的，光源可以進行實體化顯示，具有可移動性。

進一步地，在房型的繪制過程中，利用不規則多邊形面積的計算公式進行房型面積的計算，從而實現顯示繪制的房型的面積，設房型的頂點坐標分別為(x₁,y₁),(x₂,y₂),(x₃,y₃),(x₄,y₄)，則該房型的面積的計算公式為：

S＝(y₁+y₂)(x₂-x₁)/2+(y₃+y₂)(x₃-x₂)/2+(y₃+y₄)(x₄-x₂)/2+(y₄+y₁)(x₁-x₄)/2。

進一步地，利用碰撞檢測算法避免模型導入時發生交叉，在二維界面中對圖片之間進行碰撞檢測，檢測兩張圖片不發生碰撞的條件為：