CN105912569A - 显示三维目标场景中包含的网页元素的方法和装置 - Google Patents

Abstract

本发明的实施方式提供了一种显示三维目标场景中包含的网页元素的方法，该显示三维目标场景中包含的网页元素的方法包括：确定三维目标场景中包含的网页元素的三维坐标；将所述三维坐标转换为对应的二维坐标；根据所述二维坐标，显示所述网页元素。根据本发明，在旋转三维场景时，网页元素不会随着场景的缩放、转动而变化甚至变形，提高了网页元素显示的真实感。此外，本发明的实施方式提供了一种显示三维目标场景中包含的网页元素的装置。

Description

显示三维目标场景中包含的网页元素的方法和装置

技术领域

本发明的实施方式涉及计算机领域，更具体地，本发明的实施方式涉及一种显示三维目标场景中包含的网页元素的方法和装置。

背景技术

本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

街景地图是一种实景地图服务，能够更真实直观地展示地理面貌。在街景地图中，包含有通过街景车等工具采集到的城市或其他环境的水平方向360°及垂直方向的街景图像，街景图像中包含有城市或其他环境中每个地点的真实地理面貌。街景地图服务提供商将采集回的街景图像还原到一个模型的环境，再利用开发的后台管理软件将各个孤立的单视角3D模型无缝集成在一起后，移植到虚拟三维地图，用户就可以通过浏览器进行交互式的访问。

为了便于用户识别浏览器显示的街景地图中的方向，街景地图中通常包含用于指示方向的标识，该标识为街景地图服务提供商在对采集的数据进行后期处理过程中添加至街景地图中的。

发明内容

但是，由于在街景地图中，用于指示方向的标识通常为三维(3D)模型，分别如图1a、图1b和图1c中的箭头所示。

因此，在现有技术中，当用户缩放、转动街景地图时，如图1a、图1b和图1c中所示，该标识会随着视野的变化而变化，甚至会导致该标识发生变形，从而降低了标识显示的真实感和立体层次感。

为此，非常需要一种改进的在街景地图中显示标识的方法，以使街景地图中包含的类似于标识等网页元素不会随着地图的缩放而变化甚至变形，提高其显示的真实感和立体层次感。

在本上下文中，本发明的实施方式期望提供一种显示三维目标场景中包含的网页元素的方法和装置。

在本发明实施方式的第一方面中，提供了一种显示三维目标场景中包含的网页元素的方法，包括：

确定三维目标场景中包含的网页元素的三维坐标；

将所述三维坐标转换为对应的二维坐标；

根据所述二维坐标，显示所述网页元素。

在本发明实施方式的第二方面中，提供了一种显示三维目标场景中包含的网页元素的装置，包括：

第一确定单元，用于确定三维目标场景中包含的网页元素的三维坐标；

转换单元，用于将所述三维坐标转换为对应的二维坐标；

显示单元，用于根据所述二维坐标，显示所述网页元素。

在本发明实施方式的第三方面中，提供了一种显示三维目标场景中包含的网页元素的装置，例如，可以包括存储器和处理器，其中，处理器可以用于读取存储器中的程序，执行下列过程：确定三维目标场景中包含的网页元素的三维坐标；将所述三维坐标转换为对应的二维坐标；根据所述二维坐标，显示所述网页元素。

在本发明实施方式的第四方面中，提供了一种程序产品，其包括程序代码，当所述程序代码被执行时，执行下列过程：确定三维目标场景中包含的网页元素的三维坐标；将所述三维坐标转换为对应的二维坐标；根据所述二维坐标，显示所述网页元素。

根据本发明实施方式的显示三维目标场景中包含的网页元素的方法和装置，通过将三维场景中的网页元素转化为二维进行显示，即三维场景中的网页元素为二维图像，从而在缩放、转动三维场景时，网页元素不会随着场景的缩放、转动而变化甚至变形，提高了网页元素显示的真实感，为用户带来了更好的体验。

附图说明

通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，其中：

图1a为现有技术中，第一种街景地图中标识显示示意图；

图1b为现有技术中，第二种街景地图中标识显示示意图；

图1c为现有技术中，第三种街景地图中标识显示示意图；

图2a示意性地示出了根据本发明实施方式的应用场景示意图；

图2b示意性地示出了根据本发明实施方式的浏览器包含的组件结构示意图；

图3a示意性地示出了根据本发明实施方式的显示三维目标场景中包含的网页元素的方法实施流程示意图；

图3b示意性地示出了根据本发明实施方式的显示视口示意图；

图3c示意性地示出了根据本发明实施方式的将网页元素的三维坐标转换为在显示屏幕上显示的二维坐标的流程示意图；

图3d示意性地示出了根据本发明实施方式的棱台转换为立方体的示意图；

图3e示意性地示出了根据本发明实施方式的P(x,y,z)在YOZ平面上投射为P’的示意图；

图3f示意性地示出了根据本发明实施方式的网页元素示意图；

图3g示意性地示出了根据本发明实施方式的修改网页元素的显示图形后网页元素示意图；

图3h示意性地示出了根据本发明实施方式的绑定事件后的网页元素示意图；

图4a示意性地示出了根据本发明实施方式的利用rotate函数在x轴上旋转元素的结构示意图；

图4b示意性地示出了根据本发明实施方式的利用rotate函数在y轴上旋转元素的结构示意图；

图4c示意性地示出了根据本发明实施方式的利用rotate函数在z轴上旋转元素的结构示意图；

图5示意性地示出了根据本发明另一实施例的显示三维目标场景中包含的网页元素的装置的结构示意图；

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本发明的实施方式，提出了一种显示三维目标场景中包含的网页元素的方法和装置。

在本文中，需要理解的是，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

发明概述

本发明人发现，在街景地图等三维场景中，用于指示方向的标识通常用3D模型实现，其随着三维场景的缩放、转动而变化，特别是在缩放、转动到一定程度时标识可能发生变形，降低了标识显示的真实感和立体层次感。为了解决这个问题，本发明实施例中，将三维场景中的标识等网页元素转换为二维图像进行显示，避免了其随着三维场景的缩放、转动而变化。

在介绍了本发明的基本原理之后，下面具体介绍本发明的各种非限制性实施方式。

应用场景总览

首先参考图2a，在显示三维场景时，通常基于浏览器/服务器(B/S，Browser/Server)模式实现，图2a为B/S结构示意图，客户机上只要安装一个浏览器(Browser)，如Netscape Navigator或Internet Explorer，服务器安装Oracle、Sybase、Informix或SQLServer等数据库。在这种结构下，用户界面完全通过WWW浏览器实现，一部分事务逻辑在前端实现，但是主要事务逻辑在服务器端实现。浏览器通过服务器同数据库进行数据交互。其中，浏览器的主要功能是将用户选择的Web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML(HyperText Markup Language，超文本标记语言)，也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier，统一资源标识符)来指定所请求资源的位置。

如图2b所示，浏览器的主要组件包括：

1.UI(User Interface，用户界面)，包括地址栏、后退/前进按钮、书签目录等。

2.浏览器引擎，用来查询及操作渲染引擎的接口。

3.渲染引擎，用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css(Cascading Style Sheets，层叠式样表)，并将解析后的结果显示出来。

4.网络，用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

5.UI后端，用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

6.JS(JavaScript)解析器，用来解析执行JS代码。

7.数据存储，属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据。

示例性方法

下面结合图2a-图2b的应用场景，参考图3a-图3h、图4a-图4c来描述根据本发明示例性实施方式的显示三维目标场景中包含的网页元素的方法，该网页元素例如为2D标识。需要注意的是，上述应用场景仅是为了便于理解本发明的精神和原理而示出，本发明的实施方式在此方面不受任何限制。相反，本发明的实施方式可以应用于适用的任何场景。

如图3a所示，其为本发明实施例提供的显示三维目标场景中包含的网页元素的方法实施流程示意图，可以包括以下步骤：

S31、确定三维目标场景中包含的网页元素的三维坐标。

三维场景是一个3D透视空间，里面的物体通过3D建模形成，具有透视效果，从而产生3D效果。

网页元素的三维坐标表示该网页元素在三维目标场景中的固定位置，其具体位置可以由用户根据实际需求设定，例如，对于用于指示方向等的标识通常设置在三维目标场景的原点位置，三维目标场景的原点位置一般为三维目标场景的中心点。

S32、将确定出的三维坐标转换为对应的二维坐标。

本步骤中即将确定出的网页元素的三维坐标转换为在浏览器相应显示屏幕上的二维坐标。

S33、根据转换得到的二维坐标，显示该网页元素。

浏览器根据步骤S32中映射得到的该网页元素在显示屏幕上的二维坐标在显示屏幕的相应位置上显示该网页元素。

浏览器在显示三维目标场景过程中，三维目标场景会根据用户的选择(即用户鼠标操作)而转动，即浏览器页面显示的目标场景会发生变化，这在三维空间里实际上是因为camera指向的方向发生了变化，即观察三维场景的角度发生变化，导致显示视口(FOV，Field of View)不同。

为了更好的理解本发明实施例，以下结合图3b对本发明进行介绍。

针对任一三维场景，根据拍摄相机(图3b中的camera)的拍摄位置和拍摄角度的不同得到的三维目标场景(即浏览器显示的三维目标场景)也不同。

具体的，当拍摄相机的拍摄角度发生变化时，导致显示视口(FOV，Field of View)不同，即使得拍摄相机的成像范围发生了变化。

如图3b所示，camera(拍摄相机)显示视口包括水平视口(Horizontal FOV)和垂直视口(Vertical FOV)。只有在显示视口内的三维场景可以呈现在浏览器对应的显示屏幕上。显示视口由近平面(Near)和远平面(Far)组成，位于近平面和远平面之间的三维场景可以呈现在与浏览器相应的显示屏上。因此，拍摄相机的拍摄位置和拍摄角度的不同，显示屏幕呈现的三维目标场景图像也不同，这是由拍摄相机的成像范围不同而引起的。

为了在二维的显示屏幕上正确显示三维场景中的具有固定三维坐标的网页元素，则还需要将网页元素的三维坐标转换为在二维显示屏幕上显示的二维坐标，以下详细介绍之。

本发明实施例中可以按照图3c所示的流程将网页元素的三维坐标转换为在显示屏幕上显示的二维坐标：

S321、确定透视投影矩阵。

根据图3b可知，拍摄相机的显示视口为一个棱台(两个截面分别为近平面和远平面)，其与拍摄相机形成一个棱锥，称之为视锥体。由此可知，离拍摄相机距离近的物体成像后较大，而离拍摄相机较远的物体成像后较小。投影的目的就是将上述的棱台转换为立方体，转换后，棱台的前截面(图3b中的近平面)的右上角点变为立方体的前平面的中心，如图3d所示，以形成最终的立方体。由图3d可知，这个变换过程可以将棱台较小的部分变大，较大的部分缩小。这就是投影会产生近大远小的效果的原因。变化后的x坐标范围为[-1,1]，y坐标范围为[-1,1]，z坐标范围为[0,1](部分模型中略有不同，z坐标范围也可能为[-1,1])。

投影过程可以分为两部分，一部分为将显示视口内任一点P(x,y,z)投射到近平面的过程，另一部分为由近平面缩放的过程。

假设显示视口内任一点P(x,y,z)在近平面上的投射为P’(x',y',z')，而P’经过缩放后的最终坐标假设为P”(x”,y”,z”)，如果假设投影矩阵为M，其中，M为四维矩阵，而网页元素的三维坐标为三维，为了准确计算得到M，需要将三维坐标转换为四维坐标，转换后的四维坐标称为原三维坐标的齐次坐标，其中齐次坐标就是将一个原本是n维向量用一个n+1维向量来表示，本发明实施例中，可以将三维坐标(x,y,z)转换为四维坐标(x,y,z,1)，相应的，对于P”也需要将其转换为四维坐标，假设转换后的四维坐标为(x”,y”,z”,w)。例如，二维点(x,y)的齐次坐标表示为(hx,hy,h)，齐次坐标(8,4,2)、(4,2,1)表示的都是二维点(4,2)，该转换并不会改变三维坐标的原值。

根据矩阵成像可知，如下等式PM＝P”成立，即：

$\[x,y,z,1\]\left[\begin{array}{cccc}{a}_{00}& a_{01}& a_{02}& a_{03}\\ a_{10}& a_{11}& a_{12}& a_{13}\\ a_{20}& a_{21}& a_{22}& a_{23}\\ a_{30}& a_{31}& a_{32}& a_{33}\end{array}\right]=\[x^{\′\′},y^{\′\′},z^{\′\′},w\].$

基于此，以下首先对P(x,y,z)在YOZ平面上投射为P’(x',y',z')的过程进行说明，假设视椎体在PO与Z轴方向的夹角为θ。

如图3e所示，假设P点在Z轴上投射为Q，P’点在Z轴上的投射为Q’。

由图3e可知，三角形OP’Q’与三角形OPQ相似，于是如下等式成立：

即即

同理，根据对P(x,y,z)在XOZ平面上的投影可得z'＝n，其具体计算过程与上述P(x,y,z)在YOZ平面上的投影过程类似，这里不再赘述。

接下来再对P’缩放的过程进行说明。假设投影平面的高度为H，由于转换后的立方体高度为2。因此，即又因为所以假设投影平面的纵横比为Aspect，由此可得

而对于z”来说，假设由于在投影映射之前，z的范围为[n,f]，其中，n为近平面到原点的距离，f为远平面到原点的距离。而投影映射投影后，z”的范围为[-1,1]，由此可得如下方程组：

解之可得：由此可知，

综上可知

将(x”,y”,z”)代入上述的矩阵乘法等式中可得：

$\[x,y,z,1\]\left[\begin{array}{cccc}{a}_{00}& a_{01}& a_{02}& a_{03}\\ a_{10}& a_{11}& a_{12}& a_{13}\\ a_{20}& a_{21}& a_{22}& a_{23}\\ a_{30}& a_{31}& a_{32}& a_{33}\end{array}\right]=\[\frac{P_y}{P_z}\cot \mathrm{\θ}\frac{1}{Aspect},\frac{P_y}{P_z}\cot \mathrm{\θ},\frac{2fn}{n-f}\frac{1}{P_z}+\frac{-n-f}{n-f},w\]$

由上式可见，x”,y”,z”都除以了P_z，于是对于上式再乘以P_z(这并不改变齐次坐标的大小)可得：

$\[x,y,z,1\]\left[\begin{array}{cccc}{a}_{00}& a_{01}& a_{02}& a_{03}\\ a_{10}& a_{11}& a_{12}& a_{13}\\ a_{20}& a_{21}& a_{22}& a_{23}\\ a_{30}& a_{31}& a_{32}& a_{33}\end{array}\right]=\[P_x\cot \mathrm{\θ}\frac{1}{Aspect},P_y\cot \mathrm{\θ},\frac{2fn}{n-f}+\frac{-n-f}{n-f}{P}_z,{\mathrm{wP}}_z\].$

需要说明的是，上述的x即为P_x(P点在X轴上的坐标)，y即为P_y(P点在Y轴上的坐标)，z即为P_z(P点在Z轴上的坐标)。解上述矩阵的每一列可得：

由此可得投影矩阵投影矩阵M的其余元素可以为0，即

S322、进行透视分割。

由于实际计算获得的坐标值为即进行齐次坐标转换时，将坐标(x,y,z,1)转换为齐次坐标(x"p_z,y"p_z,z"p_z,p_z)，因此，得到的是[-P_z,P_z]上的齐次切割空间序列，需要将其单位化，将每个坐标除以w单位的值，即P_z，得到在[-1,1]上的序列。

S323、视图转换。

由于显示屏幕为二维的，三维坐标中的z为深度坐标，因此，在屏幕上无需显示z坐标，而经过步骤S322处理后得到的是以屏幕中心为原点的[-1,1]范围的坐标vector，基于此，进行如下的变换可以得到以屏幕左上角为原点，屏幕宽高范围的点的坐标值： 其中，为显示屏幕宽度，window/innerHeigh为显示屏幕高度。

较佳的，由于只有位于显示视口内的三维场景和网页元素会出现在屏幕，因此，具体实施时，在执行步骤S32之前，可以先根据步骤S31获取的网页元素的三维坐标判断该网页元素是否位于显示视口内，如果确定该网页元素位于显示视口内时，再执行步骤S32，否则，可以不进行处理，即如果该网页元素不位于显示视口内，则浏览器可以不进行坐标的转换，这样，节约浏览器相应的处理资源。

当三维目标场景中包含的网页元素位于显示视口内时，浏览器可以根据步骤S32得到的该网页元素在相应显示屏幕上的二维坐标，进而，在确定出的显示位置上进行渲染以显示该网页元素。较佳的，浏览器可以利用CSS 3D函数在确定出的显示位置上进行渲染以显示该网页元素。随着三维目标场景的转动，其中心点的坐标是变化的，因此，网页元素的三维坐标也是变化的，由此，对其进行转换为在显示屏幕上显示的二维坐标也是变化的。在本发明中，浏览器将获得实时的网页元素的二维坐标，且利用CSS 3D变换根据获得的二维坐标将其渲染显示在屏幕上，这样，可以获得网页元素随三维目标场景的变化而运动的效果，增加了网页元素显示的真实感。

另外，本发明实施例中，在三维场景中显示的网页元素可以提供为网页中常见的元素，例如可以提供为Div元素，Div元素为网页中的块级元素，包含一整块内容，可以进行语义化操作，也可以进行绑定事件，修改网页元素的显示图形等操作。如图3f所示，为三维目标场景中包含的网页元素原始示意图(图3f中中心有“+”的圆形所示部分为本发明实施例中在三维场景中设置的网页元素)，而修改该网页元素的显示图形后网页元素示意图如图3g所示(由中心有“+”的圆形修改为指向左侧的单箭头)。如果为该网页元素添加绑定事件后，在检测到触发事件，例如用户点击该网页元素，则弹出图3h所示的消息框。

为了使显示的网页元素更具立体层次感，本发明实施例中，可以为网页元素添加一定的显示角度。较佳的，具体实施时，可以利用CSS 3D变换中的rotate函数为网页元素添加预设的显示角度，rotate函数可以在特定轴向上旋转网页元素，如图4a-图4c所示，分别为rotate函数在x轴、y轴和z轴上旋转网页元素的操作结果示意图。这样，步骤S33中，在浏览器显示该网页元素时，可以显示添加了显示角度的网页元素。本发明实施例中，可以利用rotate函数在x轴或者y轴上旋转三维目标场景中包含的网页元素，使其在视觉效果上更具立体层次感。

本发明实施例提供的显示三维目标场景中包含的网页元素的方法中，通过将三维目标场景中包含的网页元素转换为二维图像进行显示，避免网页元素随着三维目标场景的缩放而变化甚至变形，提高了网页元素显示的真实感，另外，还可以为该网页元素添加预设的显示角度，使其更具立体层次感。另外，根据本发明实施例，三维目标场景中包含的网页元素可以为Div元素，因此，可以为该网页元素绑定事件，或者更换背景图片等操作，使得对于该网页元素的相关操作更加便利。

示例性设备

在介绍了本发明示例性实施方式的方法之后，接下来，参考图5对本发明示例性实施方式的、显示三维目标场景中包含的网页元素的装置进行描述。

如图5所示，本发明实施例提供的显示三维目标场景中包含的网页元素的装置，可以包括：

第一确定单元51，用于确定三维目标场景中包含的网页元素的三维坐标；

转换单元52，用于将第一确定单元51确定出的三维坐标转换为对应的二维坐标；

显示单元53，用于根据所述二维坐标，显示所述网页元素。

具体实施时，本发明实施例提供的显示三维目标场景中包含的网页元素的装置，还可以包括：

第二确定单元54，用于在所述转换单元52将所述三维坐标转换为对应的二维坐标之前，根据所述网页元素的三维坐标，确定所述网页元素位于显示视口内。

较佳的，所述显示单元53，可以包括：

渲染子单元531，用于在所述二维坐标上进行渲染以显示所述网页元素。

其中，所述渲染子单元531，具体用于利用CSS 3D变换函数在所述二维坐标上进行渲染以显示所述网页元素。

具体实施时，本发明实施例提供的显示三维目标场景中包含的网页元素的装置中，所述渲染子单元531还可以利用CSS 3D变换函数为所述网页元素添加预设的显示角度。

在介绍了上面的本发明示例性实施方式的方法和装置之后，接下来，介绍根据本发明的又一示例性实施方式的显示三维目标场景中包含的网页元素的装置。

在一些可能的实施方式中，根据本发明的显示三维目标场景中包含的网页元素的装置可以包括至少一个处理单元、以及至少一个存储单元。其中，所述存储单元存储有程序代码，当所述程序代码被所述处理单元执行时，使得所述处理单元执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的显示三维目标场景中包含的网页元素的方法中的各种步骤。例如，所述处理单元可以执行如图3a中所示的步骤S31，确定三维目标场景中包含的网页元素的三维坐标，步骤S32，将确定出的三维坐标转换为对应的二维坐标，以及步骤S33，根据转换得到的二维坐标，显示该网页元素。

应当注意，尽管在上文详细描述中提及了装置的若干单元或子单元，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元的特征和功能可以在一个单元中具体化。反之，上文描述的一个单元的特征和功能可以进一步划分为由多个单元来具体化。

此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

虽然已经参考若干具体实施方式描述了本发明的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。

Claims (10)

1.一种显示三维目标场景中包含的网页元素的方法，包括：

确定三维目标场景中包含的网页元素的三维坐标；

将所述三维坐标转换为对应的二维坐标；

根据所述二维坐标，显示所述网页元素。

2.根据权利要求1所述的方法，在将所述三维坐标转换为对应的二维坐标之前，还包括：

根据所述网页元素的三维坐标，确定所述网页元素位于显示视口内。

3.根据权利要求1所述的方法，其中，根据所述二维坐标，显示所述网页元素，具体包括：

在所述二维坐标处进行渲染以显示所述网页元素。

4.根据权利要求3所述的方法，其中，在所述二维坐标处进行渲染以显示所述网页元素，具体包括：

利用层叠样式表三维CSS 3D变换函数在所述二维坐标处进行渲染以显示所述网页元素。

5.根据权利要求4所述的方法，还包括：

利用CSS 3D变换函数为所述网页元素添加预设的显示角度。

6.一种显示三维目标场景中包含的网页元素的装置，包括：

第一确定单元，用于确定三维目标场景中包含的网页元素的三维坐标；

转换单元，用于将所述三维坐标转换为对应的二维坐标；

显示单元，用于根据所述二维坐标，显示所述网页元素。

7.根据权利要求6所述的装置，还包括：

第二确定单元，用于在所述转换单元将所述三维坐标转换为对应的二维坐标之前，根据所述网页元素的三维坐标，确定所述网页元素位于显示视口内。

8.根据权利要求6所述的装置，所述显示单元，包括：

渲染子单元，用于在所述二维坐标处进行渲染以显示所述网页元素。

9.根据权利要求8所述的装置，

所述渲染子单元，具体用于利用CSS 3D变换函数在所述二维坐标处进行渲染以显示所述网页元素。

10.根据权利要求9所述的装置，其中所述渲染子单元还用于利用CSS 3D变换函数为所述网页元素添加预设的显示角度。