CN116402937A - 一种基于web的复杂数据3D可视化简化开发方法 - Google Patents
一种基于web的复杂数据3D可视化简化开发方法 Download PDFInfo
- Publication number
- CN116402937A CN116402937A CN202310347492.0A CN202310347492A CN116402937A CN 116402937 A CN116402937 A CN 116402937A CN 202310347492 A CN202310347492 A CN 202310347492A CN 116402937 A CN116402937 A CN 116402937A
- Authority
- CN
- China
- Prior art keywords
- node
- data
- rendering
- main object
- scene
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000011161 development Methods 0.000 title claims abstract description 14
- 230000000007 visual effect Effects 0.000 title abstract description 6
- 238000009877 rendering Methods 0.000 claims abstract description 61
- 238000012544 monitoring process Methods 0.000 claims abstract description 19
- 238000007429 general method Methods 0.000 claims abstract description 17
- 238000005286 illumination Methods 0.000 claims abstract description 11
- 230000008859 change Effects 0.000 claims abstract description 5
- 230000006870 function Effects 0.000 claims description 26
- 230000015654 memory Effects 0.000 claims description 19
- 239000000463 material Substances 0.000 claims description 9
- 230000003993 interaction Effects 0.000 claims description 5
- 238000012800 visualization Methods 0.000 claims description 5
- 230000001960 triggered effect Effects 0.000 claims description 4
- 230000000694 effects Effects 0.000 claims description 3
- 239000000725 suspension Substances 0.000 claims description 2
- 238000011423 initialization method Methods 0.000 abstract description 3
- 238000012423 maintenance Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000013016 damping Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000001125 extrusion Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 238000007619 statistical method Methods 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/50—Lighting effects
- G06T15/506—Illumination models
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T1/00—General purpose image data processing
- G06T1/20—Processor architectures; Processor configuration, e.g. pipelining
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- Image Generation (AREA)
Abstract
本发明公开了一种基于web的复杂数据3D可视化简化开发方法，属于计算机数据渲染技术领域，包括：根据传入的各项参数和节点数据创建主对象A，主对象A中放入需要渲染的3D场景的各项参数和节点数据；给主对象A挂载通用方法；根据主对象A的参数生成场景、光照、相机、渲染器、控制器及窗口大小监控，并监控浏览器窗口大小改变事件给渲染器传入新的宽高数据，给相机传入新的根据视窗大小比例的数据；根据主对象A的节点数据及配置渲染3D元素，并继承主对象A的通用方法；调用渲染函数渲染。本发明通过提供一个在web开发时使用的js文件和初始化方法，这个方法中传入3D场景的各项参数、节点数据即可简单快捷地完成3D场景渲染。
Description
技术领域
本发明属于计算机数据渲染技术领域，更具体地，涉及一种基于web的复杂数据3D可视化简化开发方法。
背景技术
随着互联网的高速发展，诸如大数据、态势、拓扑、物流监控等应用场景多样化、信息复杂化及场景元素数量的递增，传统的2D渲染已无法满足综合信息的直观呈现和告警等状况的在线处理，并且需要不断的切换界面查找信息，大大的降低了信息获取效率和处置效率。引进3D可视化技术后，一个界面能多维度的呈现大量复杂数据，动态感知场景中各元素信息并进行统计分析。
传统的3D渲染方式：
1)创建必要的场景、相机、光照等元素，获取需要渲染的数据，使用自定义算法计算出元素位置，导入或创建各种格式的模型、材质并加入场景，模拟交互事件逻辑，在逻辑代码中判断数据中的关键字段，实现各种交互逻辑。这样一来，让实现一个简单的可交互3D场景变得很复杂、繁琐，随着场景和元素的逐步增加会变得非常难以维护及后续开发。
2)存在频繁增删节点操作的3D场景，每次删除一个或者一组3D模型时，需要手动释放内存。在复杂的3D场景中，渲染对象往往有非常多层级，各层级类型也不尽相同，清除内存方式也就不同且难以遍历，稍有不慎便会内存泄漏。
发明内容
本发明针对传统的3D渲染方式实现复杂繁琐、难以维护和后续开发、容易发生内存泄露等问题，提出一种基于web的复杂数据3D可视化简化开发方法，通过提供一个在web开发时使用的js文件和初始化方法，这个方法中传入3D场景的各项参数、节点数据即可简单快捷地完成3D场景渲染。
为实现上述目的，本发明提供了一种基于web的复杂数据3D可视化简化开发方法，基于js文件实现，所述方法包括：
传入需要渲染的3D场景的各项参数和节点数据，根据传入的各项参数和节点数据创建主对象A，其中，主对象A中放入需要渲染的3D场景的各项参数和节点数据；
给主对象A挂载通用方法；
根据主对象A的参数生成场景、光照、相机、渲染器、控制器及窗口大小监控，并监控浏览器窗口大小改变事件给渲染器传入新的宽高数据，给相机传入新的根据视窗大小比例的数据，最后调用渲染函数；
根据主对象A的节点数据及配置渲染3D元素，并继承主对象A的通用方法；
调用渲染函数渲染。
在一些可选的实施方案中，需要渲染的3D场景的各项参数和节点数据包括：
光照，接收第一个string类型参数用于表示场景中的光照类型，接收第二个object类型参数用于设定光源的属性，若第二个参数为空，则光源属性为经过调试的默认参数，如果整条为空值则由用户自行生成光源；
相机，接收第一个string类型参数用于表示场景中的相机类型，接收第二个object类型参数用于设定相机的属性，如果第二个参数为空，则相机属性为经过调试的默认参数，如果整条为空值则由用户自行生成相机；
渲染器，为布尔类型，为true则生成渲染器，参数为经过调试的默认参数；为false则由用户自行生成渲染器；
控制器，为布尔类型，为true则生成控制器，参数为经过调试的默认参数；为false则由用户自行生成控制器；
窗口大小监控，为布尔类型，为true则生成窗口大小监控功能，当窗口大小改变时每1秒触发1次重新渲染，直到窗口大小停止改变；为false则不生成窗口大小监控功能；
节点数据，为array类型，根据需要3D渲染的原始数据配置而成的渲染数据。
在一些可选的实施方案中，节点数据中的配置包括：
当条数据的原始数据；
位置，值为空则根据当条数据渲染的3D元素位置为场景中心，或者父级的中心，值为[x,y,z]坐标，则为相对于场景或者父级的坐标，值为object类型，且包含经纬度坐标，则渲染位置为经纬度转换的墨卡托坐标；
模型，object类型，为外部引入模型或者内置模型；
事件回调函数，function类型，分为点击事件、鼠标悬浮事件、鼠标离开事件、双击事件及右键点击事件，不同事件function对应不同字段；
children字段，array类型，如果为空则表示当前节点没有子节点，不为空则表示当前节点有子节点；
标签，object类型，包括：标签类型：2D标签、3D标签、及气泡标签，标签内容：标签内显示的内容，标签偏移量：标签在x,y,z三个方向的偏移量；
唯一标识，设置元素name属性为原始数据中的唯一标识。
在一些可选的实施方案中，给主对象A挂载的通用方法，包括：生成飞线、根据geojson数据渲染3D地图、清除内存、重载、获取父元素、获取子元素、获取兄弟元素、添加元素及删除元素。
在一些可选的实施方案中，清除内存包括：
在生成节点时，将存放当前节点指向的变量放入当前节点的一个命名为resMgr的数组中，同时放入父级的resMgr数组中，层层往上直到主对象A，当调用节点的清除缓存方法时，遍历节点的resMgr，清除每一条的模型及材质，以及每一条的children中的模型及材质，最后调用父级的移除方法，移除当前节点。
在一些可选的实施方案中，根据主对象A的节点数据及配置渲染3D元素，并继承主对象A的通用方法，包括：
创建一个总的group组用来装载所有节点，并把此group加到场景scene中；
加载节点数据的模型，设置模型的坐标为节点数据坐标，挂载原始数据到节点上；
把当前元素放入主对象A的用于存放各类不同事件的数组中，监听渲染3D场景的DOM元素的各类事件，在触发的事件逻辑中写入了如下逻辑：通过鼠标位置标准设备坐标和相机参数从事件触发位置发射一根射线，传入存放在主对象A的对应事件的数组，若返回值为空则表示未操作到元素，若有元素则获取离事件位置最近的元素，然后，触发获取到的元素的对应事件回调函数；
将存放当前节点指向的变量放入当前节点的一个命名为resMgr的数组中，同时放入父级的resMgr数组中，层层往上直到主对象A，给节点添加parentID字段，值为上一级的唯一标识，给节点添加一个数组，数组中存放同级除自身以外的节点的唯一标识，给节点添加当前节点原始数据中的唯一标识，给节点添加标签；
判断当前节点是否有children字段以及children字段是否为空，如果为空或者没有此字段，则渲染当前节点，如果此字段有数据，则需要先渲染当前节点，然后生成一个以group-当前节点唯一标识为name的组，遍历当前节点children数据，执行根据主对象A的节点数据及配置渲染3D元素，并继承主对象A的通用方法的操作，此时，所有节点元素加入父级的group。
在一些可选的实施方案中，当切换、删除3D元素时调用主对象A或者具体的3D元素所挂载的清除内存方法以释放当前3D元素及其子孙元素占用的内存。
在一些可选的实施方案中，完成渲染后，需要后续的交互，或者动态变化时，调用挂载的各种方法以实现所需的效果。
总体而言，通过本发明所构思的以上技术方案与现有技术相比，能够取得下列有益效果：
本发明通过提供一个在web开发时使用的js文件和初始化方法，这个方法中传入3D场景的各项参数、节点数据即可完成3D场景渲染。将本方法应用于大数据、态势、拓扑、物流监控等复杂数据应用场景，web研发人员能够通过简单配置，像开发、操作2D界面的DOM一样方便快捷地创建3D场景，实现3D渲染，且后续维护简单快捷。
附图说明
图1是本发明实施例提供的一种复杂数据3D可视化简化开发方法的流程示意图；
图2是本发明实施例提供的一种复杂数据3D可视化简化开发方法的渲染3D元素流程示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。此外，下面所描述的本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可以相互组合。
本发明的技术思路是：在进行3D渲染之前，引入一个在web开发时使用的js文件，然后通过初始化方法，初始化方法中传入需要渲染的3D场景的各项参数、节点数据即可完成3D场景渲染。
本发明基于上述传入的各项参数、节点数据创建主对象A并挂载通用方法(包括：生成飞线、根据geojson数据渲染3D地图、清除内存、重载、获取父元素、获取子元素、获取兄弟元素、添加元素、删除元素等)。然后根据主对象A的参数生成基本元素、绑定浏览器事件和传入节点数据中的回调函数。然后根据传入参数的节点数据渲染3D元素，并继承通用方法。最终完成渲染过程。
进一步地，当切换、删除3D元素时调用主对象A或者具体的3D元素所挂载的"清除内存"方法即可方便、彻底地释放当前3D元素及其子孙元素占用的内存。
进一步地，完成渲染后，需要后续的交互，或者动态变化时，调用挂载的各种方法即可快捷地实现想要的效果。
如图1所示，本发明方法包括以下步骤：
第一步：根据传入的参数创建主对象A，放入需要渲染的3D场景的各项参数和节点数据；
其中，所有参数不是全部必须的，而是指本发明支持的，在本发明实施例中，参数包括：
1)光照，接收第一个string类型参数，即场景中的光照类型(环境光，直射光，点光源等)。接收第二个object类型参数，设定光源的属性。如果第二个参数为空，则光源属性为经过本发明调试的默认参数。如果整条为空值则由用户自行生成光源。
2)相机，接收第一个string类型参数，即场景中的相机类型(正交相机，透视相机，立体相机等)。接收第二个object类型参数，设定相机的属性。如果第二个参数为空，则相机属性为经过本发明调试的默认参数。如果整条为空值则由用户自行生成相机。
3)渲染器，布尔类型，为true则生成渲染器，参数为经过本发明调试的默认参数；为false则由用户自行生成渲染器。
4)控制器，布尔类型，为true则生成控制器，参数为经过本发明调试的默认参数；为false则由用户自行生成控制器。
5)窗口大小监控，布尔类型，为true则生成窗口大小监控功能，当窗口大小改变时每1秒触发1次重新渲染，防止重新渲染次数过多耗费资源，直到窗口大小停止改变；为false则不生成窗口大小监控功能。
6)节点数据，array类型，即根据需要3D渲染的原始数据配置而成的渲染数据。所有配置项不是全部必须的，而是指本发明支持的。具体配置如下：
配置一：当条数据原始数据。
配置二：位置，值为空则根据当条数据渲染的3D元素位置为场景中心，或者父级的中心。值为[x,y,z]坐标，则为相对于场景或者父级的坐标。值为object类型，且包含经纬度坐标，则渲染位置为经纬度转换的墨卡托坐标。
配置三：模型，object类型，可以为外部引入模型(fbx,obj,gltf等)或者内置模型(立方体，球体等)。
配置四：事件回调函数，function类型。分为点击事件、鼠标悬浮事件、鼠标离开事件、双击事件、右键点击事件，不同事件function对应不同字段，例如：onClick:function(data){//do something}。之所以能够这样绑定事件，是因为本发明在生成3D元素后，把当前元素放入上述主对象A的用于存放各类不同事件的数组中，监听渲染3D场景的DOM元素的各类事件，在触发的事件逻辑中写入了如下逻辑：首先，通过鼠标位置标准设备坐标和相机参数从事件触发位置发射一根射线，传入上述存放在主对象A的对应事件的数组，如果该方法返回值为空则表示未操作到元素，如果有元素则取第一个(第一个表示离事件位置最近)。然后，触发取到的元素的对应事件回调函数。
配置五："children"字段，array类型，如果为空表示当前节点没有子节点。不为空表示有子节点，子节点规则与"节点数据"规则相同。
配置六：标签，object类型。包括：
标签类型：2D标签(不跟随镜头转动，跟随3D元素移动)；3D标签(跟随镜头转动，跟随3D元素移动)；气泡标签(不跟随镜头转动，始终指向3D元素)。
标签内容：标签内显示的内容。
标签偏移量：标签在x,y,z三个方向的偏移量。
配置七：唯一标识，设置元素name属性为原始数据中的唯一标识。
第二步：给主对象A挂载通用方法；
在本发明实施例中，通用方法包括：
方法一：生成飞线，接收4个参数，分别为飞线起始元素，飞线结尾元素，控制点坐标数组，是否加载动画。根据传入参数拿到起始与结尾坐标，再结合控制点坐标获取一条曲线路径，最后由曲线路径生成飞线。如果加载动画则加载贴图定时偏移的飞线材质。
方法二：根据geojson数据渲染3D地图，加载geojson数据并解析，获取每个省份的经纬度，使用自定义算法将经纬度转为墨卡托坐标值，最后使用这些坐标值合成路径，使用挤压几何体生成一个有深度的地图形状。同时坐标值也可以当作顶点，用来画每个省的边缘线。至此已经可以得到一个3D地图。
方法三：清除内存，在生成节点时，本发明将存放当前节点指向的变量放入当前节点的一个命名为resMgr的数组中，同时放入父级的resMgr数组中，层层往上直到主对象A。当调用节点的清除缓存方法时，遍历节点的resMgr，清除每一条的模型、材质等内存，以及每一条的children中的模型、材质等内存。最后调用父级的移除方法，移除当前节点。
方法四：重载，调用根节点清除内存方法，然后再执行一遍渲染逻辑。
方法五：获取父元素，在生成节点时，给节点添加parentID字段(值为上一级的唯一标识)，即可根据此字段获取父元素。
方法六：获取子元素，首先获取当前节点数据，获取当前节点children中的数据即可。
方法七：获取兄弟元素，在生成节点时，给节点添加一个数组，数组中存放同级除自身以外的节点的唯一标识，根据此数组即可获取兄弟元素。
方法八：添加元素，根据唯一标识获取当前元素组，在组中添加新元素。
方法九：删除元素，调用要删除的元素的清除内存方法。
第三步：根据主对象A的参数生成场景、光照、相机、渲染器、控制器、窗口大小监控等基本元素，进一步地监控浏览器窗口大小改变事件给渲染器传入新的宽高数据，给相机传入新的根据视窗大小比例的数据，最后调用渲染函数；
如图2所示，第四步：根据主对象A的节点数据及配置渲染3D元素，并继承主对象A的通用方法；
首先，创建一个总的group组用来装载所有节点，并把此group加到场景scene中。
进一步地，加载节点数据的模型，设置模型的坐标为节点数据坐标，挂载原始数据到节点上。
进一步地，把当前元素放入上述主对象A的用于存放各类不同事件的数组中，监听渲染3D场景的DOM元素的各类事件，在触发的事件逻辑中写入了如下逻辑：首先，通过鼠标位置标准设备坐标和相机参数从事件触发位置发射一根射线，传入上述存放在主对象A的对应事件的数组，如果该方法返回值为空则表示未操作到元素，如果有元素则取第一个(第一个表示离事件位置最近)事件即可触发取到的元素的对应事件回调函数。
进一步地，将存放当前节点指向的变量放入当前节点的一个命名为resMgr的数组中，同时放入父级的resMgr数组中，层层往上直到主对象A。
进一步地，给节点添加parentID字段(值为上一级的唯一标识)。
进一步地，给节点添加一个数组，数组中存放同级除自身以外的节点的唯一标识。
进一步地，给节点添加当前节点原始数据中的唯一标识。
进一步地，给节点添加标签。标签类型为2D时使用CSS2DRenderer根据数据渲染，3D标签时使用css3DRenderer根据数据渲染，为气泡标签时使用CSS2DRenderer渲染一段html，这段html中包含一条位于左下角的斜线，以及装载内容的气泡，为了使斜线左下永远指向当前节点的3D元素，需要修改CSS2DRenderer渲染模式为以左下角为坐标指向初始点。
进一步地，判断当前节点是否有children字段以及children字段是否为空。如果为空或者没有此字段，则执行上述步骤即可。如果此字段有数据，则需要先执行上述步骤渲染当前节点，然后生成一个以"group-当前节点唯一标识"为name的组。遍历当前节点children数据，执行当前第四步的操作，区别在于，所有节点元素加入父级的group。
第五步：调用渲染函数渲染，结束。
需要指出，根据实施的需要，可将本申请中描述的各个步骤/部件拆分为更多步骤/部件，也可将两个或多个步骤/部件或者步骤/部件的部分操作组合成新的步骤/部件，以实现本发明的目的。
本领域的技术人员容易理解，以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。
Claims (8)
1.一种基于web的复杂数据3D可视化简化开发方法，其特征在于，基于js文件实现，所述方法包括：
传入需要渲染的3D场景的各项参数和节点数据，根据传入的各项参数和节点数据创建主对象A，其中，主对象A中放入需要渲染的3D场景的各项参数和节点数据；
给主对象A挂载通用方法；
根据主对象A的参数生成场景、光照、相机、渲染器、控制器及窗口大小监控，并监控浏览器窗口大小改变事件给渲染器传入新的宽高数据，给相机传入新的根据视窗大小比例的数据；
根据主对象A的节点数据及配置渲染3D元素，并继承主对象A的通用方法；
调用渲染函数渲染。
2.根据权利要求1所述的方法，其特征在于，需要渲染的3D场景的各项参数和节点数据包括：
光照，接收第一个string类型参数用于表示场景中的光照类型，接收第二个object类型参数用于设定光源的属性，若第二个参数为空，则光源属性为经过调试的默认参数，如果整条为空值则由用户自行生成光源；
相机，接收第一个string类型参数用于表示场景中的相机类型，接收第二个object类型参数用于设定相机的属性，如果第二个参数为空，则相机属性为经过调试的默认参数，如果整条为空值则由用户自行生成相机；
渲染器，为布尔类型，为true则生成渲染器，参数为经过调试的默认参数；为false则由用户自行生成渲染器；
控制器，为布尔类型，为true则生成控制器，参数为经过调试的默认参数；为false则由用户自行生成控制器；
窗口大小监控，为布尔类型，为true则生成窗口大小监控功能，当窗口大小改变时每1秒触发1次重新渲染，直到窗口大小停止改变；为false则不生成窗口大小监控功能；
节点数据，为array类型，根据需要3D渲染的原始数据配置而成的渲染数据。
3.根据权利要求2所述的方法，其特征在于，节点数据中的配置包括：
当条数据的原始数据；
位置，值为空则根据当条数据渲染的3D元素位置为场景中心，或者父级的中心，值为[x,y,z]坐标，则为相对于场景或者父级的坐标，值为object类型，且包含经纬度坐标，则渲染位置为经纬度转换的墨卡托坐标；
模型，object类型，为外部引入模型或者内置模型；
事件回调函数，function类型，分为点击事件、鼠标悬浮事件、鼠标离开事件、双击事件及右键点击事件，不同事件function对应不同字段；
children字段，array类型，如果为空则表示当前节点没有子节点，不为空则表示当前节点有子节点；
标签，object类型，包括：标签类型：2D标签、3D标签、及气泡标签，标签内容：标签内显示的内容，标签偏移量：标签在x,y,z三个方向的偏移量；
唯一标识，设置元素name属性为原始数据中的唯一标识。
4.根据权利要求1至3任意一项所述的方法，其特征在于，给主对象A挂载的通用方法，包括：生成飞线、根据geojson数据渲染3D地图、清除内存、重载、获取父元素、获取子元素、获取兄弟元素、添加元素及删除元素。
5.根据权利要求4所述的方法，其特征在于，清除内存包括：
在生成节点时，将存放当前节点指向的变量放入当前节点的一个命名为resMgr的数组中，同时放入父级的resMgr数组中，层层往上直到主对象A，当调用节点的清除缓存方法时，遍历节点的resMgr，清除每一条的模型及材质，以及每一条的children中的模型及材质，最后调用父级的移除方法，移除当前节点。
6.根据权利要求5所述的方法，其特征在于，根据主对象A的节点数据及配置渲染3D元素，并继承主对象A的通用方法，包括：
创建一个总的group组用来装载所有节点，并把此group加到场景scene中；
加载节点数据的模型，设置模型的坐标为节点数据坐标，挂载原始数据到节点上；
把当前元素放入主对象A的用于存放各类不同事件的数组中，监听渲染3D场景的DOM元素的各类事件，在触发的事件逻辑中写入了如下逻辑：通过鼠标位置标准设备坐标和相机参数从事件触发位置发射一根射线，传入存放在主对象A的对应事件的数组，若返回值为空则表示未操作到元素，若有元素则获取离事件位置最近的元素，然后，触发获取到的元素的对应事件回调函数；
将存放当前节点指向的变量放入当前节点的一个命名为resMgr的数组中，同时放入父级的resMgr数组中，层层往上直到主对象A，给节点添加parentID字段，值为上一级的唯一标识，给节点添加一个数组，数组中存放同级除自身以外的节点的唯一标识，给节点添加当前节点原始数据中的唯一标识，给节点添加标签；
判断当前节点是否有children字段以及children字段是否为空，如果为空或者没有此字段，则渲染当前节点，如果此字段有数据，则需要先渲染当前节点，然后生成一个以group-当前节点唯一标识为name的组，遍历当前节点children数据，执行根据主对象A的节点数据及配置渲染3D元素，并继承主对象A的通用方法的操作，此时，所有节点元素加入父级的group。
7.根据权利要求6所述的方法，其特征在于，当切换、删除3D元素时调用主对象A或者具体的3D元素所挂载的清除内存方法以释放当前3D元素及其子孙元素占用的内存。
8.根据权利要求7所述的方法，其特征在于，完成渲染后，需要后续的交互，或者动态变化时，调用挂载的各种方法以实现所需的效果。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310347492.0A CN116402937A (zh) | 2023-03-30 | 2023-03-30 | 一种基于web的复杂数据3D可视化简化开发方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310347492.0A CN116402937A (zh) | 2023-03-30 | 2023-03-30 | 一种基于web的复杂数据3D可视化简化开发方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116402937A true CN116402937A (zh) | 2023-07-07 |
Family
ID=87013713
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310347492.0A Pending CN116402937A (zh) | 2023-03-30 | 2023-03-30 | 一种基于web的复杂数据3D可视化简化开发方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116402937A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117541204A (zh) * | 2023-11-20 | 2024-02-09 | 科学城(广州)信息科技集团有限公司 | 基于三维虚拟仿真技术实现的全球跨域引才方法及装置 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1568486A (zh) * | 2001-10-11 | 2005-01-19 | 株式会社亚派 | Web 3D图像显示系统 |
| CN107832108A (zh) * | 2016-09-14 | 2018-03-23 | 阿里巴巴集团控股有限公司 | 3D canvas网页元素的渲染方法、装置及电子设备 |
| KR102176837B1 (ko) * | 2019-08-19 | 2020-11-10 | 공간정보기술 주식회사 | 웹 기반 3차원 고속화 렌더링 편집 시스템 및 그 방법 |
| WO2022104786A1 (zh) * | 2020-11-23 | 2022-05-27 | 深圳晶泰科技有限公司 | 多Web 3D场景离屏渲染方法 |
| CN114842117A (zh) * | 2022-04-06 | 2022-08-02 | 邦彦技术股份有限公司 | 数据处理方法、电子设备及存储介质 |
| CN114968234A (zh) * | 2022-04-27 | 2022-08-30 | 安徽深迪科技有限公司 | 一种基于Web浏览器的高性能3D数据渲染方法 |
-
2023
- 2023-03-30 CN CN202310347492.0A patent/CN116402937A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1568486A (zh) * | 2001-10-11 | 2005-01-19 | 株式会社亚派 | Web 3D图像显示系统 |
| CN107832108A (zh) * | 2016-09-14 | 2018-03-23 | 阿里巴巴集团控股有限公司 | 3D canvas网页元素的渲染方法、装置及电子设备 |
| KR102176837B1 (ko) * | 2019-08-19 | 2020-11-10 | 공간정보기술 주식회사 | 웹 기반 3차원 고속화 렌더링 편집 시스템 및 그 방법 |
| WO2022104786A1 (zh) * | 2020-11-23 | 2022-05-27 | 深圳晶泰科技有限公司 | 多Web 3D场景离屏渲染方法 |
| CN114842117A (zh) * | 2022-04-06 | 2022-08-02 | 邦彦技术股份有限公司 | 数据处理方法、电子设备及存储介质 |
| CN114968234A (zh) * | 2022-04-27 | 2022-08-30 | 安徽深迪科技有限公司 | 一种基于Web浏览器的高性能3D数据渲染方法 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117541204A (zh) * | 2023-11-20 | 2024-02-09 | 科学城(广州)信息科技集团有限公司 | 基于三维虚拟仿真技术实现的全球跨域引才方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11003422B2 (en) | Methods and systems for visual programming using polymorphic, dynamic multi-dimensional structures | |
| KR101087427B1 (ko) | ３차원 장면 계층구조를 ２차원 합성 시스템으로 통합하기 위한 컴퓨터로 구현된 방법 및 컴퓨터 판독가능 기록 매체 | |
| RU2324229C2 (ru) | Визуальный и пространственный графические интерфейсы | |
| US5712964A (en) | Computer graphics data display device and method based on a high-speed generation of a changed image | |
| CN113781626B (zh) | 遍历在射线追踪中使用的数据的技术 | |
| US8352443B1 (en) | Representing scene description in databases | |
| EP1462998A2 (en) | Markup language and object model for vector graphics | |
| CN1710607A (zh) | 一种面向虚拟现实三维图形引擎的三维场景组织方法 | |
| KR20070011062A (ko) | 모델 3ｄ 구성 애플리케이션 프로그램 인터페이스 | |
| CN110503718B (zh) | 三维工程模型轻量化显示方法 | |
| CN110503709A (zh) | 一种实现数据中心加载呈现大规模Web3D模型的方法 | |
| US8031190B2 (en) | Translating two-dimensional user input on three-dimensional scene | |
| CN116402937A (zh) | 一种基于web的复杂数据3D可视化简化开发方法 | |
| CN105511890B (zh) | 一种图形界面更新方法和装置 | |
| US6925473B2 (en) | Staged stylization in multiple tiers | |
| Song et al. | A real-time interactive data mining and visualization system using parallel computing | |
| US10529100B2 (en) | Interaction-driven format for graph visualization | |
| CN116719521A (zh) | 一种示教器型号编辑方法、系统及组态软件系统 | |
| CN116109767A (zh) | 三维场景的渲染方法、图像处理器、电子设备及存储介质 | |
| CN114090666A (zh) | 幻灯片显示方法、装置、设备以及存储介质 | |
| CN114791986A (zh) | 三维信息模型的处理方法和装置 | |
| Sons et al. | xml3d. js: Architecture of a Polyfill Implementation of XML3D | |
| CN112184874A (zh) | 一种轻量化三维模型高性能图形标记、进度模拟及导航方法 | |
| Zabiniako et al. | Supporting visual techniques for graphs data analysis in three-dimensional space | |
| CN117035067B (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 |