基于合乘模式下的智能出租匹配系統(tǒng)設(shè)計(jì)

1、基于合乘形式下的智能出租匹配系統(tǒng)設(shè)計(jì)摘 要： 應(yīng)用WebGL技術(shù)的Three.js框架為三維網(wǎng)頁的開發(fā)提供了很好的技術(shù)解決方案。Three.js框架的應(yīng)用可以免去網(wǎng)頁3D展示所需要下載渲染插件的費(fèi)事，Three.js框架還可以把三維模型的OBJ格式很方便的加d到網(wǎng)頁中來展示。文章討論了Three.js框架技術(shù)，并對(duì)網(wǎng)頁上展示三維模型進(jìn)展了分析。關(guān)鍵詞： 無插件； 三維模型； Three.js； 3D展示中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228202103-18-03Research on plug-in less 3D model demonstration bas

2、ed on Three.jsHe Dongqin， Wang Conghua， Gong XiaoXizang Minzu University， Xianyang， Shannxi 712082， ChinaAbstract： The Three.js framework with WebGL technology provides a good technical solution for the development of 3D web pages. The application of the Three.js framework can avoid the trouble of d

3、ownloading the rendering plug-ins during 3D web page displaying. The Three.js framework can also easily load the OBJ format of 3D model into the web page to display. This paper discusses the Three.js framework technology and analyzes the 3D model displaying on the web page.Key words： plug-in less； 3

4、D model； Three.js； 3D display0 引言在互聯(lián)網(wǎng)的各個(gè)領(lǐng)域中，Web應(yīng)用的開展和變化是最快的，它已經(jīng)成為當(dāng)今網(wǎng)絡(luò)技術(shù)研究的重點(diǎn)。隨著網(wǎng)頁制作技術(shù)的不斷開展，網(wǎng)頁技術(shù)在PC端和挪動(dòng)端也越來越成熟。近年來HTML5標(biāo)準(zhǔn)的逐步落地和WebGL等技術(shù)的成熟，通過更加合理的網(wǎng)頁技術(shù)實(shí)現(xiàn)3D網(wǎng)頁成為可能。為了使博物館、文物館等藏品擁有一個(gè)良好的展示交互平臺(tái)，游客可以方便地在線觀看展品的三維立體效果，實(shí)現(xiàn)資源高度共享。目前很多博物館都建立了三維的網(wǎng)上博物館，很多博物館的內(nèi)部也有專門的設(shè)備三維的展示藏品?；赪eb3D的虛擬三維模型近年來得到廣泛的應(yīng)用，但之前的三維模型展示方式需要在

5、客戶端閱讀器安裝一個(gè)專門的渲染插件，且編程接口特別復(fù)雜。如今使用較多的虛擬現(xiàn)實(shí)軟件VRP，Virtools，Unity3D等都需要安裝相應(yīng)的渲染插件1。1 基于Web3D無插件研究Three.js是一款基于WebGL的開發(fā)框架。它封裝了WebGL底層的圖形接口，這是調(diào)用底層0penGLES圖形庫的一個(gè)JavaScript接口，從而降低了使用WebGL的難度2。Three.js屬于HTML5技術(shù)的一個(gè)分支。它提供了可以直接訪問的JavaScript API，允許在未安裝任何插件的閱讀器端下進(jìn)展2D/3D硬件加速渲染。它可以很容易地用來創(chuàng)立各種三維場景包括攝像機(jī)、光影、材質(zhì)等各種對(duì)象。WebGL是

6、通過網(wǎng)頁中的新型標(biāo)簽對(duì)三維模型進(jìn)展顯示。通過增加OpenGL ES2.0的一個(gè)JavaScript綁定，WebGL可以提供HTML5 Canvas的硬件3D加速渲染，以便Web開發(fā)人員就可以借助系統(tǒng)顯卡來2。在閱讀器里更流暢地展示模型和3D場景。Three.js是一個(gè)輕量級(jí)的用于在閱讀器中創(chuàng)立3D計(jì)算機(jī)圖形圖像應(yīng)用程序的JavaScript庫。Three.js封裝了底層的圖形接口，使得程序員可以在無需掌握繁冗的圖形學(xué)知識(shí)的情況下，也能用簡單的代碼實(shí)現(xiàn)三維場景的渲染3。2 基于Three.js三維模型顯示Three.js是依托網(wǎng)頁創(chuàng)立三維物體并顯示，three.js可以將二維數(shù)據(jù)以三維方式呈現(xiàn)出

7、來，三維場景遨游將成為Web的主要內(nèi)容，這對(duì)Web的影響是革命性的4。在網(wǎng)上展示3D物體，主要包含以下幾個(gè)方面。 創(chuàng)立三維場景：放置所有物體的空間容器，對(duì)應(yīng)現(xiàn)實(shí)的三維空間，其中后續(xù)添加的所有物體都是添加到場景中去，它相當(dāng)于一個(gè)大容器。 攝像機(jī)設(shè)置：在Three.js中，攝像機(jī)可以通過兩種方式將三維空間中的對(duì)象投影到二維空間：透視投影和正投投影。 光源設(shè)置：為了更好地展示三維模型中的場景，根據(jù)詳細(xì)的場景模型添加一個(gè)適宜的光源，襯托出場景主體的美感。 添加渲染：渲染器是3D引擎的核心部分，它完成繪制3D物體到屏幕上的任務(wù)。將3D空間中的物體對(duì)象映射到二維平面即電腦的顯示屏上，這是渲染器的功能，將定

8、義了場景中的物體，設(shè)置好相機(jī)之后，就可以調(diào)用渲染器的渲染函數(shù)來渲染整個(gè)場景了。 物體模型設(shè)置：場景模型可以是Three.js中自帶的規(guī)那么模型，也可以是通過3D建模工具導(dǎo)出的相應(yīng)的模型文件。Three.js為不同的文件格式提供了許多相應(yīng)的.js文件，使用的時(shí)候和相機(jī)控件一樣先引入html文件中。本文主要以3DMAX導(dǎo)出.obj和.mtl文件加載到場景中進(jìn)展顯示。 加載文件：首先是加載Three.js 3D引擎的庫文件，即引入Three.js文件。加載.obj三維模型的時(shí)候，可以只加載.obj文件，然后借助three.js引擎自定義材質(zhì)對(duì)象Material來加載材質(zhì)；也可以同時(shí)加載obj和mtl

9、文件，此時(shí)需要引入OBJLoader.js和MTLLoader.js文件，MTLLoader.js文件封裝的構(gòu)造函數(shù)THREE.MTLLoader用來加載.mtl材質(zhì)文件。 網(wǎng)格模型的構(gòu)建與導(dǎo)入、材質(zhì)的添加與燈光效果的添加，完成以上四步后，一個(gè)三維網(wǎng)頁的骨架就己經(jīng)搭建成功了，之后我們就可以在其中繪制構(gòu)建網(wǎng)格模型、添加材質(zhì)以及燈光等效果了。最終完成的效果如D1所示。圖1 OBJ模型最終效果圖展示下面是展示模型的關(guān)鍵部分代碼：/創(chuàng)立場景Scenevar scene=new THREE.Scene；/添加方向光var light=new THREE. PointLight 0xffffff；ligh

10、t.position.set0， 100， 100；scene.addlight；/創(chuàng)立相機(jī)var camera=new THREE.PerspectiveCamera40， 600/400， 1， 500；camera.position.set100，100，100；camera.lookAtscene.position；/創(chuàng)立渲染器var renderer=new THREE.WebGLRenderer；renderer.setSizewindow.innerWidth，window.innerHeight；renderer.setClearColor0xFFFFFF，1；/將渲染器添加到

11、html容器中document.body.appendChildrenderer.domElement；上面我們所做的，不過是靜態(tài)地往場景里添加元素。假設(shè)我們想讓元素挪動(dòng)，就需要實(shí)現(xiàn)動(dòng)畫。一個(gè)簡單實(shí)現(xiàn)動(dòng)畫的原理是，不斷更新屏幕畫面，animate做的就是這個(gè)。在animate里調(diào)用requireAnimateFrameanimate，就能實(shí)現(xiàn)畫面的循環(huán)更新。function animate /幀動(dòng)畫requestAnimationFrameanimate；/更新屏幕畫面render； 上面提到了THREE.TrackballControls，要使它有效，還需要在animate函數(shù)里去更新它。我

12、們?cè)趓ender函數(shù)里進(jìn)展改變物體屬性的操作。function render renderer.renderscene，camera； 3 性能分析系統(tǒng)運(yùn)行的環(huán)境：CPU為IntelRCoreTMi7-6700CPU 3.4OGHz；內(nèi)存為16.0GB；顯卡：AMD radeontm r5 340x；操作系統(tǒng)：Windows 10 企業(yè)版64位操作系統(tǒng)；閱讀器：版本 63.0.3239.84正式版本64位。4 完畢語基于當(dāng)前Web3D技術(shù)的快速開展，文中針對(duì)渲染過程中需要安裝插件的費(fèi)事，提出一種無插件的渲染方法，采用WebGL技術(shù)，三維模型可直接在客戶端閱讀器繪制，無需安裝任何插件。通過Thr

13、ee.js實(shí)現(xiàn)了3D導(dǎo)出模型直接在客戶端閱讀器進(jìn)展渲染，但此技術(shù)也存在一定的局限性，要求客戶端閱讀器需要支持WebGL，目前chrome、firefox、opera、safri根本上支持，IE11及以后支持展示。為了更好地配置三維場景中各模型的布局，設(shè)計(jì)了一個(gè)三維模型顯示平臺(tái)，可以對(duì)場景中所選模型進(jìn)展挪動(dòng)、旋轉(zhuǎn)和縮放，使其能被更好的觀摩。WebGL技術(shù)與HTML5結(jié)合實(shí)現(xiàn)三維網(wǎng)頁已經(jīng)成為一種趨勢(shì)，此三維模型展示可應(yīng)用與網(wǎng)站展示、博物館、校史館、文物館的展示等，具有較強(qiáng)的應(yīng)用價(jià)值。參考文獻(xiàn)References：1 王磊，高環(huán)，金野，許華虎.基于Web3D無插件的三維模型展示的研究J.計(jì)算機(jī)技術(shù)與開展，2021.4：217-2202王騰飛，劉俊男，周更新.基于Three.js3D引擎的三維網(wǎng)頁實(shí)現(xiàn)與加密J.企業(yè)技術(shù)開發(fā)，2021.2：79-803 譚文文，丁世勇.基于WebGL和HTML5的網(wǎng)頁3D動(dòng)畫的設(shè)計(jì)與實(shí)現(xiàn)J.電腦知識(shí)與技術(shù)，2021.28：6981-69834 榮艷冬.基于Web GL的3D技術(shù)在網(wǎng)頁中的運(yùn)用J.信息安