CN104915373A - 一种三维网页设计方法及装置 - Google Patents

Abstract

本申请提供的三维网页设计方法及装置，在预设的全局三维容器中为网页元素设置对应的锚点，根据对应的锚点的坐标，将网页元素在全局三维容器中进行定位，得到网页元素的定位坐标及深度值，根据定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素，可以将网页元素设计成带有三维效果，因此观察者或者网页使用者在浏览网页时，即可看到三维的网页内容，提升了用户的体验度。并且网页图像上元素的需变换位置时，可以重复利用已有的锚点，因此减少了冗余计算，三维效果也仅需少量的浏览器内核变动。本申请方法适用于任何网页，适用范围大，并且本申请形成的三维界面不需要用户进行启动，设计后打开网页即可看到三维效果，使用简便。

Description

一种三维网页设计方法及装置

技术领域

本申请涉及一种三维网页设计方法及装置。

背景技术

人类在观看空间里的物体时，由于两眼在水平方向上的位置不同，左右眼看到的两个视图略有不同，而人的大脑能够通过这两个视图的视差感知到一个具有景深和层次感的立体景象。现有的立体三维浏览器便是基于这种原理，通过为立体网页渲染具有视差的左右眼视图，使浏览器用户感知到一个具有真实立体感的三维网页界面。

现有的立体三维网页的制作中，一般有以下几种：

1、基于HTML5Canvas的图形绘制方法。由于传统网页界面设计采用的是围绕着HTML DOM排版、CSS对DOM节点进行外观描述的方式，而不是图形学绘制的方式，因此这种绘制方法仅适用于为网页部件生成游戏、动画等三维仿真内容，而不适合网页界面设计。

2、基于浏览器插件和OPEN GL或O3D等三维编程接口，根据三维操作指令生成三维内容的方法，但是这种方法并非由开发人员来设计三维界面，而是页面加载后由用户通过按钮或鼠标右键等方式启动三维指令生成三维内容。打开后还需用户操作才能生成三维画面，过程较繁琐，体验度不高。

3、基于HTML、CSS、JavaScript标准扩展的方法，符合传统网页界面设计的习惯，但该方法的扩展导致浏览器内核较大的改动。

因此，现有技术中的三维网页的设计方法，对浏览器内核改动较大，并且大多需要用户在使用时进行后续启动等操作，带来使用上的不便。

发明内容

本申请提供一种三维网页设计方法及装置，可以将网页元素设计成带有三维效果，提升了用户的体验度。

根据本申请的第一方面，本申请提供一种三维网页设计方法，包括：接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；

根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值；根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。

可选的，所述在预设的全局三维容器中为网页元素设置对应的锚点之前包括：指定全局三维容器；设置三维场景参数，所述三维场景参数至少包括：观 看者两眼瞳距、观看者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。

可选的，所述根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值包括：根据所述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参数，计算出所述网页元素的水平视差值p、缩放比例ratio、水平位置x_a以及垂直位置y_a，其中，

x_a＝ratio×x，y_a＝ratio×y，其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，z分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。

可选的，所述根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素包括：确定将(x_a，y_a)作为左视图位置，(x_a+p，y_a)作为右视图位置；根据所述缩放比例ratio，在(x_a，y_a)以及(x_a+p，y_a)处对所述网页元素进行缩放处理。

可选的，所述接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点之前包括：接收在预设的全局三维容器中设定的所述网页元素的长度与宽度。

根据本申请的第二方面，提供一种三维网页设计装置，包括：接收单元，用于接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；定位单元，用于根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值；绘制单元，用于根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。

可选的，还包括：指定单元，用于指定全局三维容器；第二设置单元，用于设置三维场景参数，所述三维场景参数至少包括：观看者两眼瞳距、观看者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。

可选的，所述定位单元具体用于：根据所述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参数，计算出所述网页元素的水平视差值p、缩放 比例ratio、水平位置x_a以及垂直位置y_a，其中，

$p=\frac{\mathrm{ez}}{v-z},\mathrm{ratio}=\frac{v}{v-z},$ x_a＝ratio×x，y_a＝ratio×y

其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，z分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。

可选的，所述绘制单元包括：坐标确定模块，用于将(x_a，y_a)作为左视图位置，(x_a+p，y_a)作为右视图位置；缩放处理模块，用于根据所述缩放比例ratio，在(x_a，y_a)以及(x_a+p，y_a)处对所述网页元素进行缩放处理。

可选的，还包括第二接收单元，用于接收在预设的全局三维容器中设定的所述网页元素的长度与宽度。

本申请提供的三维网页设计方法及装置，在预设的全局三维容器中为网页元素设置对应的锚点，根据对应的锚点的坐标，将网页元素在全局三维容器中进行定位，得到网页元素的定位坐标及深度值，根据定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素，可以将网页元素设计成带有三维效果，因此观察者或者网页使用者在浏览网页时，即可看到三维的网页内容，提升了用户的体验度。并且网页图像上元素的需变换位置时，仅需要利用新的锚点对元素进行定位，因此减少了冗佘计算，减少对浏览器内核的改动。本申请方法适用于任何网页，适用范围大，并且本申请形成的三维界面不需要用户进行启动，设计后打开网页即可看到三维效果，使用简便。

附图说明

图1为本发明实施例的方法流程图；

图2为本发明实施例的另一种方法流程图；

图3为锚点在坐标系中的一种示意图；

图4为使用本发明方法的一种显示效果图；

图5为发明实施例的装置结构示意图；

图6为发明实施例的另一种装置结构示意图。

具体实施方式

下面通过具体实施方式结合附图对本发明作进一步详细说明。

在本申请实施例中，提供一种三维网页设计方法及装置，可以将网页元素设计成带有三维效果，提升了用户的体验度。

实施例一： 

请参考图1，图1为本发明实施例一的方法流程图。如图1所示，一种三维 网页设计方法，可以包括以下步骤：

101、接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点。

一个锚点可以与一个网页元素对应，也可以一个锚点与多个网页元素对应。锚点的数量及设置位置可由开发人员按实际需要进行设置，本发明实施例对此不作限定。

102、根据对应的锚点在全局三维容器中的坐标，将网页元素在全局三维容器中进行定位，得到网页元素的定位坐标及深度值。

可以理解的是，在有视差情况下才叠加出有立体深度的图像，因此在本申请实施例中，预先根据对应的锚点，计算出网页元素的水平视差值及缩放比例，后续根据水平视差值及缩放比例将元素绘制，即可达到三维的效果。水平视差值可以使网页元素产生立体效果，缩放比例可以产生“近大远小”的透视效果。

具体的，步骤102可以根据对应的锚点在全局三维容器中的坐标结合预设的三维场景参数，计算出网页元素的水平视差值p、缩放比例ratio、水平位置x_a以及垂直位置y_a，其中，

$p=\frac{\mathrm{ez}}{v-z},\mathrm{ratio}=\frac{v}{v-z},$ x_a＝ratio×x，y_a＝ratio×y

其中，e为观看者两眼瞳距，而v为观看者与屏幕的距离，x，y，z分别为锚点在全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。

可以理解的是，利用锚点的坐标(x，y，z)可以将网页元素进行定位，即计算得到网页元素的水平位置x_a及垂直位置y_a。再通过锚点的纵向坐标z，计算水平视差p以及缩放比例ratio(即深度值)。在绘制网页元素时，将(x_a，y_a)作为左视图位置，(x_a+p，y_a)作为右视图位置，根据缩放比例ratio，在(x_a，y_a)以及(x_a+p，y_a)处分别对网页元素进行缩放处理，即可以得到三维效果的网页元素。

103、分别在左眼视图以及右眼视图绘制网页元素。

根据水平视差值以及缩放比例，分别在左眼视图以及右眼视图绘制网页元素。

在具体绘制时，可以添加属性参数parallax。参数parallax的说明如下表：

属性	值	说明
			parallax	number	为元素指定水平视差值，缺省为0

对属性参数赋值，parallax＝p。

确定将(x_a，y_a)作为左视图位置，(x_a+p，y_a)作为右视图位置。

根据缩放比例ratio，在(x_a，y_a)以及(x_a+p，y_a)处对网页元素进行缩放处理。

值得指出的是，本实施例步骤利用添加属性参数parallax，再通过属性参数parallax对网页元素绘制的方法，是通过改动浏览器内核来实现的。本实施例方法相对于现有的基于HTML、CSS、JavaScript标准扩展的方法，对浏览器内核改动很少，只需要为CSS新增一个parallax属性，而且该属性在浏览器内核较容易实现。

本申请提供的三维网页设计方法，在预设的全局三维容器中为网页元素设置对应的锚点，根据对应的锚点的坐标，将网页元素在全局三维容器中进行定位，得到网页元素的定位坐标及深度值，根据定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素，可以将网页元素设计成带有三维效果，因此观察者或者网页使用者在浏览网页时，即可看到三维的网页内容，提升了用户的体验度。并且网页图像上元素的需变换位置时，仅需要利用新的锚点对元素进行定位，因此减少了冗佘计算，减少对浏览器内核的改动。本申请方法适用于任何网页，适用范围大，并且本申请形成的三维界面不需要用户进行启动，设计后打开网页即可看到三维效果，使用简便。

实施例二： 

请参考图2，图2为本发明实施例二的方法流程图。如图2所示，一种三维网页设计方法，可以包括以下步骤：

201、指定全局三维容器。

HTML(应用超文本标记语言)里的每个元素都是相对于父容器进行定位的，本实施例中首先指定一个网页元素，将该元素作为所有网页元素的父容器，即指定一个全局三维容器，所有网页元素存在于该元素的坐标空间内。

202、设置三维场景参数。

三维场景参数至少包括：观看者两眼瞳距以及观看者与屏幕的距离。

可以理解的是，三维场景参数还可以包括：全局三维容器的坐标空间。优选的，还可以在全局三维容器的坐标空间的基础上预先定义三维空间坐标原点位置、近剪裁平面、远剪裁平面。

本申请实施例中，所述全局三维容器的坐标系设置为：横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。所有的网页元素直接存在全局三维容器的坐标空间下。

坐标系与CSS33D Transforms标准一致，即，水平向右为横向坐标轴(x轴)正方向、垂直向下为垂直坐标轴(y轴)正方向、纵向坐标轴(z轴)正方向由屏幕指向用户，且坐标原点默认在3D容器中心。深度值z为正的元素具有凸出屏幕的立体效果，z为负则感知为入屏，z为零则处于屏幕平面上。

近剪裁平面和远剪裁平面平行于xy平面，仅在这两个平面内的元素会被设置为可见，即，深度值Z小于近剪裁平面或者大于远剪裁平面的网页元素的visibility属性直接被设置为false(不可见)。

HTML里，元素一般都被显示为一个矩形，在确定了全局三维容器的坐标空间后，在设置网页元素的锚点前，可以先设定网页元素的长度与宽度。

203、接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点。

204、根据锚点在全局三维容器中的坐标结合所述三维场景参数，计算出网页元素的水平视差值、缩放比例、水平位置以及垂直位置。

其中，本实施例以p表示水平视差值，以ratio缩放比例。计算公式如下：

其中，e为观看者两眼瞳距，而v为观看者与屏幕的距离，z为与网页元素对应的锚点在全局三维容器的坐标系中的纵向坐标。

网页元素可以是HTML代码片段，也可以是用<iframe>标签包含的文档，请参阅步骤202，网页元素具有初始矩形尺寸信息，而没有三维空间的定位信息。在设置网页元素的参数时，网页元素的参数“postion”属性被设置为“absolute”，即采用绝对定位的方式来定位网页元素，而后与锚点关联后将相对于全局三维容器进行定位。

假设锚点的坐标为(200，200，100)，则锚点的在父容器(xy平面)上的坐标(x，y)为(200，200)。根据坐标值(200，200)和网页元素的尺寸对left属性和top属性进行赋值就可以将网页元素在屏幕所在的二维平面上的位置定位出来。具体地，以x_a表示网页元素的水平位置，y_a表示网页元素的垂直位置，w表示元素宽，h表示元素高，x_a＝ratio×x，y_a＝ratio×y，将x_a-w/2赋值给left属性，将y_a-h/2赋值给top属性。x，y分别为锚点在全局三维容器的坐标系中的横向坐标、垂直坐标。

205a、确定将(x_a，y_a)作为左视图位置，(x_a+p，y_a)作为右视图位置。

p表示水平视差值。

205b、根据缩放比例ratio，在(x_a，y_a)以及(x_a+p，y_a)处对网页元素进行缩放处理。

步骤205a-205b请参阅实施例一中步骤103的介绍，在此不再赘述。

请参阅图3和图4，图3示出了在三维全局容器中的坐标系中的三个锚点。图4为使用本发明方法三个锚点对网页元素定位后在显示屏上的显示效果图。3个示例锚点与3个<img>标签(网页编程语言HTML里用于显示图像的标签)相关联后，在偏振显示屏上的显示效果。在该范例中，3个图片相互交换位置时仅需要重新关联锚点与<img>标签，利用新的锚点对元素进行定位，而无需重新建立新的锚点，因此减少了冗佘计算。

实施例三： 

相应的，本申请还提供一种三维网页设计装置，请参考图5，图5为本发明实施的装置结构示意图。如图5所示，三维网页设计装置可以包括：

接收单元30，用于接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点。

定位单元31，用于根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值。

绘制单元32，用于根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。

请一并参阅图6，一个实施例中，本申请提供的三维网页设计装置还包括：

指定单元33，用于指定全局三维容器。

第二设置单元34，用于设置三维场景参数，所述三维场景参数至少包括：观看者两眼瞳距、观看者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。

一个实施例中，定位单元31具体用于： 

根据所述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参数，计算出所述网页元素的水平视差值p、缩放比例ratio、水平位置x_a以及垂直位置y_a，其中，

$p=\frac{\mathrm{ez}}{v-z},\mathrm{ratio}=\frac{v}{v-z},$ x_a＝ratio×x，y_a＝ratio×y

其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，z分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。

一个实施例中，绘制单元32包括：

坐标确定模块320，用于将(x_a，y_a)作为左视图位置，(x_a+p，y_a)作为右视图位置。

缩放处理模块321，用于根据所述缩放比例ratio，在(x_a，y_a)以及(x_a+p，y_a)处对所述网页元素进行缩放处理。

一个实施例中，三维网页设计装置还包括设定单元35，用于设定所述网页元素的长度与宽度。可以理解的是，第二接收单元35可以工作在接收单元30前，在第二设置单元34设置好坐标系后，即可设置网页元素的长度与宽度，以便后续绘制时利用。

本申请提供的三维网页设计装置，用于在预设的全局三维容器中为网页元素设置对应的锚点，根据对应的锚点在全局三维容器中的坐标，将网页元素在全局三维容器中进行定位，得到网页元素的定位坐标及深度值，根据定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素，可以将网页元素设计成带有三维效果，因此观察者或者网页使用者在浏览网页时，佩戴上偏光眼镜即可看到三维的网页内容，提升了用户的体验度。本申请方法适用于任何网页，适用范围大，并且本申请形成的三维界面不需要用户进行启动，设计后打开网页即可看到三维效果，使用简便。

以上内容是结合具体的实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换。

Claims (10)

1.一种三维网页设计方法，其特征在于，包括：

接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；

根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值；

根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。

2.如权利要求1所述的三维网页设计方法，其特征在于，

所述接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点之前包括：

指定全局三维容器；

设置三维场景参数，所述三维场景参数至少包括：观看者两眼瞳距、观看者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。

3.如权利要求2所述的三维网页设计方法，其特征在于，所述根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值包括：

根据所述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参数，计算出所述网页元素的水平视差值p、缩放比例ratio、水平位置x_a以及垂直位置y_a，其中，

$p=\frac{\mathrm{ez}}{v-z},\mathrm{ratio}=\frac{v}{v-z},$ x_a＝ratio×x，y_a＝ratio×y

其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，z分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。

4.如权利要求3所述的三维网页设计方法，其特征在于，所述根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素包括：

确定将(x_a，y_a)作为左视图位置，(x_a+p，y_a)作为右视图位置；

根据所述缩放比例ratio，在(x_a，y_a)以及(x_a+p，y_a)处对所述网页元素进行缩放处理。

5.如权利要求1-4中任意一项所述的三维网页设计方法，其特征在于，所述接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点之前包括：

接收在预设的全局三维容器中设定的所述网页元素的长度与宽度。

6.一种三维网页设计装置，其特征在于，包括：

接收单元，用于接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；

定位单元，用于根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值；

绘制单元，用于根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。

7.如权利要求6所述的三维网页设计装置，其特征在于，还包括：

指定单元，用于指定全局三维容器；

第二设置单元，用于设置三维场景参数，所述三维场景参数至少包括：观看者两眼瞳距、观看者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。

8.如权利要求7所述的三维网页设计装置，其特征在于，所述定位单元具体用于：

根据所述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参数，计算出所述网页元素的水平视差值p、缩放比例ratio、水平位置x_a以及垂直位置y_a，其中，

$p=\frac{\mathrm{ez}}{v-z},\mathrm{ratio}=\frac{v}{v-z},$ x_a＝ratio×x，y_a＝ratio×y

其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，z分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。

9.如权利要求8所述的三维网页设计装置，其特征在于，所述绘制单元包括：

坐标确定模块，用于将(x_a，y_a)作为左视图位置，(x_a+p，y_a)作为右视图位置；

缩放处理模块，用于根据所述缩放比例ratio，在(x_a，y_a)以及(x_a+p，y_a)处对所述网页元素进行缩放处理。

10.如权利要求6-9中任意一项所述的三维网页设计装置，其特征在于，还包括第二接收单元，用于接收在预设的全局三维容器中设定的所述网页元素的长度与宽度。