顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法和裝置的制造方法
【專利摘要】本發(fā)明的實施方式提供了一種顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法，該顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法包括：確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo)；將所述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)；根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素。根據(jù)本發(fā)明，在旋轉(zhuǎn)三維場景時，網(wǎng)頁元素不會隨著場景的縮放、轉(zhuǎn)動而變化甚至變形，提高了網(wǎng)頁元素顯示的真實感。此外，本發(fā)明的實施方式提供了一種顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的裝置。
【專利說明】
顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法和裝置
技術(shù)領(lǐng)域
[0001] 本發(fā)明的實施方式涉及計算機(jī)領(lǐng)域，更具體地，本發(fā)明的實施方式涉及一種顯示 三維目標(biāo)場景中包含的網(wǎng)頁元素的方法和裝置。
【背景技術(shù)】
[0002] 本部分旨在為權(quán)利要求書中陳述的本發(fā)明的實施方式提供背景或上下文。此處的 描述不因為包括在本部分中就承認(rèn)是現(xiàn)有技術(shù)。
[0003] 街景地圖是一種實景地圖服務(wù)，能夠更真實直觀地展示地理面貌。在街景地圖中， 包含有通過街景車等工具采集到的城市或其他環(huán)境的水平方向360°及垂直方向的街景圖 像，街景圖像中包含有城市或其他環(huán)境中每個地點的真實地理面貌。街景地圖服務(wù)提供商 將采集回的街景圖像還原到一個模型的環(huán)境，再利用開發(fā)的后臺管理軟件將各個孤立的單 視角3D模型無縫集成在一起后，移植到虛擬三維地圖，用戶就可以通過瀏覽器進(jìn)行交互式 的訪問。
[0004] 為了便于用戶識別瀏覽器顯示的街景地圖中的方向，街景地圖中通常包含用于指 示方向的標(biāo)識，該標(biāo)識為街景地圖服務(wù)提供商在對采集的數(shù)據(jù)進(jìn)行后期處理過程中添加至 街景地圖中的。

【發(fā)明內(nèi)容】

[0005] 但是，由于在街景地圖中，用于指示方向的標(biāo)識通常為三維（3D)模型，分別如圖 la、圖lb和圖lc中的箭頭所示。
[0006] 因此，在現(xiàn)有技術(shù)中，當(dāng)用戶縮放、轉(zhuǎn)動街景地圖時，如圖la、圖lb和圖1 c中所示， 該標(biāo)識會隨著視野的變化而變化，甚至?xí)?dǎo)致該標(biāo)識發(fā)生變形，從而降低了標(biāo)識顯示的真 實感和立體層次感。
[0007] 為此，非常需要一種改進(jìn)的在街景地圖中顯示標(biāo)識的方法，以使街景地圖中包含 的類似于標(biāo)識等網(wǎng)頁元素不會隨著地圖的縮放而變化甚至變形，提高其顯示的真實感和立 體層次感。
[0008] 在本上下文中，本發(fā)明的實施方式期望提供一種顯示三維目標(biāo)場景中包含的網(wǎng)頁 元素的方法和裝置。
[0009] 在本發(fā)明實施方式的第一方面中，提供了一種顯示三維目標(biāo)場景中包含的網(wǎng)頁元 素的方法，包括：
[0010] 確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo)；
[0011] 將所述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)；
[0012] 根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素。
[0013] 在本發(fā)明實施方式的第二方面中，提供了一種顯示三維目標(biāo)場景中包含的網(wǎng)頁元 素的裝置，包括：
[0014] 第一確定單元，用于確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo)；
[0015] 轉(zhuǎn)換單元，用于將所述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)；
[0016] 顯示單元，用于根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素。
[0017] 在本發(fā)明實施方式的第三方面中，提供了一種顯示三維目標(biāo)場景中包含的網(wǎng)頁元 素的裝置，例如，可以包括存儲器和處理器，其中，處理器可以用于讀取存儲器中的程序，執(zhí) 行下列過程:確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo);將所述三維坐標(biāo)轉(zhuǎn)換為對 應(yīng)的二維坐標(biāo);根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素。
[0018] 在本發(fā)明實施方式的第四方面中，提供了一種程序產(chǎn)品，其包括程序代碼，當(dāng)所述 程序代碼被執(zhí)行時，執(zhí)行下列過程:確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo);將所 述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo);根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素。
[0019] 根據(jù)本發(fā)明實施方式的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法和裝置，通過 將三維場景中的網(wǎng)頁元素轉(zhuǎn)化為二維進(jìn)行顯示，即三維場景中的網(wǎng)頁元素為二維圖像，從 而在縮放、轉(zhuǎn)動三維場景時，網(wǎng)頁元素不會隨著場景的縮放、轉(zhuǎn)動而變化甚至變形，提高了 網(wǎng)頁元素顯示的真實感，為用戶帶來了更好的體驗。
【附圖說明】
[0020] 通過參考附圖閱讀下文的詳細(xì)描述，本發(fā)明示例性實施方式的上述以及其他目 的、特征和優(yōu)點將變得易于理解。在附圖中，以示例性而非限制性的方式示出了本發(fā)明的若 干實施方式，其中：
[0021 ]圖la為現(xiàn)有技術(shù)中，第一種街景地圖中標(biāo)識顯示示意圖；
[0022]圖lb為現(xiàn)有技術(shù)中，第二種街景地圖中標(biāo)識顯示示意圖；
[0023]圖lc為現(xiàn)有技術(shù)中，第三種街景地圖中標(biāo)識顯示示意圖；
[0024] 圖2a示意性地示出了根據(jù)本發(fā)明實施方式的應(yīng)用場景示意圖；
[0025] 圖2b示意性地示出了根據(jù)本發(fā)明實施方式的瀏覽器包含的組件結(jié)構(gòu)示意圖；
[0026]圖3a示意性地示出了根據(jù)本發(fā)明實施方式的顯示三維目標(biāo)場景中包含的網(wǎng)頁元 素的方法實施流程示意圖；
[0027]圖3b示意性地示出了根據(jù)本發(fā)明實施方式的顯示視口示意圖；
[0028]圖3c示意性地示出了根據(jù)本發(fā)明實施方式的將網(wǎng)頁元素的三維坐標(biāo)轉(zhuǎn)換為在顯 示屏幕上顯示的二維坐標(biāo)的流程示意圖；
[0029]圖3d示意性地示出了根據(jù)本發(fā)明實施方式的棱臺轉(zhuǎn)換為立方體的示意圖；
[0030]圖3e示意性地示出了根據(jù)本發(fā)明實施方式的P(x，y，z)在Y0Z平面上投射為P'的示 意圖；
[0031]圖3f示意性地示出了根據(jù)本發(fā)明實施方式的網(wǎng)頁元素示意圖；
[0032]圖3g示意性地示出了根據(jù)本發(fā)明實施方式的修改網(wǎng)頁元素的顯示圖形后網(wǎng)頁元 素示意圖；
[0033]圖3h示意性地示出了根據(jù)本發(fā)明實施方式的綁定事件后的網(wǎng)頁元素示意圖；
[0034]圖4a示意性地示出了根據(jù)本發(fā)明實施方式的利用rotate函數(shù)在x軸上旋轉(zhuǎn)元素的 結(jié)構(gòu)示意圖；
[0035]圖4b示意性地示出了根據(jù)本發(fā)明實施方式的利用rotate函數(shù)在y軸上旋轉(zhuǎn)元素的 結(jié)構(gòu)示意圖；
[0036]圖4c示意性地示出了根據(jù)本發(fā)明實施方式的利用rotate函數(shù)在z軸上旋轉(zhuǎn)元素的 結(jié)構(gòu)示意圖；
[0037]圖5示意性地示出了根據(jù)本發(fā)明另一實施例的顯示三維目標(biāo)場景中包含的網(wǎng)頁元 素的裝置的結(jié)構(gòu)示意圖；
[0038]在附圖中，相同或?qū)?yīng)的標(biāo)號表不相同或?qū)?yīng)的部分。
【具體實施方式】
[0039]下面將參考若干示例性實施方式來描述本發(fā)明的原理和精神。應(yīng)當(dāng)理解，給出這 些實施方式僅僅是為了使本領(lǐng)域技術(shù)人員能夠更好地理解進(jìn)而實現(xiàn)本發(fā)明，而并非以任何 方式限制本發(fā)明的范圍。相反，提供這些實施方式是為了使本公開更加透徹和完整，并且能 夠?qū)⒈竟_的范圍完整地傳達(dá)給本領(lǐng)域的技術(shù)人員。
[0040] 本領(lǐng)域技術(shù)人員知道，本發(fā)明的實施方式可以實現(xiàn)為一種系統(tǒng)、裝置、設(shè)備、方法 或計算機(jī)程序產(chǎn)品。因此，本公開可以具體實現(xiàn)為以下形式，即：完全的硬件、完全的軟件 (包括固件、駐留軟件、微代碼等），或者硬件和軟件結(jié)合的形式。
[0041] 根據(jù)本發(fā)明的實施方式，提出了一種顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法 和裝置。
[0042] 在本文中，需要理解的是，附圖中的任何元素數(shù)量均用于示例而非限制，以及任何 命名都僅用于區(qū)分，而不具有任何限制含義。
[0043]下面參考本發(fā)明的若干代表性實施方式，詳細(xì)闡釋本發(fā)明的原理和精神。
[0044] 發(fā)明概述
[0045]本發(fā)明人發(fā)現(xiàn)，在街景地圖等三維場景中，用于指示方向的標(biāo)識通常用3D模型實 現(xiàn)，其隨著三維場景的縮放、轉(zhuǎn)動而變化，特別是在縮放、轉(zhuǎn)動到一定程度時標(biāo)識可能發(fā)生 變形，降低了標(biāo)識顯示的真實感和立體層次感。為了解決這個問題，本發(fā)明實施例中，將三 維場景中的標(biāo)識等網(wǎng)頁元素轉(zhuǎn)換為二維圖像進(jìn)行顯示，避免了其隨著三維場景的縮放、轉(zhuǎn) 動而變化。
[0046]在介紹了本發(fā)明的基本原理之后，下面具體介紹本發(fā)明的各種非限制性實施方 式。
[0047] 應(yīng)用場景總覽
[0048] 首先參考圖2a，在顯示三維場景時，通?；跒g覽器/服務(wù)器（B/S，Br〇WSer/ Server)模式實現(xiàn)，圖2a為B/S結(jié)構(gòu)示意圖，客戶機(jī)上只要安裝一個瀏覽器(Browser)，如 Netscape Navi gator或 Internet Explorer，月艮務(wù)器安裝 Oracle、Sybase、Informix 或SQL Server等數(shù)據(jù)庫。在這種結(jié)構(gòu)下，用戶界面完全通過WWW瀏覽器實現(xiàn)，一部分事務(wù)邏輯在前 端實現(xiàn)，但是主要事務(wù)邏輯在服務(wù)器端實現(xiàn)。瀏覽器通過服務(wù)器同數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互。其 中，瀏覽器的主要功能是將用戶選擇的Web資源呈現(xiàn)出來，它需要從服務(wù)器請求資源，并將 其顯示在瀏覽器窗口中，資源的格式通常是HTML(HyperText Markup Language，超文本標(biāo) 記語言），也包括PDF、image及其他格式。用戶用URI(Uniform Resource Identifier，統(tǒng)一 資源標(biāo)識符)來指定所請求資源的位置。
[0049] 如圖2b所示，瀏覽器的主要組件包括：
[0050] 1 .UI(User Interface，用戶界面），包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸浀取?br>[0051] 2.瀏覽器引擎，用來查詢及操作渲染引擎的接口。
[0052] 3.渲染引擎，用來顯示請求的內(nèi)容，例如，如果請求內(nèi)容為html，它負(fù)責(zé)解析html 及css(Cascading Style Sheets，層疊式樣表），并將解析后的結(jié)果顯不出來。
[0053] 4.網(wǎng)絡(luò)，用來完成網(wǎng)絡(luò)調(diào)用，例如http請求，它具有平臺無關(guān)的接口，可以在不同 平臺上工作。
[0054] 5. UI后端，用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平 臺的通用接口，底層使用操作系統(tǒng)的用戶接口。
[0055] 6. JS( JavaScript)解析器，用來解析執(zhí)行JS代碼。
[0056] 7.數(shù)據(jù)存儲，屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)。
[0057] 示例性方法
[0058]下面結(jié)合圖2a_圖2b的應(yīng)用場景，參考圖3a_圖3h、圖4a_圖4c來描述根據(jù)本發(fā)明示 例性實施方式的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法，該網(wǎng)頁元素例如為2D標(biāo)識。 需要注意的是，上述應(yīng)用場景僅是為了便于理解本發(fā)明的精神和原理而示出，本發(fā)明的實 施方式在此方面不受任何限制。相反，本發(fā)明的實施方式可以應(yīng)用于適用的任何場景。 [0059]如圖3a所示，其為本發(fā)明實施例提供的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方 法實施流程示意圖，可以包括以下步驟：
[0060] S31、確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo)。
[0061] 三維場景是一個3D透視空間，里面的物體通過3D建模形成，具有透視效果，從而產(chǎn) 生3D效果。
[0062]網(wǎng)頁元素的三維坐標(biāo)表示該網(wǎng)頁元素在三維目標(biāo)場景中的固定位置，其具體位置 可以由用戶根據(jù)實際需求設(shè)定，例如，對于用于指示方向等的標(biāo)識通常設(shè)置在三維目標(biāo)場 景的原點位置，三維目標(biāo)場景的原點位置一般為三維目標(biāo)場景的中心點。
[0063] S32、將確定出的三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)。
[0064]本步驟中即將確定出的網(wǎng)頁元素的三維坐標(biāo)轉(zhuǎn)換為在瀏覽器相應(yīng)顯示屏幕上的 二維坐標(biāo)。
[0065] S33、根據(jù)轉(zhuǎn)換得到的二維坐標(biāo)，顯示該網(wǎng)頁元素。
[0066] 瀏覽器根據(jù)步驟S32中映射得到的該網(wǎng)頁元素在顯示屏幕上的二維坐標(biāo)在顯示屏 幕的相應(yīng)位置上顯示該網(wǎng)頁元素。
[0067]瀏覽器在顯示三維目標(biāo)場景過程中，三維目標(biāo)場景會根據(jù)用戶的選擇（即用戶鼠 標(biāo)操作）而轉(zhuǎn)動，即瀏覽器頁面顯示的目標(biāo)場景會發(fā)生變化，這在三維空間里實際上是因為 camera指向的方向發(fā)生了變化，即觀察三維場景的角度發(fā)生變化，導(dǎo)致顯示視口（F0V， Field of View)不同。
[0068]為了更好的理解本發(fā)明實施例，以下結(jié)合圖3b對本發(fā)明進(jìn)行介紹。
[0069]針對任一三維場景，根據(jù)拍攝相機(jī)（圖3b中的camera)的拍攝位置和拍攝角度的不 同得到的三維目標(biāo)場景（即瀏覽器顯示的三維目標(biāo)場景)也不同。
[0070]具體的，當(dāng)拍攝相機(jī)的拍攝角度發(fā)生變化時，導(dǎo)致顯示視口（F0V，F(xiàn)ield of View) 不同，即使得拍攝相機(jī)的成像范圍發(fā)生了變化。
[0071 ] 如圖313所示，camera(拍攝相機(jī)）顯示視口包括水平視口（Horizontal F0V)和垂直 視口（Vertical F0V)。只有在顯示視口內(nèi)的三維場景可以呈現(xiàn)在瀏覽器對應(yīng)的顯示屏幕 上。顯示視口由近平面(Near)和遠(yuǎn)平面(Far)組成，位于近平面和遠(yuǎn)平面之間的三維場景可 以呈現(xiàn)在與瀏覽器相應(yīng)的顯示屏上。因此，拍攝相機(jī)的拍攝位置和拍攝角度的不同，顯示屏 幕呈現(xiàn)的三維目標(biāo)場景圖像也不同，這是由拍攝相機(jī)的成像范圍不同而引起的。
[0072] 為了在二維的顯示屏幕上正確顯示三維場景中的具有固定三維坐標(biāo)的網(wǎng)頁元素， 則還需要將網(wǎng)頁元素的三維坐標(biāo)轉(zhuǎn)換為在二維顯示屏幕上顯示的二維坐標(biāo)，以下詳細(xì)介紹 之。
[0073]本發(fā)明實施例中可以按照圖3c所示的流程將網(wǎng)頁元素的三維坐標(biāo)轉(zhuǎn)換為在顯示 屏幕上顯示的二維坐標(biāo)：
[0074] S321、確定透視投影矩陣。
[0075]根據(jù)圖3b可知，拍攝相機(jī)的顯示視口為一個棱臺（兩個截面分別為近平面和遠(yuǎn)平 面），其與拍攝相機(jī)形成一個棱錐，稱之為視錐體。由此可知，離拍攝相機(jī)距離近的物體成像 后較大，而離拍攝相機(jī)較遠(yuǎn)的物體成像后較小。投影的目的就是將上述的棱臺轉(zhuǎn)換為立方 體，轉(zhuǎn)換后，棱臺的前截面（圖3b中的近平面)的右上角點變?yōu)榱⒎襟w的前平面的中心，如圖 3d所示，以形成最終的立方體。由圖3d可知，這個變換過程可以將棱臺較小的部分變大，較 大的部分縮小。這就是投影會產(chǎn)生近大遠(yuǎn)小的效果的原因。變化后的x坐標(biāo)范圍為[-1，1]，y 坐標(biāo)范圍為[_l，l]，z坐標(biāo)范圍為[0，1](部分模型中略有不同，z坐標(biāo)范圍也可能為[-1， 1])〇
[0076]投影過程可以分為兩部分，一部分為將顯示視口內(nèi)任一點P(x，y，z)投射到近平面 的過程，另一部分為由近平面縮放的過程。
[0077]假設(shè)顯示視口內(nèi)任一點P(x，y，z)在近平面上的投射為？'（1'，7'，2'），而？'經(jīng)過縮 放后的最終坐標(biāo)假設(shè)為?"（1"，/'，2"），如果假設(shè)投影矩陣為1其中1為四維矩陣，而網(wǎng)頁 元素的三維坐標(biāo)為三維，為了準(zhǔn)確計算得到M，需要將三維坐標(biāo)轉(zhuǎn)換為四維坐標(biāo)，轉(zhuǎn)換后的 四維坐標(biāo)稱為原三維坐標(biāo)的齊次坐標(biāo)，其中齊次坐標(biāo)就是將一個原本是n維向量用一個n+1 維向量來表示，本發(fā)明實施例中，可以將三維坐標(biāo)(x，y，z)轉(zhuǎn)換為四維坐標(biāo)(x，y，z，l)，相應(yīng) 的，對于P"也需要將其轉(zhuǎn)換為四維坐標(biāo)，假設(shè)轉(zhuǎn)換后的四維坐標(biāo)為(x"，y"，z"，w)。例如，二 維點(x，y)的齊次坐標(biāo)表示為(hx，hy，h)，齊次坐標(biāo)(8,4,2)、（4,2，1)表示的都是二維點(4， 2)，該轉(zhuǎn)換并不會改變?nèi)S坐標(biāo)的原值。
[0078]根據(jù)矩陣成像可知，如下等式PM = P"成立，即： a00 a〇l fifgj
[0079] [.V, V,Z,1J . V ,Z ,H'J" Q. (Xrj j d'ry，
[0080]基于此，以下首先對P(x,y,z)在YOZ平面上投射為P'（x'，y'，z'）的過程進(jìn)行說明， 假設(shè)視椎體在P〇與Z軸方向的夾角為9。
[0081]如圖3e所示，假設(shè)P點在Z軸上投射為Q，P'點在Z軸上的投射為Q'。
[0082]由圖3e可知，三角形OP'Q'與三角形0PQ相似，于是如下等式成立：
[0084] 同理，根據(jù)對P(x，y，z)在X0Z平面上的投影可得
z'=n，其具體計算過程 與上述P (x，y，z)在Y0Z平面上的投影過程類似，這里不再贅述。
[0085] 接下來再對P'縮放的過程進(jìn)行說明。假設(shè)投影平面的高度為H，由于轉(zhuǎn)換后的立方 體高度為2。因此
假設(shè)投 影平面的縱橫比為Aspect，由此可得
[0086] 而對于z"來說，假設(shè)
由于在投影映射之前，z的范圍為[n，f]，其中，n 為近平面到原點的距離，f為遠(yuǎn)平面到原點的距離。而投影映射投影后，z"的范圍為[_1，1]， 由此可得如下方程組：
由此可知，
[0089]將(x"，y"，z"）代入上述的矩陣乘法等式中可得：
[0091 ]由上式可見，x"，y"，z"都除以了Pz，于是對于上式再乘以Pz(這并不改變齊次坐標(biāo) 的大小)可得：
[0093]需要說明的是，上述的x即為PX(P點在X軸上的坐標(biāo)），y即為Py(P點在Y軸上的坐 標(biāo)），z即為PZ(P點在Z軸上的坐標(biāo)）。解上述矩陣的每一列可得：
，投影矩陣M的其余元素可以為0， 123 S322、進(jìn)行透視分割。 2 由于實際計算獲得的坐標(biāo)值為[
，即進(jìn) 行齊次坐標(biāo)轉(zhuǎn)換時，將坐標(biāo)(x，y，z，1)轉(zhuǎn)換為齊次坐標(biāo)(x〃pz，y 〃pz，z 〃pz，pz)，因此，得到的 是[_PZ，PZ]上的齊次切割空間序列，需要將其單位化，將每個坐標(biāo)除以w單位的值，即P z，得 到在[_1，1]上的序列。 3 S323、視圖轉(zhuǎn)換。
[0099]由于顯示屏幕為二維的，三維坐標(biāo)中的z為深度坐標(biāo)，因此，在屏幕上無需顯示z 坐標(biāo)，而經(jīng)過步驟S322處理后得到的是以屏幕中心為原點的[-1，1]范圍的坐標(biāo) vector，基于此，進(jìn)行如下的變換可以得到以屏幕左上角為原點，屏幕寬高范圍的點的坐 標(biāo)值：
其中， 奶.￡；.為顯不屏幕寬度，window/innerHeigh為顯不屏幕高度。
[0100]較佳的，由于只有位于顯示視口內(nèi)的三維場景和網(wǎng)頁元素會出現(xiàn)在屏幕，因此，具 體實施時，在執(zhí)行步驟S32之前，可以先根據(jù)步驟S31獲取的網(wǎng)頁元素的三維坐標(biāo)判斷該網(wǎng) 頁元素是否位于顯示視口內(nèi)，如果確定該網(wǎng)頁元素位于顯示視口內(nèi)時，再執(zhí)行步驟S32,否 貝1J，可以不進(jìn)行處理，即如果該網(wǎng)頁元素不位于顯示視口內(nèi)，則瀏覽器可以不進(jìn)行坐標(biāo)的轉(zhuǎn) 換，這樣，節(jié)約瀏覽器相應(yīng)的處理資源。
[0101] 當(dāng)三維目標(biāo)場景中包含的網(wǎng)頁元素位于顯示視口內(nèi)時，瀏覽器可以根據(jù)步驟S32 得到的該網(wǎng)頁元素在相應(yīng)顯示屏幕上的二維坐標(biāo)，進(jìn)而，在確定出的顯示位置上進(jìn)行渲染 以顯示該網(wǎng)頁元素。較佳的，瀏覽器可以利用CSS 3D函數(shù)在確定出的顯示位置上進(jìn)行渲染 以顯示該網(wǎng)頁元素。隨著三維目標(biāo)場景的轉(zhuǎn)動，其中心點的坐標(biāo)是變化的，因此，網(wǎng)頁元素 的三維坐標(biāo)也是變化的，由此，對其進(jìn)行轉(zhuǎn)換為在顯示屏幕上顯示的二維坐標(biāo)也是變化的。 在本發(fā)明中，瀏覽器將獲得實時的網(wǎng)頁元素的二維坐標(biāo)，且利用CSS 3D變換根據(jù)獲得的二 維坐標(biāo)將其渲染顯示在屏幕上，這樣，可以獲得網(wǎng)頁元素隨三維目標(biāo)場景的變化而運(yùn)動的 效果，增加了網(wǎng)頁元素顯示的真實感。
[0102] 另外，本發(fā)明實施例中，在三維場景中顯示的網(wǎng)頁元素可以提供為網(wǎng)頁中常見的 元素，例如可以提供為Div元素，Div元素為網(wǎng)頁中的塊級元素，包含一整塊內(nèi)容，可以進(jìn)行 語義化操作，也可以進(jìn)行綁定事件，修改網(wǎng)頁元素的顯示圖形等操作。如圖3f所示，為三維 目標(biāo)場景中包含的網(wǎng)頁元素原始示意圖（圖3f中中心有"+"的圓形所示部分為本發(fā)明實施 例中在三維場景中設(shè)置的網(wǎng)頁元素），而修改該網(wǎng)頁元素的顯示圖形后網(wǎng)頁元素示意圖如 圖3g所示（由中心有"+"的圓形修改為指向左側(cè)的單箭頭）。如果為該網(wǎng)頁元素添加綁定事 件后，在檢測到觸發(fā)事件，例如用戶點擊該網(wǎng)頁元素，則彈出圖3h所示的消息框。
[0103] 為了使顯示的網(wǎng)頁元素更具立體層次感，本發(fā)明實施例中，可以為網(wǎng)頁元素添加 一定的顯示角度。較佳的，具體實施時，可以利用CSS 3D變換中的rotate函數(shù)為網(wǎng)頁元素添 加預(yù)設(shè)的顯示角度，rotate函數(shù)可以在特定軸向上旋轉(zhuǎn)網(wǎng)頁元素，如圖4a_圖4c所示，分別 為rotate函數(shù)在x軸、y軸和z軸上旋轉(zhuǎn)網(wǎng)頁元素的操作結(jié)果示意圖。這樣，步驟S33中，在瀏 覽器顯示該網(wǎng)頁元素時，可以顯示添加了顯示角度的網(wǎng)頁元素。本發(fā)明實施例中，可以利用 rotate函數(shù)在x軸或者y軸上旋轉(zhuǎn)三維目標(biāo)場景中包含的網(wǎng)頁元素，使其在視覺效果上更具 立體層次感。
[0104]本發(fā)明實施例提供的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法中，通過將三維 目標(biāo)場景中包含的網(wǎng)頁元素轉(zhuǎn)換為二維圖像進(jìn)行顯示，避免網(wǎng)頁元素隨著三維目標(biāo)場景的 縮放而變化甚至變形，提高了網(wǎng)頁元素顯示的真實感，另外，還可以為該網(wǎng)頁元素添加預(yù)設(shè) 的顯示角度，使其更具立體層次感。另外，根據(jù)本發(fā)明實施例，三維目標(biāo)場景中包含的網(wǎng)頁 元素可以為Div元素，因此，可以為該網(wǎng)頁元素綁定事件，或者更換背景圖片等操作，使得對 于該網(wǎng)頁元素的相關(guān)操作更加便利。
[0105] 示例性設(shè)備
[0106] 在介紹了本發(fā)明示例性實施方式的方法之后，接下來，參考圖5對本發(fā)明示例性實 施方式的、顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的裝置進(jìn)行描述。
[0107] 如圖5所示，本發(fā)明實施例提供的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的裝置，可 以包括：
[0108] 第一確定單元51，用于確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo)；
[0109] 轉(zhuǎn)換單元52,用于將第一確定單元51確定出的三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)；
[0110]顯示單元53，用于根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素。 具體實施時，本發(fā)明實施例提供的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的裝置， 還可以包括：
[0112] 第二確定單元54,用于在所述轉(zhuǎn)換單元52將所述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo) 之前，根據(jù)所述網(wǎng)頁元素的三維坐標(biāo)，確定所述網(wǎng)頁元素位于顯示視口內(nèi)。
[0113] 較佳的，所述顯示單元53,可以包括：
[0114] 渲染子單元531，用于在所述二維坐標(biāo)上進(jìn)行渲染以顯示所述網(wǎng)頁元素。
[0115] 其中，所述渲染子單元531，具體用于利用CSS 3D變換函數(shù)在所述二維坐標(biāo)上進(jìn)行 渲染以顯示所述網(wǎng)頁元素。
[0116]具體實施時，本發(fā)明實施例提供的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的裝置 中，所述渲染子單元531還可以利用CSS 3D變換函數(shù)為所述網(wǎng)頁元素添加預(yù)設(shè)的顯示角度。 [0117]在介紹了上面的本發(fā)明示例性實施方式的方法和裝置之后，接下來，介紹根據(jù)本 發(fā)明的又一示例性實施方式的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的裝置。
[0118]在一些可能的實施方式中，根據(jù)本發(fā)明的顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的 裝置可以包括至少一個處理單元、以及至少一個存儲單元。其中，所述存儲單元存儲有程序 代碼，當(dāng)所述程序代碼被所述處理單元執(zhí)行時，使得所述處理單元執(zhí)行本說明書上述"示例 性方法"部分中描述的根據(jù)本發(fā)明各種示例性實施方式的顯示三維目標(biāo)場景中包含的網(wǎng)頁 元素的方法中的各種步驟。例如，所述處理單元可以執(zhí)行如圖3a中所示的步驟S31，確定三 維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo)，步驟S32，將確定出的三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二 維坐標(biāo)，以及步驟S33，根據(jù)轉(zhuǎn)換得到的二維坐標(biāo)，顯示該網(wǎng)頁元素。
[0119] 應(yīng)當(dāng)注意，盡管在上文詳細(xì)描述中提及了裝置的若干單元或子單元，但是這種劃 分僅僅是示例性的并非強(qiáng)制性的。實際上，根據(jù)本發(fā)明的實施方式，上文描述的兩個或更多 單元的特征和功能可以在一個單元中具體化。反之，上文描述的一個單元的特征和功能可 以進(jìn)一步劃分為由多個單元來具體化。
[0120] 此外，盡管在附圖中以特定順序描述了本發(fā)明方法的操作，但是，這并非要求或者 暗示必須按照該特定順序來執(zhí)行這些操作，或是必須執(zhí)行全部所示的操作才能實現(xiàn)期望的 結(jié)果。附加地或備選地，可以省略某些步驟，將多個步驟合并為一個步驟執(zhí)行，和/或?qū)⒁粋€ 步驟分解為多個步驟執(zhí)行。
[0121]雖然已經(jīng)參考若干【具體實施方式】描述了本發(fā)明的精神和原理，但是應(yīng)該理解，本 發(fā)明并不限于所公開的【具體實施方式】，對各方面的劃分也不意味著這些方面中的特征不能 組合以進(jìn)行受益，這種劃分僅是為了表述的方便。本發(fā)明旨在涵蓋所附權(quán)利要求的精神和 范圍內(nèi)所包括的各種修改和等同布置。
【主權(quán)項】
1. 一種顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的方法，包括： 確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo)； 將所述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)； 根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素。2. 根據(jù)權(quán)利要求1所述的方法，在將所述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)之前，還包 括： 根據(jù)所述網(wǎng)頁元素的三維坐標(biāo)，確定所述網(wǎng)頁元素位于顯示視口內(nèi)。3. 根據(jù)權(quán)利要求1所述的方法，其中，根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素，具體包 括： 在所述二維坐標(biāo)處進(jìn)行渲染以顯示所述網(wǎng)頁元素。4. 根據(jù)權(quán)利要求3所述的方法，其中，在所述二維坐標(biāo)處進(jìn)行渲染以顯示所述網(wǎng)頁元 素，具體包括： 利用層疊樣式表三維CSS 3D變換函數(shù)在所述二維坐標(biāo)處進(jìn)行渲染以顯示所述網(wǎng)頁元 素。5. 根據(jù)權(quán)利要求4所述的方法，還包括： 利用CSS 3D變換函數(shù)為所述網(wǎng)頁元素添加預(yù)設(shè)的顯示角度。6. -種顯示三維目標(biāo)場景中包含的網(wǎng)頁元素的裝置，包括： 第一確定單元，用于確定三維目標(biāo)場景中包含的網(wǎng)頁元素的三維坐標(biāo)； 轉(zhuǎn)換單元，用于將所述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)； 顯示單元，用于根據(jù)所述二維坐標(biāo)，顯示所述網(wǎng)頁元素。7. 根據(jù)權(quán)利要求6所述的裝置，還包括： 第二確定單元，用于在所述轉(zhuǎn)換單元將所述三維坐標(biāo)轉(zhuǎn)換為對應(yīng)的二維坐標(biāo)之前，根 據(jù)所述網(wǎng)頁元素的三維坐標(biāo)，確定所述網(wǎng)頁元素位于顯示視口內(nèi)。8. 根據(jù)權(quán)利要求6所述的裝置，所述顯示單元，包括： 渲染子單元，用于在所述二維坐標(biāo)處進(jìn)行渲染以顯示所述網(wǎng)頁元素。9. 根據(jù)權(quán)利要求8所述的裝置， 所述渲染子單元，具體用于利用CSS 3D變換函數(shù)在所述二維坐標(biāo)處進(jìn)行渲染以顯示所 述網(wǎng)頁元素。10. 根據(jù)權(quán)利要求9所述的裝置，其中所述渲染子單元還用于利用CSS 3D變換函數(shù)為所 述網(wǎng)頁元素添加預(yù)設(shè)的顯示角度。
【文檔編號】G06F17/30GK105912569SQ201610188915
【公開日】2016年8月31日
【申請日】2016年3月29日
【發(fā)明人】周江
【申請人】網(wǎng)易傳媒科技（北京）有限公司