CN114219891A - 一种二维元素实现三维可视化效果的方法及装置 - Google Patents

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

Info

Publication number
CN114219891A
CN114219891A CN202111462024.5A CN202111462024A CN114219891A CN 114219891 A CN114219891 A CN 114219891A CN 202111462024 A CN202111462024 A CN 202111462024A CN 114219891 A CN114219891 A CN 114219891A
Authority
CN
China
Prior art keywords
dimensional
effect
realizing
elements
attribute
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111462024.5A
Other languages
English (en)
Inventor
郭艺璇
吴玉雁
陈翔
赵爽
黄凯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tianjin Health Care Big Data Co ltd
Original Assignee
Tianjin Health Care Big Data Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tianjin Health Care Big Data Co ltd filed Critical Tianjin Health Care Big Data Co ltd
Priority to CN202111462024.5A priority Critical patent/CN114219891A/zh
Publication of CN114219891A publication Critical patent/CN114219891A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects

Landscapes

  • Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Computer Graphics (AREA)
  • Geometry (AREA)
  • Software Systems (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种二维元素实现三维可视化效果的方法及装置，属于计算机三维可视化处理技术领域，该方法通过JavaScript原生方法将字符、代码块或图片转成三维效果在显示器上展现出来；该方法的实现包括以下过程：确定二维元素；确定二维元素组成的三维元素的形状；使用JavaScript方法实现三维效果及交互处理。本发明将二维元素实现三维可视化效果，通过该方法实现将字符、代码块或图片转成三维效果，方法简单，无需掌握更多的三维技术即可实现。

Description

一种二维元素实现三维可视化效果的方法及装置
技术领域
本发明涉及计算机三维可视化处理技术领域，具体地说是一种二维元素实现三维可视化效果的方法及装置。
背景技术
随着可视化技术的日臻成熟，数据可视化已广泛应用在思维导图、文章资源、工具服务以及新闻、数据、连接、网站等显示上，越来越多的企业和应用借助于可视化的数据图表实现信息的有效沟通和清晰传达。
其中三维可视化也成为了可视化的一大亮点。现有市面上有很多上三维可视化实现技术，包括ThingJs，three.js等等，但都存在着技术复杂，上手困难的问题。
发明内容
本发明的技术任务是针对以上不足之处，提供一种二维元素实现三维可视化效果的方法及装置，能够实现将二维元素实现三维可视化的效果。
本发明解决其技术问题所采用的技术方案是：
一种二维元素实现三维可视化效果的方法，该方法通过JavaScript原生方法将字符、代码块或图片转成三维效果在显示器上展现出来；
该方法的实现包括以下过程：
确定二维元素；
确定二维元素组成的三维元素的形状；
使用JavaScript方法实现三维效果及相应的交互处理。
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。该方法通过JavaScript原生方法即可实现三维可视化效果，无需掌握更多的三维技术即可实现，方法简单，易上手，使用简便。
优选的，所述二维元素，包括字符、文档元素组成的代码块、和/或图片元素。即确定的二维元素，可以是字符，也可以是文档元素组成的代码块，也可以是图片元素。
优选的，所述字符包括文字或数字。
优选的，所述确定二维元素组成的三维元素的形状，可以是任意的三维形状，包括球形、柱状或圆锥。
优选的，所述三维效果实现三维元素自动旋转和拖拽转动的功能。
进一步的，JavaScript方法实现三维效果的过程如下：
1)、首先对二维元素的父元素设置perspective属性，这个属性定义了3D元素距视图的距离；
2)、根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定该元素的位置；
3)、在父元素上设置transform属性，实现相应的三维效果。
perspective属性定义3D元素距视图的距离，以像素计。该属性允许改变3D元素，查看3D元素的视图；
Transform属性应用于元素的2D或3D转换。这个属性允许将元素旋转，缩放，移动，倾斜等。
优选的，根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定该元素的位置，可通过设置translate3d、rotateY、rotateX、translateZ值确定所述二维元素的位置。
优选的，所述在父元素上设置transform属性，根据时间改变属性值可实现自动旋转效果，根据鼠标拖拽改变属性值可实现拖拽转动的效果。
本发明还要求保护一种二维元素实现三维可视化效果的装置，该装置包括：至少一个存储器和至少一个处理器；
所述至少一个存储器，用于存储机器可读程序；
所述至少一个处理器，用于调用所述机器可读程序，执行上述的二维元素实现三维可视化效果的方法。
本发明还要求保护计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行上述的二维元素实现三维可视化效果的方法。
本发明的一种二维元素实现三维可视化效果的方法及装置与现有技术相比，具有以下有益效果：
该方法将二维元素实现三维可视化效果。通过该方法实现将字符、代码块或图片转成三维效果，方法简单，无需掌握更多的三维技术即可实现。
附图说明
图1是本发明实施例提供的二维元素实现三维可视化效果的方法流程图；
图2是本发明实施例提供的JavaScript方法实现三维效果的流程图。
具体实施方式
下面结合附图和具体实施例对本发明作进一步说明。
三维可视化是数据可视化的一种重要展现形式，被广泛的应用在各种可视化图形界面上。基于目前市面上的很多三维可视化实现技术，都存在着技术复杂，上手困难的问题，
本发明实施例提供一种二维元素实现三维可视化效果的方法，该方法通过JavaScript原生方法将字符、代码块或图片转成三维效果在显示器上展现出来。
该方法的实现包括以下过程：
确定二维元素；
确定二维元素组成的三维元素的形状；
使用JavaScript方法实现三维效果及相应的交互处理，可以在此基础上实现三维元素自动旋转和拖拽转动的功能。
其中，所述二维元素，包括字符、文档元素组成的代码块、和/或图片元素。即确定的二维元素，可以是字符，也可以是文档元素组成的代码块，也可以是图片元素。其中，所述字符包括文字或数字。
所述确定二维元素组成的三维元素的形状，可以是任意的三维形状，包括球形、柱状或圆锥。
JavaScript方法实现三维效果的过程如下：
1)、首先对二维元素的父元素设置perspective属性，这个属性定义了3D元素距视图的距离；
2)、根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定该元素的位置；可通过设置translate3d、rotateY、rotateX、translateZ等值确定；
3)、在父元素上设置transform属性，实现相应的三维效果。
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。
perspective属性定义3D元素距视图的距离，以像素计。该属性允许改变3D元素，查看3D元素的视图；
Transform属性应用于元素的2D或3D转换。这个属性允许将元素旋转，缩放，移动，倾斜等。
该方法通过JavaScript原生方法即可实现三维可视化效果，无需掌握更多的三维技术即可实现，方法简单，易上手。
如图1所示，将字符、代码块或图片转成三维效果大致可分为三步：确定二维元素，确定二维元素组成的三维元素的形状，使用JavaScript方法实现三维效果。
首先，确定二维元素，可以是文字或数字等字符，也可以是文档元素组成的代码块，也可以是图片元素。
第二步，确定二维元素组成的三维元素的形状，可以是任意的三维形状，包括球形、柱状或圆锥等。
第三步，JavaScript方法实现三维效果：
1、首先对二维元素的父元素设置perspective属性，这个属性定义了3D元素距视图的距离。
2、根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定改元素的位置。可通过设置translate3d、rotateY、rotateX、translateZ等值确定。
3、在父元素上设置transform属性，根据时间改变属性值可实现自动旋转效果，根据鼠标拖拽改变属性值可实现拖拽转动的效果。
本发明实施例还提供了一种二维元素实现三维可视化效果的装置，该装置包括：至少一个存储器和至少一个处理器；
所述至少一个存储器，用于存储机器可读程序；
所述至少一个处理器，用于调用所述机器可读程序，执行本发明上述实施例中所述的二维元素实现三维可视化效果的方法。
本发明实施例还提供了一种计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行本发明上述实施例中所述的二维元素实现三维可视化效果的方法。具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。
在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。
用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RAM、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。
此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。
此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。
上文通过附图和优选实施例对本发明进行了详细展示和说明，然而本发明不限于这些已揭示的实施例，基与上述多个实施例本领域技术人员可以知晓，可以组合上述不同实施例中的代码审核手段得到本发明更多的实施例，这些实施例也在本发明的保护范围之内。

Claims (10)

1.一种二维元素实现三维可视化效果的方法，其特征在于，该方法通过JavaScript原生方法将字符、代码块或图片转成三维效果在显示器上展现出来；
该方法的实现包括以下过程：
确定二维元素；
确定二维元素组成的三维元素的形状；
使用JavaScript方法实现三维效果及交互处理。
2.根据权利要求1所述的一种二维元素实现三维可视化效果的方法，其特征在于所述二维元素，包括字符、文档元素组成的代码块、和/或图片元素。
3.根据权利要求2所述的一种二维元素实现三维可视化效果的方法，其特征在于所述字符包括文字或数字。
4.根据权利要求1或2所述的一种二维元素实现三维可视化效果的方法，其特征在于所述确定二维元素组成的三维元素的形状，可以是任意的三维形状，包括球形、柱状或圆锥。
5.根据权利要求4所述的一种二维元素实现三维可视化效果的方法，其特征在于，所述三维效果实现三维元素自动旋转和拖拽转动的功能。
6.根据权利要求1或2所述的一种二维元素实现三维可视化效果的方法，其特征在于，JavaScript方法实现三维效果的过程如下：
1)、首先对二维元素的父元素设置perspective属性，这个属性定义3D元素距视图的距离；
2)、根据要组成的三维元素的形状，对每一个二维元素设置transform属性以确定该元素的位置；
3)、在父元素上设置transform属性，实现相应的三维效果。
7.根据权利要求6所述的一种二维元素实现三维可视化效果的方法，其特征在于，通过设置translate3d、rotateY、rotateX、translateZ值确定所述二维元素的位置。
8.根据权利要求6所述的一种二维元素实现三维可视化效果的方法，其特征在于，所述在父元素上设置transform属性，根据时间改变属性值可实现自动旋转效果，根据鼠标拖拽改变属性值可实现拖拽转动的效果。
9.一种二维元素实现三维可视化效果的装置，其特征在于，包括：至少一个存储器和至少一个处理器；
所述至少一个存储器，用于存储机器可读程序；
所述至少一个处理器，用于调用所述机器可读程序，执行权利要求1至8任一所述的方法。
10.计算机可读介质，其特征在于，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行权利要求1至8任一所述的方法。
CN202111462024.5A 2021-12-02 2021-12-02 一种二维元素实现三维可视化效果的方法及装置 Pending CN114219891A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111462024.5A CN114219891A (zh) 2021-12-02 2021-12-02 一种二维元素实现三维可视化效果的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111462024.5A CN114219891A (zh) 2021-12-02 2021-12-02 一种二维元素实现三维可视化效果的方法及装置

Publications (1)

Publication Number Publication Date
CN114219891A true CN114219891A (zh) 2022-03-22

Family

ID=80699452

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111462024.5A Pending CN114219891A (zh) 2021-12-02 2021-12-02 一种二维元素实现三维可视化效果的方法及装置

Country Status (1)

Country Link
CN (1) CN114219891A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114780188A (zh) * 2022-04-08 2022-07-22 上海迈内能源科技有限公司 网页3d模型顶牌展示方法、系统、终端及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114780188A (zh) * 2022-04-08 2022-07-22 上海迈内能源科技有限公司 网页3d模型顶牌展示方法、系统、终端及存储介质
CN114780188B (zh) * 2022-04-08 2023-09-01 上海迈内能源科技有限公司 网页3d模型顶牌展示方法、系统、终端及存储介质

Similar Documents

Publication Publication Date Title
US8499236B1 (en) Systems and methods for presenting reflowable content on a display
AU2013225479B2 (en) Application display method and terminal
CN108876887B (zh) 渲染方法和装置
CN112132961B (zh) 基于全景图模板的数字虚拟展厅生成方法及系统
CN114648615B (zh) 目标对象交互式重现的控制方法、装置、设备及存储介质
CN102789648A (zh) 用于将二维内容转换为三维内容的设备和方法
WO2023165301A1 (zh) 一种内容发布方法、装置、计算机设备及存储介质
CN112541960A (zh) 三维场景的渲染方法、装置及电子设备
CN114219891A (zh) 一种二维元素实现三维可视化效果的方法及装置
CN104871122A (zh) 显示控制设备和程序
JP2023533108A (ja) 道路ラベルを生成するための方法、装置、デバイス及び記憶媒体
WO2023019995A1 (zh) 训练方法、译文展示方法、装置、电子设备以及存储介质
CN113495933A (zh) 一种矢量瓦片显示方法及系统
CN110069254B (zh) 文本显示方法、装置及服务器
CN104615647B (zh) 视图模型请求、下发方法及装置
CN112689188B (zh) 一种大屏滚动字幕显示方法、装置、终端及存储介质
CN114297546A (zh) 一种基于WebGL的载入3D模型实现自动生成缩略图的方法
CN105988679B (zh) 一种信息呈现方法、装置及一种用户设备
US11023089B2 (en) View port resolution independent network pages
CN113010582A (zh) 数据处理方法、装置、计算机可读介质及电子设备
CN106709965B (zh) 一种基于共享表面的文本显示方法及装置
KR20140098929A (ko) 사용자 지향적 개인 출판물 저작 도구를 이용하는 웹 기반의 온라인 전자책 출판 방법 및 웹 기반의 온라인 전자책 출판 시스템
CN113486415B (zh) 模型透视方法、智能终端以及存储装置
CN109522429A (zh) 用于生成信息的方法和装置
CN115421691A (zh) 一种基于虚拟列表的数据滚动方法、装置及计算机设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination