一种二维元素实现三维可视化效果的方法及装置与流程

1.本发明涉及计算机三维可视化处理技术领域，具体地说是一种二维元素实现三维可视化效果的方法及装置。


背景技术：

2.随着可视化技术的日臻成熟，数据可视化已广泛应用在思维导图、文章资源、工具服务以及新闻、数据、连接、网站等显示上，越来越多的企业和应用借助于可视化的数据图表实现信息的有效沟通和清晰传达。
3.其中三维可视化也成为了可视化的一大亮点。现有市面上有很多上三维可视化实现技术，包括thingjs，three.js等等，但都存在着技术复杂，上手困难的问题。


技术实现要素：

4.本发明的技术任务是针对以上不足之处，提供一种二维元素实现三维可视化效果的方法及装置，能够实现将二维元素实现三维可视化的效果。
5.本发明解决其技术问题所采用的技术方案是：
6.一种二维元素实现三维可视化效果的方法，该方法通过javascript原生方法将字符、代码块或图片转成三维效果在显示器上展现出来；
7.该方法的实现包括以下过程：
8.确定二维元素；
9.确定二维元素组成的三维元素的形状；
10.使用javascript方法实现三维效果及相应的交互处理。
11.javascript是运行在浏览器端的脚步语言，javascript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。该方法通过javascript原生方法即可实现三维可视化效果，无需掌握更多的三维技术即可实现，方法简单，易上手，使用简便。
12.优选的，所述二维元素，包括字符、文档元素组成的代码块、和/或图片元素。即确定的二维元素，可以是字符，也可以是文档元素组成的代码块，也可以是图片元素。
13.优选的，所述字符包括文字或数字。
14.优选的，所述确定二维元素组成的三维元素的形状，可以是任意的三维形状，包括球形、柱状或圆锥。
15.优选的，所述三维效果实现三维元素自动旋转和拖拽转动的功能。
16.进一步的，javascript方法实现三维效果的过程如下：
17.1)、首先对二维元素的父元素设置perspective属性，这个属性定义了3d元素距视图的距离；
18.2)、根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定该元素的位置；
19.3)、在父元素上设置transform属性，实现相应的三维效果。
20.perspective属性定义3d元素距视图的距离，以像素计。该属性允许改变3d元素，查看3d元素的视图；
21.transform属性应用于元素的2d或3d转换。这个属性允许将元素旋转，缩放，移动，倾斜等。
22.优选的，根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定该元素的位置，可通过设置translate3d、rotatey、rotatex、translatez值确定所述二维元素的位置。
23.优选的，所述在父元素上设置transform属性，根据时间改变属性值可实现自动旋转效果，根据鼠标拖拽改变属性值可实现拖拽转动的效果。
24.本发明还要求保护一种二维元素实现三维可视化效果的装置，该装置包括：至少一个存储器和至少一个处理器；
25.所述至少一个存储器，用于存储机器可读程序；
26.所述至少一个处理器，用于调用所述机器可读程序，执行上述的二维元素实现三维可视化效果的方法。
27.本发明还要求保护计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行上述的二维元素实现三维可视化效果的方法。
28.本发明的一种二维元素实现三维可视化效果的方法及装置与现有技术相比，具有以下有益效果：
29.该方法将二维元素实现三维可视化效果。通过该方法实现将字符、代码块或图片转成三维效果，方法简单，无需掌握更多的三维技术即可实现。
附图说明
30.图1是本发明实施例提供的二维元素实现三维可视化效果的方法流程图；
31.图2是本发明实施例提供的javascript方法实现三维效果的流程图。
具体实施方式
32.下面结合附图和具体实施例对本发明作进一步说明。
33.三维可视化是数据可视化的一种重要展现形式，被广泛的应用在各种可视化图形界面上。基于目前市面上的很多三维可视化实现技术，都存在着技术复杂，上手困难的问题，
34.本发明实施例提供一种二维元素实现三维可视化效果的方法，该方法通过javascript原生方法将字符、代码块或图片转成三维效果在显示器上展现出来。
35.该方法的实现包括以下过程：
36.确定二维元素；
37.确定二维元素组成的三维元素的形状；
38.使用javascript方法实现三维效果及相应的交互处理，可以在此基础上实现三维元素自动旋转和拖拽转动的功能。
39.其中，所述二维元素，包括字符、文档元素组成的代码块、和/或图片元素。即确定
的二维元素，可以是字符，也可以是文档元素组成的代码块，也可以是图片元素。其中，所述字符包括文字或数字。
40.所述确定二维元素组成的三维元素的形状，可以是任意的三维形状，包括球形、柱状或圆锥。
41.javascript方法实现三维效果的过程如下：
42.1)、首先对二维元素的父元素设置perspective属性，这个属性定义了3d元素距视图的距离；
43.2)、根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定该元素的位置；可通过设置translate3d、rotatey、rotatex、translatez等值确定；
44.3)、在父元素上设置transform属性，实现相应的三维效果。
45.javascript是运行在浏览器端的脚步语言，javascript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。
46.perspective属性定义3d元素距视图的距离，以像素计。该属性允许改变3d元素，查看3d元素的视图；
47.transform属性应用于元素的2d或3d转换。这个属性允许将元素旋转，缩放，移动，倾斜等。
48.该方法通过javascript原生方法即可实现三维可视化效果，无需掌握更多的三维技术即可实现，方法简单，易上手。
49.如图1所示，将字符、代码块或图片转成三维效果大致可分为三步：确定二维元素，确定二维元素组成的三维元素的形状，使用javascript方法实现三维效果。
50.首先，确定二维元素，可以是文字或数字等字符，也可以是文档元素组成的代码块，也可以是图片元素。
51.第二步，确定二维元素组成的三维元素的形状，可以是任意的三维形状，包括球形、柱状或圆锥等。
52.第三步，javascript方法实现三维效果：
53.1、首先对二维元素的父元素设置perspective属性，这个属性定义了3d元素距视图的距离。
54.2、根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定改元素的位置。可通过设置translate3d、rotatey、rotatex、translatez等值确定。
55.3、在父元素上设置transform属性，根据时间改变属性值可实现自动旋转效果，根据鼠标拖拽改变属性值可实现拖拽转动的效果。
56.本发明实施例还提供了一种二维元素实现三维可视化效果的装置，该装置包括：至少一个存储器和至少一个处理器；
57.所述至少一个存储器，用于存储机器可读程序；
58.所述至少一个处理器，用于调用所述机器可读程序，执行本发明上述实施例中所述的二维元素实现三维可视化效果的方法。
59.本发明实施例还提供了一种计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行本发明上述实施例中所述的二维元素实现三维可视化效果的方法。具体地，可以提供配有存储介质的系统或者装置，
在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或cpu或mpu)读出并执行存储在存储介质中的程序代码。
60.在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。
61.用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如cd-rom、cd-r、cd-rw、dvd-rom、dvd-ram、dvd-rw、dvd rw)、磁带、非易失性存储卡和rom。可选择地，可以由通信网络从服务器计算机上下载程序代码。
62.此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。
63.此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的cpu等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。
64.上文通过附图和优选实施例对本发明进行了详细展示和说明，然而本发明不限于这些已揭示的实施例，基与上述多个实施例本领域技术人员可以知晓，可以组合上述不同实施例中的代码审核手段得到本发明更多的实施例，这些实施例也在本发明的保护范围之内。