本發(fā)明屬于計(jì)算機(jī)虛擬現(xiàn)實(shí)技術(shù)領(lǐng)域，具體涉及一種基于HTML5的三維虛擬接線(xiàn)方法。

背景技術(shù)：

實(shí)驗(yàn)課程是工科理論課程學(xué)習(xí)之外必不可少的部分。傳統(tǒng)的實(shí)驗(yàn)方法需要大面積的實(shí)驗(yàn)室空間、大量的實(shí)驗(yàn)儀器同時(shí)僅限于固定的開(kāi)放時(shí)間。因此作為傳統(tǒng)實(shí)驗(yàn)的有力補(bǔ)充，在線(xiàn)實(shí)驗(yàn)一直是研究的熱點(diǎn)。在線(xiàn)實(shí)驗(yàn)可以隨時(shí)隨地提供實(shí)驗(yàn)服務(wù)，無(wú)需實(shí)際的實(shí)驗(yàn)室空間，同時(shí)節(jié)省了設(shè)備購(gòu)置費(fèi)和后期維護(hù)費(fèi)。虛擬實(shí)驗(yàn)是在線(xiàn)實(shí)驗(yàn)的一個(gè)很重要的分支，提供有沉浸感和現(xiàn)實(shí)感可交互的虛擬實(shí)驗(yàn)可以提高實(shí)驗(yàn)者實(shí)驗(yàn)的興趣，進(jìn)而促進(jìn)實(shí)驗(yàn)課程的學(xué)習(xí)。目前已有電力電子方面的虛擬實(shí)驗(yàn)，也有少量的三維可交互的類(lèi)型。但是實(shí)驗(yàn)過(guò)程缺少真實(shí)實(shí)驗(yàn)基本的步驟——實(shí)驗(yàn)接線(xiàn)。尤其是三維虛擬接線(xiàn)，目前并無(wú)相關(guān)的研究。因此，研究三維虛擬接線(xiàn)以增強(qiáng)虛擬實(shí)驗(yàn)的功能非常必要。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的是提供一種基于HTML5的三維虛擬接線(xiàn)方法，以增強(qiáng)虛擬實(shí)驗(yàn)的現(xiàn)實(shí)感與沉浸感，加強(qiáng)工科學(xué)科實(shí)驗(yàn)課程的學(xué)習(xí)。

本發(fā)明所采用的技術(shù)方案是：1. 一種基于HTML5的三維虛擬接線(xiàn)方法，其特征在于，包括以下步驟：

步驟1：通過(guò)三維建模軟件構(gòu)建接線(xiàn)三維模型，并導(dǎo)出相應(yīng)格式的三維文件；

步驟2：使用HTML5的three.js 引擎將三維接線(xiàn)導(dǎo)入到三維場(chǎng)景中；

步驟3：使用HTML5的three.js 引擎來(lái)生成接線(xiàn)端模型，將其放在合適的位置，并定義其與三維接線(xiàn)的交互動(dòng)作。

作為優(yōu)選，步驟1中導(dǎo)出能被HTML5的three.js 引擎導(dǎo)入使用的三維文件。

作為優(yōu)選，步驟2中，HTML5的three.js 引擎導(dǎo)入模型時(shí)，根據(jù)三維接線(xiàn)的格式選擇對(duì)應(yīng)的導(dǎo)入函數(shù)。

作為優(yōu)選，步驟3中，接線(xiàn)端模型為幾何體geometry模型，其大小與接線(xiàn)大小相匹配，數(shù)量為導(dǎo)入接線(xiàn)模型的兩倍。

作為優(yōu)選，步驟3中，接線(xiàn)端模型位置為步驟2中導(dǎo)入的三維接線(xiàn)兩端，形成三維接線(xiàn)連接兩個(gè)接線(xiàn)柱結(jié)構(gòu)。

作為優(yōu)選，步驟3中接線(xiàn)端與三維接線(xiàn)的交互動(dòng)作的定義如下：

點(diǎn)擊接線(xiàn)端模型，如果接線(xiàn)端之前沒(méi)有被選中，則其變?yōu)楦吡溜@示，此時(shí)如果與之配對(duì)的接線(xiàn)端模型沒(méi)有被選擇，則出現(xiàn)文字提示“請(qǐng)選擇正確的接線(xiàn)端來(lái)接線(xiàn)”，否則如果與之配對(duì)的接線(xiàn)端模型被選中了，并且相應(yīng)的接線(xiàn)沒(méi)有連接，就導(dǎo)入接線(xiàn)模型，形成三維虛擬接線(xiàn)，并清除提示連接的文字；如果點(diǎn)擊的接線(xiàn)端模型之前已經(jīng)被選中，則其恢復(fù)為黑色，此時(shí)如果與之配對(duì)的接線(xiàn)端模型沒(méi)有被選擇，則清除提示性文字，并且如果此時(shí)接線(xiàn)已經(jīng)連接，則取消接線(xiàn)的導(dǎo)入。

本發(fā)明的有益效果是：本發(fā)明利用最新的計(jì)算機(jī)HTML5技術(shù)來(lái)實(shí)現(xiàn)三維虛擬接線(xiàn)，使用者無(wú)需安裝任何插件，在網(wǎng)頁(yè)上即可進(jìn)行操作。本發(fā)明可以有力擴(kuò)充虛擬實(shí)驗(yàn)的內(nèi)容，使之更接近真實(shí)實(shí)驗(yàn)的過(guò)程，從而增強(qiáng)虛擬實(shí)驗(yàn)的真實(shí)性、趣味性與沉浸感。這種無(wú)插件即可運(yùn)行的虛擬現(xiàn)實(shí)技術(shù)有廣泛的應(yīng)用前景。

附圖說(shuō)明

圖1是本發(fā)明實(shí)施例中基于HTML5的三維虛擬接線(xiàn)方法的示意圖；

圖2三維建模軟件3DS Max中接線(xiàn)的三維模型；

圖3是HTML5中的接線(xiàn)端模型；

圖4是交互動(dòng)作的邏輯框圖；

圖5是本發(fā)明實(shí)施例的三維虛擬接線(xiàn)單個(gè)接線(xiàn)端點(diǎn)擊提示圖；

圖6是本發(fā)明實(shí)施例的三維虛擬接線(xiàn)單根接線(xiàn)連接圖；

圖7是本發(fā)明實(shí)施例的三維虛擬接線(xiàn)接線(xiàn)配對(duì)錯(cuò)誤提示圖；

圖8是本發(fā)明實(shí)施例的三維虛擬接線(xiàn)正確結(jié)果示意圖。

具體實(shí)施方式

為了便于本領(lǐng)域普通技術(shù)人員理解和實(shí)施本發(fā)明，下面結(jié)合附圖及實(shí)施例對(duì)本發(fā)明作進(jìn)一步的詳細(xì)描述，應(yīng)當(dāng)理解，此處所描述的實(shí)施示例僅用于說(shuō)明和解釋本發(fā)明，并不用于限定本發(fā)明。

本發(fā)明的基于HTML5的三維虛擬接線(xiàn)方法采用最新的HTML5技術(shù)進(jìn)行三維的虛擬接線(xiàn)，實(shí)現(xiàn)了接線(xiàn)的三維化，同時(shí)在網(wǎng)頁(yè)端即可運(yùn)行，使用者無(wú)需安裝任何插件。該方法有力擴(kuò)充了虛擬實(shí)驗(yàn)的內(nèi)容，使之更接近真實(shí)實(shí)驗(yàn)的過(guò)程，從而增強(qiáng)虛擬實(shí)驗(yàn)的真實(shí)性、趣味性與沉浸感。

本實(shí)施例是以三根接線(xiàn)為例，使用最新的HTML5技術(shù)完成了虛擬接線(xiàn)的點(diǎn)擊變色、接線(xiàn)和文字提示等交互動(dòng)作，實(shí)現(xiàn)了三維虛擬接線(xiàn)功能。

本實(shí)施例中的三維虛擬接線(xiàn)系統(tǒng)如圖1所示，采用三層架構(gòu)，分別為三維模型層、交互層和虛擬接線(xiàn)層。三維模型層使用3DS Max三維建模軟件和HTML5技術(shù)分別構(gòu)建接線(xiàn)和接線(xiàn)端的三維模型，供給交互層使用。交互層對(duì)接線(xiàn)和接線(xiàn)端定義三種接線(xiàn)動(dòng)作，分別為點(diǎn)擊變色、接線(xiàn)和文字提示，并根據(jù)邏輯關(guān)系三種交互功能和諧統(tǒng)一。虛擬接線(xiàn)層根據(jù)交互層定義的交互動(dòng)作實(shí)現(xiàn)最終的三維虛擬接線(xiàn)功能。

本發(fā)明提供的一種基于HTML5的三維虛擬接線(xiàn)方法，包括以下步驟：

步驟1：通過(guò)三維建模軟件構(gòu)建接線(xiàn)三維模型，并導(dǎo)出相應(yīng)格式的文件；其具體實(shí)現(xiàn)包括以下子步驟：

步驟1.1：選用合適的三維建模軟件進(jìn)行接線(xiàn)的三維建模，本實(shí)施例使用3DS Max 來(lái)構(gòu)建；

步驟1.2：在軟件界面畫(huà)一條二維線(xiàn)條，選擇體積化，修改其形狀和長(zhǎng)度，構(gòu)建好接線(xiàn)的三維模型，如圖2所示；

步驟1.3：導(dǎo)出接線(xiàn)三維模型的OBJ格式的文件，同時(shí)默認(rèn)導(dǎo)出的還有其MTL文件，供步驟2使用。

步驟2：使用HTML5的three.js 引擎將三維接線(xiàn)導(dǎo)入到三維場(chǎng)景中；本實(shí)施例以O(shè)BJ格式三維模型文件為例進(jìn)行說(shuō)明，其具體實(shí)現(xiàn)包括以下子步驟：

步驟2.1：訪(fǎng)問(wèn)three.js 引擎技術(shù)網(wǎng)站，查找載入函數(shù)loader下OBJ格式文件導(dǎo)入的例子；

步驟2.2：根據(jù)實(shí)際情況修改相應(yīng)源程序，實(shí)現(xiàn)三維接線(xiàn)模型的導(dǎo)入；

步驟3：使用HTML5的three.js 引擎來(lái)生成接線(xiàn)端模型，將其放在合適的位置，并定義其交互動(dòng)作，圖3是交互操作的邏輯圖。其具體實(shí)現(xiàn)包括以下子步驟：

步驟3.1：通過(guò)構(gòu)建幾何體geometry來(lái)實(shí)例化接線(xiàn)端模型，其大小與接線(xiàn)模型的大小相匹配，數(shù)量是接線(xiàn)模型數(shù)量的兩倍，位置在接線(xiàn)模型的兩端，形成剛好連接接線(xiàn)的情形，其模型如圖4所示；

步驟3.2：定義接線(xiàn)端模型的交互動(dòng)作，實(shí)現(xiàn)接線(xiàn)端單個(gè)點(diǎn)擊變色，再點(diǎn)擊顏色還原的功能，以區(qū)分接線(xiàn)端是否被點(diǎn)擊，其模型如圖5所示；

步驟3.3：定義接線(xiàn)端模型的交互動(dòng)作，實(shí)現(xiàn)接線(xiàn)端配對(duì)點(diǎn)擊正確載入接線(xiàn)模型模型，再點(diǎn)擊取消載入的功能，其模型如圖6所示；

步驟3.4：定義接線(xiàn)端模型的交互動(dòng)作，實(shí)現(xiàn)接線(xiàn)端配對(duì)點(diǎn)擊錯(cuò)誤出現(xiàn)提示性語(yǔ)句，再點(diǎn)擊取消提示的功能，其模型如圖7所示。

缺少接線(xiàn)功能的虛擬實(shí)驗(yàn)與真實(shí)實(shí)驗(yàn)相比存在差別，實(shí)驗(yàn)環(huán)節(jié)不完整，三維虛擬實(shí)驗(yàn)也缺少相關(guān)接線(xiàn)設(shè)計(jì)。因此，本發(fā)明通過(guò)HTML5實(shí)現(xiàn)三維虛擬接線(xiàn)功能，增強(qiáng)虛擬實(shí)驗(yàn)的現(xiàn)實(shí)感、趣味性與沉浸感。

如果接線(xiàn)端選中而又沒(méi)有接線(xiàn)，則會(huì)出現(xiàn)文字提示“請(qǐng)選擇正確的接線(xiàn)端來(lái)接線(xiàn)”，如圖5、7所示。如果點(diǎn)擊正確，則會(huì)出現(xiàn)接線(xiàn)，連接正確，如圖6、8所示。本發(fā)明的操作結(jié)果顯示其可以實(shí)現(xiàn)交互功能中的點(diǎn)擊變色、接線(xiàn)和文字提示等功能，從而驗(yàn)證了本發(fā)明基于HTML5的三維虛擬接線(xiàn)方法的實(shí)際可行性。

應(yīng)當(dāng)理解的是，本說(shuō)明書(shū)未詳細(xì)闡述的部分均屬于現(xiàn)有技術(shù)。

應(yīng)當(dāng)理解的是，上述針對(duì)較佳實(shí)施例的描述較為詳細(xì)，并不能因此而認(rèn)為是對(duì)本發(fā)明專(zhuān)利保護(hù)范圍的限制，本領(lǐng)域的普通技術(shù)人員在本發(fā)明的啟示下，在不脫離本發(fā)明權(quán)利要求所保護(hù)的范圍情況下，還可以做出替換或變形，均落入本發(fā)明的保護(hù)范圍之內(nèi)，本發(fā)明的請(qǐng)求保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。