例中，預(yù)先根據(jù)對應(yīng)的錨點，計算出網(wǎng)頁元素的水平視差值及縮放比例，后續(xù)根據(jù)水平視差 值及縮放比例將元素繪制，即可達(dá)到三維的效果。水平視差值可以使網(wǎng)頁元素產(chǎn)生立體效 果，縮放比例可以產(chǎn)生"近大遠(yuǎn)小"的透視效果。
[0037] 具體的，步驟102可以根據(jù)對應(yīng)的錨點在全局三維容器中的坐標(biāo)結(jié)合預(yù)設(shè)的三維 場景參數(shù)，計算出網(wǎng)頁元素的水平視差值P、縮放比例ratio、水平位置Xa以及垂直位置y a， 其中，
[0038]
[0039] 其中，e為觀看者兩眼瞳距，而V為觀看者與屏幕的距離，X，y，z分別為錨點在全 局三維容器的坐標(biāo)系中的橫向坐標(biāo)、垂直坐標(biāo)以及縱向坐標(biāo)。
[0040] 可以理解的是，利用錨點的坐標(biāo)（X，y，Z)可以將網(wǎng)頁元素進(jìn)行定位，即計算得到 網(wǎng)頁元素的水平位置Xa及垂直位置ya。再通過錨點的縱向坐標(biāo)z，計算水平視差p以及縮 放比例ratio(即深度值）。在繪制網(wǎng)頁元素時，將（xa，ya)作為左視圖位置，（x a+p，ya)作 為右視圖位置，根據(jù)縮放比例ratio,在（xa，ya)以及（xa+p，y a)處分別對網(wǎng)頁元素進(jìn)行縮放 處理，即可以得到三維效果的網(wǎng)頁元素。
[0041] 103、分別在左眼視圖以及右眼視圖繪制網(wǎng)頁元素。
[0042] 根據(jù)水平視差值以及縮放比例，分別在左眼視圖以及右眼視圖繪制網(wǎng)頁元素。
[0043] 在具體繪制時，可以添加屬性參數(shù)parallax。參數(shù)parallax的說明如下表：
[0044]
[0045] 對屬性參數(shù)賦值，parallax = p。
[0046] 確定將（xa，ya)作為左視圖位置，（xa+p，y a)作為右視圖位置。
[0047] 根據(jù)縮放比例ratio,在（xa，ya)以及（x a+p，ya)處對網(wǎng)頁元素進(jìn)行縮放處理。
[0048] 值得指出的是，本實施例步驟利用添加屬性參數(shù)parallax，再通過屬性參數(shù) parallax對網(wǎng)頁元素繪制的方法，是通過改動瀏覽器內(nèi)核來實現(xiàn)的。本實施例方法相對于 現(xiàn)有的基于HTML、CSS、JavaScript標(biāo)準(zhǔn)擴展的方法，對瀏覽器內(nèi)核改動很少，只需要為CSS 新增一個parallax屬性，而且該屬性在瀏覽器內(nèi)核較容易實現(xiàn)。
[0049] 本申請?zhí)峁┑娜S網(wǎng)頁設(shè)計方法，在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè)置對應(yīng) 的錨點，根據(jù)對應(yīng)的錨點的坐標(biāo)，將網(wǎng)頁元素在全局三維容器中進(jìn)行定位，得到網(wǎng)頁元素的 定位坐標(biāo)及深度值，根據(jù)定位坐標(biāo)，分別在左眼視圖以及右眼視圖繪制所述網(wǎng)頁元素，可以 將網(wǎng)頁元素設(shè)計成帶有三維效果，因此觀察者或者網(wǎng)頁使用者在瀏覽網(wǎng)頁時，即可看到三 維的網(wǎng)頁內(nèi)容，提升了用戶的體驗度。并且網(wǎng)頁圖像上元素的需變換位置時，僅需要利用新 的錨點對元素進(jìn)行定位，因此減少了冗佘計算，減少對瀏覽器內(nèi)核的改動。本申請方法適用 于任何網(wǎng)頁，適用范圍大，并且本申請形成的三維界面不需要用戶進(jìn)行啟動，設(shè)計后打開網(wǎng) 頁即可看到三維效果，使用簡便。
[0050] 實施例二：
[0051] 請參考圖2,圖2為本發(fā)明實施例二的方法流程圖。如圖2所示，一種三維網(wǎng)頁設(shè) 計方法，可以包括以下步驟：
[0052] 201、指定全局三維容器。
[0053] HTML(應(yīng)用超文本標(biāo)記語言）里的每個元素都是相對于父容器進(jìn)行定位的，本實 施例中首先指定一個網(wǎng)頁元素，將該元素作為所有網(wǎng)頁元素的父容器，即指定一個全局三 維容器，所有網(wǎng)頁元素存在于該元素的坐標(biāo)空間內(nèi)。
[0054] 202、設(shè)置三維場景參數(shù)。
[0055] 三維場景參數(shù)至少包括：觀看者兩眼瞳距以及觀看者與屏幕的距離。
[0056] 可以理解的是，三維場景參數(shù)還可以包括：全局三維容器的坐標(biāo)空間。優(yōu)選的，還 可以在全局三維容器的坐標(biāo)空間的基礎(chǔ)上預(yù)先定義三維空間坐標(biāo)原點位置、近剪裁平面、 遠(yuǎn)剪裁平面。
[0057] 本申請實施例中，所述全局三維容器的坐標(biāo)系設(shè)置為：橫向坐標(biāo)軸為平行于屏幕 的水平坐標(biāo)軸，垂直坐標(biāo)軸為平行于屏幕的豎直坐標(biāo)軸，縱向坐標(biāo)軸為垂直于屏幕的坐標(biāo) 軸，縱向坐標(biāo)軸以指向靠近觀察者方向為正，指向遠(yuǎn)離觀察者方向為負(fù)。所有的網(wǎng)頁元素直 接存在全局三維容器的坐標(biāo)空間下。
[0058] 坐標(biāo)系與CSS33D Transforms標(biāo)準(zhǔn)一致，即，水平向右為橫向坐標(biāo)軸（x軸）正方 向、垂直向下為垂直坐標(biāo)軸（y軸）正方向、縱向坐標(biāo)軸（z軸）正方向由屏幕指向用戶，且 坐標(biāo)原點默認(rèn)在3D容器中心。深度值z為正的元素具有凸出屏幕的立體效果，z為負(fù)則感 知為入屏，z為零則處于屏幕平面上。
[0059] 近剪裁平面和遠(yuǎn)剪裁平面平行于xy平面，僅在這兩個平面內(nèi)的元素會被設(shè)置為 可見，即，深度值Z小于近剪裁平面或者大于遠(yuǎn)剪裁平面的網(wǎng)頁元素的visibility屬性直 接被設(shè)置為false (不可見）。
[0060] HTML里，元素一般都被顯示為一個矩形，在確定了全局三維容器的坐標(biāo)空間后，在 設(shè)置網(wǎng)頁元素的錨點前，可以先設(shè)定網(wǎng)頁元素的長度與寬度。
[0061] 203、接收外部輸入的在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè)置的對應(yīng)的錨點。
[0062] 204、根據(jù)錨點在全局三維容器中的坐標(biāo)結(jié)合所述三維場景參數(shù)，計算出網(wǎng)頁元素 的水平視差值、縮放比例、水平位置以及垂直位置。
[0063] 其中，本實施例以p表示水平視差值，以ratio縮放比例。計算公式如下：
[0064] 其中，e為觀看者兩眼瞳距，而V為觀看者與屏幕的距 離，Z為與網(wǎng)頁元素對應(yīng)的錨點在全局三維容器的坐標(biāo)系中的縱向坐標(biāo)。
[0065] 網(wǎng)頁元素可以是HTML代碼片段，也可以是用〈iframe〉標(biāo)簽包含的文檔，請參閱步 驟202,網(wǎng)頁元素具有初始矩形尺寸信息，而沒有三維空間的定位信息。在設(shè)置網(wǎng)頁元素的 參數(shù)時，網(wǎng)頁元素的參數(shù)"postion"屬性被設(shè)置為"absolute"，即采用絕對定位的方式來 定位網(wǎng)頁元素，而后與錨點關(guān)聯(lián)后將相對于全局三維容器進(jìn)行定位。
[0066] 假設(shè)錨點的坐標(biāo)為（200, 200,100)，則錨點的在父容器（xy平面）上的坐標(biāo)（X，y) 為（200, 200)。根據(jù)坐標(biāo)值（200, 200)和網(wǎng)頁元素的尺寸對left屬性和top屬性進(jìn)行賦值 就可以將網(wǎng)頁元素在屏幕所在的二維平面上的位置定位出來。具體地，以Xa表示網(wǎng)頁元素 的水平位置，ya表示網(wǎng)頁元素的垂直位置，W表示元素寬，h表示元素高，X a= ratioXX，y a=四1:;[0\7，將1￡11/2賦值給16；^屬性，將7￡1-11/2賦值給1：(^屬性。1，7分別為銷點在全 局三維容器的坐標(biāo)系中的橫向坐標(biāo)、垂直坐標(biāo)。
[0067] 205a、確定將（xa，ya)作為左視圖位置，（xa+p，y a)作為右視圖位置。
[0068] p表示水平視差值。
[0069] 205b、根據(jù)縮放比例ratio,在（xa，ya)以及（x a+p，ya)處對網(wǎng)頁元素進(jìn)行縮放處 理。
[0070] 步驟205a_205b請參閱實施例一中步驟103的介紹，在此不再贅述。
[0071] 請參閱圖3和圖4,圖3示出了在三維全局容器中的坐標(biāo)系中的三個錨點。圖4為 使用本發(fā)明方法三個錨點對網(wǎng)頁元素定位后在顯示屏上的顯示效果圖。3個示例錨點與3 個<img>標(biāo)簽（網(wǎng)頁編程語言HTML里用于顯示圖像的標(biāo)簽）相關(guān)聯(lián)后，在偏振顯示屏上的 顯示效果。在該范例中，3個圖片相互交換位置時僅需要重新關(guān)聯(lián)錨點與<img>標(biāo)簽，利用 新的錨點對元素進(jìn)行定位，而無需重新建立新的錨點，因此減少了冗佘計算。
[0072] 實施例三：
[0073] 相應(yīng)的，本申請還提供一種三維網(wǎng)頁設(shè)計裝置，請參考圖5,圖5為本發(fā)明實施的 裝置結(jié)構(gòu)示意圖。如圖5所示，三維網(wǎng)頁設(shè)計裝置可以包括：
[0074] 接收單元30,用于接收外部輸入的在預(yù)設(shè)的全局三維容器中為網(wǎng)頁元素設(shè)置的對 應(yīng)的錨點。
[0075] 定位單元31，用于