[发明专利]一种三维网页设计方法及装置

说明书

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

技术领域

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

背景技术

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

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

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分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。