一种三维网页设计方法及装置的制造方法
【技术领域】
[0001] 本申请涉及一种三维网页设计方法及装置。
【背景技术】
[0002] 人类在观看空间里的物体时，由于两眼在水平方向上的位置不同，左右眼看到的 两个视图略有不同，而人的大脑能够通过这两个视图的视差感知到一个具有景深和层次感 的立体景象。现有的立体三维浏览器便是基于这种原理，通过为立体网页渲染具有视差的 左右眼视图，使浏览器用户感知到一个具有真实立体感的三维网页界面。
[0003] 现有的立体三维网页的制作中，一般有以下几种：
[0004] 1、基于HTML5Canvas的图形绘制方法。由于传统网页界面设计采用的是围绕着 HTML DOM排版、CSS对DOM节点进行外观描述的方式，而不是图形学绘制的方式，因此这种 绘制方法仅适用于为网页部件生成游戏、动画等三维仿真内容，而不适合网页界面设计。
[0005] 2、基于浏览器插件和OPEN GL或03D等三维编程接口，根据三维操作指令生成三 维内容的方法，但是这种方法并非由开发人员来设计三维界面，而是页面加载后由用户通 过按钮或鼠标右键等方式启动三维指令生成三维内容。打开后还需用户操作才能生成三维 画面，过程较繁琐，体验度不高。
[0006] 3、基于HTML、CSS、JavaScript标准扩展的方法，符合传统网页界面设计的习惯， 但该方法的扩展导致浏览器内核较大的改动。
[0007] 因此，现有技术中的三维网页的设计方法，对浏览器内核改动较大，并且大多需要 用户在使用时进行后续启动等操作，带来使用上的不便。
【发明内容】
[0008] 本申请提供一种三维网页设计方法及装置，可以将网页元素设计成带有三维效 果，提升了用户的体验度。
[0009] 根据本申请的第一方面，本申请提供一种三维网页设计方法，包括：接收外部输入 的在预设的全局三维容器中为网页元素设置的对应的锚点；
[0010] 根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局 三维容器中进行定位，得到所述网页元素的定位坐标及深度值；根据所述定位坐标，分别在 左眼视图以及右眼视图绘制所述网页元素。
[0011] 可选的，所述在预设的全局三维容器中为网页元素设置对应的锚点之前包括：指 定全局三维容器；设置三维场景参数，所述三维场景参数至少包括：观看者两眼瞳距、观 看者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏 幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐 标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。
[0012] 可选的，所述根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元 素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值包括：根据所 述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参数，计算出所述网页元素 的水平视差值P、缩放比例ratio、水平位置Xa以及垂直位置y a，其中，
Xa= ratio X X，y a= ratio X y，其中，e为所述观看者两眼 瞳距，而V为所述观看者与屏幕的距离，X，y，z分别为所述锚点在所述全局三维容器的坐标 系中的横向坐标、垂直坐标以及纵向坐标。
[0013] 可选的，所述根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元 素包括：确定将（Xa，ya)作为左视图位置，（xa+p，ya)作为右视图位置；根据所述缩放比例 ratio,在（xa，ya)以及（xa+p，ya)处对所述网页元素进行缩放处理。
[0014] 可选的，所述接收外部输入的在预设的全局三维容器中为网页元素设置的对应的 锚点之前包括：接收在预设的全局三维容器中设定的所述网页元素的长度与宽度。
[0015] 根据本申请的第二方面，提供一种三维网页设计装置，包括：接收单元，用于接收 外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；定位单元，用于根据 所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进 行定位，得到所述网页元素的定位坐标及深度值；绘制单元，用于根据所述定位坐标，分别 在左眼视图以及右眼视图绘制所述网页元素。
[0016] 可选的，还包括：指定单元，用于指定全局三维容器；第二设置单元，用于设置三 维场景参数，所述三维场景参数至少包括：观看者两眼瞳距、观看者与屏幕的距离以及所述 全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标 轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指 向靠近观察者方向为正，指向远离观察者方向为负。
[0017] 可选的，所述定位单元具体用于：根据所述对应的锚点在所述全局三维容器中的 坐标结合所述三维场景参数，计算出所述网页元素的水平视差值P、缩放比例ratio、水平 位置Xa以及垂直位置ya，其中，
[0018]
Xa= ratio X X，y a= ratio Xy
[0019] 其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，z分别为 所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。
[0020] 可选的，所述绘制单元包括：坐标确定模块，用于将（Xa，ya)作为左视图位置， (Xa+P，ya)作为右视图位置；缩放处理模块，用于根据所述缩放比例ratio,在（x a，ya)以及 (Xa+P，ya)处对所述网页元素进行缩放处理。
[0021] 可选的，还包括第二接收单元，用于接收在预设的全局三维容器中设定的所述网 页元素的长度与宽度。
[0022] 本申请提供的三维网页设计方法及装置，在预设的全局三维容器中为网页元素设 置对应的锚点，根据对应的锚点的坐标，将网页元素在全局三维容器中进行定位，得到网页 元素的定位坐标及深度值，根据定位坐标，分别在左眼视图以及右眼视图绘制所述网页元 素，可以将网页元素设计成带有三维效果，因此观察者或者网页使用者在浏览网页时，即可 看到三维的网页内容，提升了用户的体验度。并且网页图像上元素的需变换位置时，仅需要 利用新的锚点对元素进行定位，因此减少了冗佘计算，减少对浏览器内核的改动。本申请方 法适用于任何网页，适用范围大，并且本申请形成的三维界面不需要用户进行启动，设计后 打开网页即可看到三维效果，使用简便。
【附图说明】
[0023] 图1为本发明实施例的方法流程图；
[0024] 图2为本发明实施例的另一种方法流程图；
[0025] 图3为锚点在坐标系中的一种示意图；
[0026] 图4为使用本发明方法的一种显示效果图；
[0027] 图5为发明实施例的装置结构示意图；
[0028] 图6为发明实施例的另一种装置结构示意图。
【具体实施方式】
[0029] 下面通过【具体实施方式】结合附图对本发明作进一步详细说明。
[0030] 在本申请实施例中，提供一种三维网页设计方法及装置，可以将网页元素设计成 带有三维效果，提升了用户的体验度。
[0031] 实施例一：
[0032] 请参考图1，图1为本发明实施例一的方法流程图。如图1所示，一种三维网页设 计方法，可以包括以下步骤：
[0033] 101、接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点。
[0034] 一个锚点可以与一个网页元素对应，也可以一个锚点与多个网页元素对应。锚点 的数量及设置位置可由开发人员按实际需要进行设置，本发明实施例对此不作限定。
[0035] 102、根据对应的锚点在全局三维容器中的坐标，将网页元素在全局三维容器中进 行定位，得到网页元素的定位坐标及深度值。
[0036] 可以理解的是，在有视差情况下才叠加出有立体深度的图像，因此在本申请实施