一種三維網(wǎng)頁設(shè)計方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001] 本申請涉及一種三維網(wǎng)頁設(shè)計方法及裝置。
【背景技術(shù)】
[0002] 人類在觀看空間里的物體時，由于兩眼在水平方向上的位置不同，左右眼看到的 兩個視圖略有不同，而人的大腦能夠通過這兩個視圖的視差感知到一個具有景深和層次感 的立體景象。現(xiàn)有的立體三維瀏覽器便是基于這種原理，通過為立體網(wǎng)頁渲染具有視差的 左右眼視圖，使瀏覽器用戶感知到一個具有真實立體感的三維網(wǎng)頁界面。
[0003] 現(xiàn)有的立體三維網(wǎng)頁的制作中，一般有以下幾種：
[0004] 1、基于HTML5Canvas的圖形繪制方法。由于傳統(tǒng)網(wǎng)頁界面設(shè)計采用的是圍繞著 HTML DOM排版、CSS對DOM節(jié)點進行外觀描述的方式，而不是圖形學(xué)繪制的方式，因此這種 繪制方法僅適用于為網(wǎng)頁部件生成游戲、動畫等三維仿真內(nèi)容，而不適合網(wǎng)頁界面設(shè)計。
[0005] 2、基于瀏覽器插件和OPEN GL或03D等三維編程接口，根據(jù)三維操作指令生成三 維內(nèi)容的方法，但是這種方法并非由開發(fā)人員來設(shè)計三維界面，而是頁面加載后由用戶通 過按鈕或鼠標(biāo)右鍵等方式啟動三維指令生成三維內(nèi)容。打開后還需用戶操作才能生成三維 畫面，過程較繁瑣，體驗度不高。
[0006] 3、基于HTML、CSS、JavaScript標(biāo)準(zhǔn)擴展的方法，符合傳統(tǒng)網(wǎng)頁界面設(shè)計的習(xí)慣， 但該方法的擴展導(dǎo)致瀏覽器內(nèi)核較大的改動。
[0007] 因此，現(xiàn)有技術(shù)中的三維網(wǎng)頁的設(shè)計方法，對瀏覽器內(nèi)核改動較大，并且大多需要 用戶在使用時進行后續(xù)啟動等操作，帶來使用上的不便。

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

[0008] 本申請?zhí)峁┮环N三維網(wǎng)頁設(shè)計方法及裝置，可以將網(wǎng)頁元素設(shè)計成帶有三維效 果，提升了用戶的體驗度。
[0009] 根據(jù)本申請的第一方面，本申請?zhí)峁┮环N三維網(wǎng)頁設(shè)計方法，包括：接收外部輸入 的在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè)置的對應(yīng)的錨點；
[0010] 根據(jù)所述對應(yīng)的錨點在所述全局三維容器中的坐標(biāo)，將所述網(wǎng)頁元素在所述全局 三維容器中進行定位，得到所述網(wǎng)頁元素的定位坐標(biāo)及深度值；根據(jù)所述定位坐標(biāo)，分別在 左眼視圖以及右眼視圖繪制所述網(wǎng)頁元素。
[0011] 可選的，所述在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè)置對應(yīng)的錨點之前包括：指 定全局三維容器；設(shè)置三維場景參數(shù)，所述三維場景參數(shù)至少包括：觀看者兩眼瞳距、觀 看者與屏幕的距離以及所述全局三維容器的坐標(biāo)系；所述坐標(biāo)系的橫向坐標(biāo)軸為平行于屏 幕的水平坐標(biāo)軸，垂直坐標(biāo)軸為平行于屏幕的豎直坐標(biāo)軸，縱向坐標(biāo)軸為垂直于屏幕的坐 標(biāo)軸，所述縱向坐標(biāo)軸以指向靠近觀察者方向為正，指向遠離觀察者方向為負。
[0012] 可選的，所述根據(jù)所述對應(yīng)的錨點在所述全局三維容器中的坐標(biāo)，將所述網(wǎng)頁元 素在所述全局三維容器中進行定位，得到所述網(wǎng)頁元素的定位坐標(biāo)及深度值包括：根據(jù)所 述對應(yīng)的錨點在所述全局三維容器中的坐標(biāo)結(jié)合所述三維場景參數(shù)，計算出所述網(wǎng)頁元素 的水平視差值P、縮放比例ratio、水平位置Xa以及垂直位置y a，其中，
Xa= ratio X X，y a= ratio X y，其中，e為所述觀看者兩眼 瞳距，而V為所述觀看者與屏幕的距離，X，y，z分別為所述錨點在所述全局三維容器的坐標(biāo) 系中的橫向坐標(biāo)、垂直坐標(biāo)以及縱向坐標(biāo)。
[0013] 可選的，所述根據(jù)所述定位坐標(biāo)，分別在左眼視圖以及右眼視圖繪制所述網(wǎng)頁元 素包括：確定將（Xa，ya)作為左視圖位置，（xa+p，ya)作為右視圖位置；根據(jù)所述縮放比例 ratio,在（xa，ya)以及（xa+p，ya)處對所述網(wǎng)頁元素進行縮放處理。
[0014] 可選的，所述接收外部輸入的在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè)置的對應(yīng)的 錨點之前包括：接收在預(yù)設(shè)的全局三維容器中設(shè)定的所述網(wǎng)頁元素的長度與寬度。
[0015] 根據(jù)本申請的第二方面，提供一種三維網(wǎng)頁設(shè)計裝置，包括：接收單元，用于接收 外部輸入的在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè)置的對應(yīng)的錨點；定位單元，用于根據(jù) 所述對應(yīng)的錨點在所述全局三維容器中的坐標(biāo)，將所述網(wǎng)頁元素在所述全局三維容器中進 行定位，得到所述網(wǎng)頁元素的定位坐標(biāo)及深度值；繪制單元，用于根據(jù)所述定位坐標(biāo)，分別 在左眼視圖以及右眼視圖繪制所述網(wǎng)頁元素。
[0016] 可選的，還包括：指定單元，用于指定全局三維容器；第二設(shè)置單元，用于設(shè)置三 維場景參數(shù)，所述三維場景參數(shù)至少包括：觀看者兩眼瞳距、觀看者與屏幕的距離以及所述 全局三維容器的坐標(biāo)系；所述坐標(biāo)系的橫向坐標(biāo)軸為平行于屏幕的水平坐標(biāo)軸，垂直坐標(biāo) 軸為平行于屏幕的豎直坐標(biāo)軸，縱向坐標(biāo)軸為垂直于屏幕的坐標(biāo)軸，所述縱向坐標(biāo)軸以指 向靠近觀察者方向為正，指向遠離觀察者方向為負。
[0017] 可選的，所述定位單元具體用于：根據(jù)所述對應(yīng)的錨點在所述全局三維容器中的 坐標(biāo)結(jié)合所述三維場景參數(shù)，計算出所述網(wǎng)頁元素的水平視差值P、縮放比例ratio、水平 位置Xa以及垂直位置ya，其中，
[0018]
Xa= ratio X X，y a= ratio Xy
[0019] 其中，e為所述觀看者兩眼瞳距，而v為所述觀看者與屏幕的距離，x，y，z分別為 所述錨點在所述全局三維容器的坐標(biāo)系中的橫向坐標(biāo)、垂直坐標(biāo)以及縱向坐標(biāo)。
[0020] 可選的，所述繪制單元包括：坐標(biāo)確定模塊，用于將（Xa，ya)作為左視圖位置， (Xa+P，ya)作為右視圖位置；縮放處理模塊，用于根據(jù)所述縮放比例ratio,在（x a，ya)以及 (Xa+P，ya)處對所述網(wǎng)頁元素進行縮放處理。
[0021] 可選的，還包括第二接收單元，用于接收在預(yù)設(shè)的全局三維容器中設(shè)定的所述網(wǎng) 頁元素的長度與寬度。
[0022] 本申請?zhí)峁┑娜S網(wǎng)頁設(shè)計方法及裝置，在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè) 置對應(yīng)的錨點，根據(jù)對應(yīng)的錨點的坐標(biāo)，將網(wǎng)頁元素在全局三維容器中進行定位，得到網(wǎng)頁 元素的定位坐標(biāo)及深度值，根據(jù)定位坐標(biāo)，分別在左眼視圖以及右眼視圖繪制所述網(wǎng)頁元 素，可以將網(wǎng)頁元素設(shè)計成帶有三維效果，因此觀察者或者網(wǎng)頁使用者在瀏覽網(wǎng)頁時，即可 看到三維的網(wǎng)頁內(nèi)容，提升了用戶的體驗度。并且網(wǎng)頁圖像上元素的需變換位置時，僅需要 利用新的錨點對元素進行定位，因此減少了冗佘計算，減少對瀏覽器內(nèi)核的改動。本申請方 法適用于任何網(wǎng)頁，適用范圍大，并且本申請形成的三維界面不需要用戶進行啟動，設(shè)計后 打開網(wǎng)頁即可看到三維效果，使用簡便。
【附圖說明】
[0023] 圖1為本發(fā)明實施例的方法流程圖；
[0024] 圖2為本發(fā)明實施例的另一種方法流程圖；
[0025] 圖3為錨點在坐標(biāo)系中的一種示意圖；
[0026] 圖4為使用本發(fā)明方法的一種顯示效果圖；
[0027] 圖5為發(fā)明實施例的裝置結(jié)構(gòu)示意圖；
[0028] 圖6為發(fā)明實施例的另一種裝置結(jié)構(gòu)示意圖。
【具體實施方式】
[0029] 下面通過【具體實施方式】結(jié)合附圖對本發(fā)明作進一步詳細說明。
[0030] 在本申請實施例中，提供一種三維網(wǎng)頁設(shè)計方法及裝置，可以將網(wǎng)頁元素設(shè)計成 帶有三維效果，提升了用戶的體驗度。
[0031] 實施例一：
[0032] 請參考圖1，圖1為本發(fā)明實施例一的方法流程圖。如圖1所示，一種三維網(wǎng)頁設(shè) 計方法，可以包括以下步驟：
[0033] 101、接收外部輸入的在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè)置的對應(yīng)的錨點。
[0034] 一個錨點可以與一個網(wǎng)頁元素對應(yīng)，也可以一個錨點與多個網(wǎng)頁元素對應(yīng)。錨點 的數(shù)量及設(shè)置位置可由開發(fā)人員按實際需要進行設(shè)置，本發(fā)明實施例對此不作限定。
[0035] 102、根據(jù)對應(yīng)的錨點在全局三維容器中的坐標(biāo)，將網(wǎng)頁元素在全局三維容器中進 行定位，得到網(wǎng)頁元素的定位坐標(biāo)及深度值。
[0036] 可以理解的是，在有視差情況下才疊加出有立體深度的圖像，因此在本申請實施