本申请提供的三维网页设计方法及装置，在预设的全局三维容器中为网页元素设置对应的锚点，根据对应的锚点的坐标，将网页元素在全局三维容器中进行定位，得到网页元素的定位坐标及深度值，根据定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素，可以将网页元素设计成带有三维效果，因此观察者或者网页使用者在浏览网页时，即可看到三维的网页内容，提升了用户的体验度。并且网页图像上元素的需变换位置时，可以重复利用已有的锚点，因此减少了冗余计算，三维效果也仅需少量的浏览器内核变动。本申请方法适用于任何网页，适用范围大，并且本申请形成的三维界面不需要用户进行启动，设计后打开网页即可看到三维效果，使用简便。
【技术实现步骤摘要】
本申请涉及一种三维网页设计方法及装置。
技术介绍
人类在观看空间里的物体时，由于两眼在水平方向上的位置不同，左右眼看到的两个视图略有不同，而人的大脑能够通过这两个视图的视差感知到一个具有景深和层次感的立体景象。现有的立体三维浏览器便是基于这种原理，通过为立体网页渲染具有视差的左右眼视图，使浏览器用户感知到一个具有真实立体感的三维网页界面。现有的立体三维网页的制作中，一般有以下几种：1、基于HTML5Canvas的图形绘制方法。由于传统网页界面设计采用的是围绕着HTML DOM排版、CSS对DOM节点进行外观描述的方式，而不是图形学绘制的方式，因此这种绘制方法仅适用于为网页部件生成游戏、动画等三维仿真内容，而不适合网页界面设计。2、基于浏览器插件和OPEN GL或O3D等三维编程接口，根据三维操作指令生成三维内容的方法，但是这种方法并非由开发人员来设计三维界面，而是页面加载后由用户通过按钮或鼠标右键等方式启动三维指令生成三维内容。打开后还需用户操作才能生成三维画面，过程较繁琐，体验度不高。3、基于HTML、CSS、JavaScript标准扩展的方法，符合传统网页界面设计的习惯，但该方法的扩展导致浏览器内核较大的改动。因此，现有技术中的三维网页的设计方法，对浏览器内核改动较大，并且大多需要用户在使用时进行后续启动等操作，带来使用上的不便。
技术实现思路
本申请提供一种三维网页设计方法及装置，可以将网页元素设计成带有三维效果，提升了用户的体验度。根据本申请的第一方面，本申请提供一种三维网页设计方法，包括：接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值；根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。可选的，所述在预设的全局三维容器中为网页元素设置对应的锚点之前包括：指定全局三维容器；设置三维场景参数，所述三维场景参数至少包括：观 看者两眼瞳距、观看者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。可选的，所述根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值包括：根据所述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参数，计算出所述网页元素的水平视差值p、缩放比例ratio、水平位置xa以及垂直位置ya，其中，xa＝ratio×x，ya＝ratio×y，其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，z分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。可选的，所述根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素包括：确定将(xa，ya)作为左视图位置，(xa+p，ya)作为右视图位置；根据所述缩放比例ratio，在(xa，ya)以及(xa+p，ya)处对所述网页元素进行缩放处理。可选的，所述接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点之前包括：接收在预设的全局三维容器中设定的所述网页元素的长度与宽度。根据本申请的第二方面，提供一种三维网页设计装置，包括：接收单元，用于接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；定位单元，用于根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值；绘制单元，用于根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。可选的，还包括：指定单元，用于指定全局三维容器；第二设置单元，用于设置三维场景参数，所述三维场景参数至少包括：观看者两眼瞳距、观看者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向远离观察者方向为负。可选的，所述定位单元具体用于：根据所述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参数，计算出所述网页元素的水平视差值p、缩放 比例ratio、水平位置xa以及垂直位置ya，其中，p=ezv-z,ratio=vv-z,]]>xa＝ratio×x，ya＝ratio×y其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，z分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵向坐标。可选的，所述绘制单元包括：坐标确定模块，用于将(xa，ya)作为左视图位置，(xa+p，ya)作为右视图位置；缩放处理模块，用于根据所述缩放比例ratio，在(xa，ya)以及(xa+p，ya)处对所述网页元素进行缩放处理。可选的，还包括第二接收单元，用于接收在预设的全局三维容器中设定的所述网页元素的长度与宽度。本申请提供的三维网页设计方法及装置，在预设的全局三维容器中为网页元素设置对应的锚点，根据对应的锚点的坐标，将网页元素在全局三维容器中进行定位，得到网页元素的定位坐标及深度值，根据定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素，可以将网页元素设计成带有三维效果，因此观察者或者网页使用者在浏览网页时，即可看到三维的网页内容，提升了用户的体验度。并且网页图像上元素的需变换位置时，仅需要利用新的锚点对元素进行定位，因此减少了冗佘计算，减少对浏览器内核的改动。本申请方法适用于任何网页，适用范围大，并且本申请形成的三维界面不需要用户进行启动，设计后打开网页即可看到三维效果，使用简便。附图说明图1为本专利技术实施例的方法流程图；图2为本专利技术实施例的另一种方法流程图；图3为锚点在坐标系中的一种示意图；图4为使用本专利技术方法的一种显示效果图；图5为专利技术实施例的装置结构示意图；图6为专利技术实施例的另一种装置结构示意图。具体实施方式下面通过具体实施方式结合附图对本专利技术作进一步详细说明。在本申请实施例中，提供一种三维网页设计方法及装置，可以将网页元素设计成带有三维效果，提升了用户的体验度。实施例一： 请参考图1，图1为本专利技术实施例一的方法流程图。如图1所示，一种三维 网页设计方法，可以包括以下步骤：101、接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点。一个锚点可以与一个网页元素对应，也可以一个锚点与多个网页元素对应。锚点的数量及设置位置可由开发人员按实际需要进行设置，本专利技术实施例对此不作限定。102、根据对应的锚点在全局三维容器中的坐标，将网页元素在全局三维容器中进行定位，得到网页元素的定位坐标及深度值。...
【技术保护点】
一种三维网页设计方法，其特征在于，包括：接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值；根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。
【技术特征摘要】
1.一种三维网页设计方法，其特征在于，包括：
接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点；
根据所述对应的锚点在所述全局三维容器中的坐标，将所述网页元素在所
述全局三维容器中进行定位，得到所述网页元素的定位坐标及深度值；
根据所述定位坐标，分别在左眼视图以及右眼视图绘制所述网页元素。
2.如权利要求1所述的三维网页设计方法，其特征在于，
所述接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚
点之前包括：
指定全局三维容器；
设置三维场景参数，所述三维场景参数至少包括：观看者两眼瞳距、观看
者与屏幕的距离以及所述全局三维容器的坐标系；所述坐标系的横向坐标轴为
平行于屏幕的水平坐标轴，垂直坐标轴为平行于屏幕的竖直坐标轴，纵向坐标
轴为垂直于屏幕的坐标轴，所述纵向坐标轴以指向靠近观察者方向为正，指向
远离观察者方向为负。
3.如权利要求2所述的三维网页设计方法，其特征在于，所述根据所述对
应的锚点在所述全局三维容器中的坐标，将所述网页元素在所述全局三维容器
中进行定位，得到所述网页元素的定位坐标及深度值包括：
根据所述对应的锚点在所述全局三维容器中的坐标结合所述三维场景参
数，计算出所述网页元素的水平视差值p、缩放比例ratio、水平位置xa以及垂直
位置ya，其中，
p=ezv-z,ratio=vv-z,]]>xa＝ratio×x，ya＝ratio×y
其中，e为所述观看者两眼瞳距，而v为所述观看者与屏幕的距离，x，y，
z分别为所述锚点在所述全局三维容器的坐标系中的横向坐标、垂直坐标以及纵
向坐标。
4.如权利要求3所述的三维网页设计方法，其特征在于，所述根据所述定
位坐标，分别在左眼视图以及右眼视图绘制所述网页元素包括：
确定将(xa，ya)作为左视图位置，(xa+p，ya)作为右视图位置；
根据所述缩放比例ratio，在(xa，ya)以及(xa+p，ya)处对所述网页元
素进行缩放处理。
5.如权利要求1-4中任意一项所述的三维网页设计方法，其特征在于，所
述接收外部输入的在预设的全局三维容器中为网页元素设置的对应的锚点之前
【专利技术属性】
技术研发人员：王文敏，陈钦水，王荣刚，李革，董胜富，王振宇，李英，高文，
申请(专利权)人：北京大学深圳研究生院，
类型：发明
国别省市：广东;44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。