BIM模型網(wǎng)頁端可視化研究

renderer=new THREE.WebGLRenderer({antialias∶true});

renderer.localClippingEnabled = true;

document.getElementById('showModelDiv').appendChild(renderer.domElement);

2 基于WebGL的大壩模型展示系統(tǒng)創(chuàng)建

2.1 模型的建立與導(dǎo)入

2.1.1模型的創(chuàng)建

大壩三維模型中信息繁雜，最優(yōu)的處理方式是將模型及細部信息在建模軟件中建立好，導(dǎo)出成three.js能夠識別的模型文件，然后由three.js內(nèi)部實現(xiàn)網(wǎng)頁端模型的重建與顯示。本文基于三維參數(shù)化建模方法和參數(shù)化族庫創(chuàng)建方法，以revit軟件作為建模工具，建模流程如圖2所示，模型建好后導(dǎo)出成fbx格式。

圖2 建模流程圖

將模型按照建筑物類型劃分，確定出模型的各子模型，將子模型繼續(xù)拆分為構(gòu)件；運用revit的參數(shù)化建模，開發(fā)構(gòu)件模型，建立構(gòu)件庫；通過構(gòu)件裝配，生成子模型，進而建立模型模版庫，最后組裝成整體模型。

2.1.2模型的導(dǎo)入

模型的導(dǎo)入需借助加載器，這就涉及到三維模型的導(dǎo)入及處理問題[13]，不同格式的模型對應(yīng)不同的加載器，常用的幾種不同的加載器見表1。

表1 加載器

本文采用Revit三維建模軟件制作三維模型，模型以.fbx格式導(dǎo)出，并對模型的位置、大小、紋理、顏色進行修改，流程如圖3所示。

圖3 模型修改流程圖

2.2 用戶交互

2.2.1界面組件控制器

引入dat.gui.js，快速創(chuàng)建界面組件的相關(guān)控制流程如圖4所示。

圖4 界面組件創(chuàng)建

代碼如下:

gui=new dat.GUI();

gui.add(params，'planeConstantX'，-40，40).step(0.001).name('planeX Constant').onChange(function(value){

clipPlanes[0].constant = value;renderer.render(scene，camera); })

2.2.2模型查看控制器(controls)

引入OrbitControls.js，實現(xiàn)對模型的交互，如旋轉(zhuǎn)，縮放，移動等，代碼如下:

controls = new THREE.OrbitControls(camera，renderer.domElement);

controls.update();

2.2.3模型內(nèi)部與詳細信息查看

用戶通過點擊模型的任何部位以觀察該部位的詳細信息，具體實現(xiàn)流程如圖5所示。

代碼如下：

var raycaster = new THREE.Raycaster();

var mouse = new THREE.Vector2();

function showInfo(event){

$('#infoTable tbody').empty();

raycaster.setFromCamera(mouse，camera);

for(let index = 0; index < loadedObject.length; index++){

const element = loadedObject[index];

if(element.type=='Mesh'){

var intersects = raycaster.intersectObject(element);

for(let index = 0; index < intersects.length; index++){

const element = intersects[index];

for(const key in element){

if(element.hasOwnProperty(key)){

const subElement = element[key];

var table = '';

$('#infoTable tbody').append(table);} }} }}

此外，壩體模型內(nèi)部布置有監(jiān)測儀器模型，用戶通過界面組件控制器對壩體模型進行切割以便觀察。

3 工程模型實例

3.1 創(chuàng)建模型

以江蘇某工程為例，將實際的水利工程簡化成BIM模型。由于工程是重力壩，各壩段之間相似性很高，因此可以建立基本參數(shù)化族。壩段整體為擋水壩段，無泄水壩段，因此參數(shù)化族僅需要創(chuàng)建一個。

3.1.1參數(shù)化建族

大壩模型每個壩段存在著相似，因此可以建立參數(shù)化壩段族，將大壩的高度、頂部寬度、底部寬度、壩段寬度、上下游折坡點高度、坡率、廊道的底部高程、廊道高度、廊道寬度、廊道距離上游面距離、廊道個數(shù)等參數(shù)，參數(shù)化形成模板壩段，之后整體模型多次加載壩段族并確定位置坐標(biāo)即可。具體過程如圖 6所示。

除了壩段模型外，監(jiān)測儀器按照不同監(jiān)測類型分別建立相應(yīng)的族文件，按照實際布置于大壩的位置引入到模型中即可。

3.1.2整體模型組建

參數(shù)化族創(chuàng)建好后需要載入項目，組合生成整體模型，流程如下：

(1)壩體基本族庫創(chuàng)建好后，新建項目文件。

(2)根據(jù)實際水利工程的橫剖面圖在建筑立面中繪制相應(yīng)的標(biāo)高。

(3)根據(jù)平面布置圖中各建筑結(jié)構(gòu)的位置繪制相對應(yīng)的參照平面。

(4)按順序依次載入建好的模型，以繪制好的標(biāo)高和參照平面為基準(zhǔn)，完成模型的定位放置，最終完成所有模型的組裝。

圖6 參數(shù)化操作流程圖

3.2 網(wǎng)頁端模型顯示

將創(chuàng)建好的模型以.fbx格式導(dǎo)出，three.js可以加載帶材質(zhì)的模型也可以加載不帶材質(zhì)的模型，這取決于用戶需求。本工程不涉及大壩材質(zhì)的詳細展示，僅用相應(yīng)顏色進行渲染，使之與實際壩體相符，操作流程如圖 7所示。

圖7 格式轉(zhuǎn)換圖

模型格式轉(zhuǎn)換完成后，開始創(chuàng)建相應(yīng)代碼將BIM模型導(dǎo)入網(wǎng)頁端并顯示。實現(xiàn)模型旋轉(zhuǎn)，平移，縮放，透視，模型剖切等功能如圖 8所示。

圖8 模型展示圖

4 結(jié)語

本文基于WebGL技術(shù)，采用Three.js框架實現(xiàn)了水利大壩三維模型在客戶端Web瀏覽器的可視化展示與信息查看。通過調(diào)用不同模型加載器，導(dǎo)入外部三維模型；利用Three.js自帶的場景、相機、渲染器等基本功能模塊，實現(xiàn)了大壩三維模型在網(wǎng)頁端的顯示；通過模型控制器模塊使用戶能夠輕松完成交互，實現(xiàn)模型的平移、縮放、旋轉(zhuǎn)功能；利用界面組件控制器實現(xiàn)了壩體內(nèi)部細部構(gòu)造及其詳細信息在Web瀏覽器的查詢?yōu)g覽。本文的研究成果可應(yīng)用于水利工程信息化可視平臺開發(fā)，為可視平臺的三維模型展示提供一種技術(shù)手段。