CN118071955A - 一种基于Three.JS实现三维地图埋点方法 - Google Patents
一种基于Three.JS实现三维地图埋点方法 Download PDFInfo
- Publication number
- CN118071955A CN118071955A CN202410501025.3A CN202410501025A CN118071955A CN 118071955 A CN118071955 A CN 118071955A CN 202410501025 A CN202410501025 A CN 202410501025A CN 118071955 A CN118071955 A CN 118071955A
- Authority
- CN
- China
- Prior art keywords
- dimensional
- rendering
- dimensional map
- target
- model
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 40
- 238000009877 rendering Methods 0.000 claims abstract description 127
- 230000009466 transformation Effects 0.000 claims abstract description 30
- 230000000694 effects Effects 0.000 claims abstract description 18
- 230000003068 static effect Effects 0.000 claims description 35
- 238000012545 processing Methods 0.000 claims description 33
- 230000003993 interaction Effects 0.000 claims description 12
- 238000002372 labelling Methods 0.000 claims description 9
- 230000033001 locomotion Effects 0.000 claims description 9
- 238000013519 translation Methods 0.000 claims description 8
- 230000011218 segmentation Effects 0.000 claims description 7
- 238000004040 coloring Methods 0.000 claims description 4
- 239000012634 fragment Substances 0.000 claims description 4
- 238000005286 illumination Methods 0.000 claims description 4
- 239000000463 material Substances 0.000 claims description 4
- 238000005520 cutting process Methods 0.000 claims description 3
- 238000006073 displacement reaction Methods 0.000 claims description 3
- 238000012800 visualization Methods 0.000 claims description 3
- 238000006243 chemical reaction Methods 0.000 abstract description 7
- 238000004364 calculation method Methods 0.000 abstract description 5
- 230000019771 cognition Effects 0.000 abstract description 4
- 238000012827 research and development Methods 0.000 abstract description 4
- 230000009286 beneficial effect Effects 0.000 description 9
- 230000000007 visual effect Effects 0.000 description 9
- 238000005516 engineering process Methods 0.000 description 4
- 238000001514 detection method Methods 0.000 description 3
- 238000000605 extraction Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 238000003475 lamination Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012856 packing Methods 0.000 description 2
- 238000007781 pre-processing Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000012216 screening Methods 0.000 description 2
- 241000274965 Cyrestis thyodamas Species 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000013528 artificial neural network Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000013136 deep learning model Methods 0.000 description 1
- 238000003708 edge detection Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000004091 panning Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
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
- G06T17/05—Geographic models
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/26—Visual data mining; Browsing structured data
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/29—Geographical information databases
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/10—Geometric effects
- G06T15/20—Perspective computation
- G06T15/205—Image-based rendering
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Geometry (AREA)
- General Engineering & Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Remote Sensing (AREA)
- Computer Graphics (AREA)
- Software Systems (AREA)
- Computing Systems (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种基于Three.JS实现三维地图埋点方法，包括：基于Blender创建三维地图模型；对三维地图模型进行加载渲染，得到渲染结果；基于Three.JS提供的变换控制器在渲染结果包括的3D空间中对目标控制对象进行变换操作，确定目标控制对象对应的三维空间向量坐标点位信息。利用虚拟化技术情景，提升视觉的易用性，提升对三维空间认知，使得数据信息显示信息越来越栩栩如生化，可以直观生动的展示数据信息，解决平面坐标转换三维空间向量坐标的难度，可直观有效的定位数据信息，无需采集不同版本的坐标点进行转换；无需研发技术人员的介入，埋点之后可直观的看到效果，可实时采集并存储数据，节省在坐标计算上的时间成本，同时提高工作效率。
Description
技术领域
本发明涉及数据采集技术邻域，特别涉及一种基于Three.JS实现三维地图埋点方法。
背景技术
目前，利用百度、高德等地图可以实现数据信息的2D展示效果，技术人员通过第三方采集/提供的经纬度数据，用代码的方式进行转换展示。常用的地图API坐标系有wgs84坐标系（地球坐标系），gcj02坐标系（火星坐标系），bd09坐标系（百度坐标系）。展示echarts地图功能。echarts内置了世界地图、中国及各个省市自治区地图数据，可通过标准GeoJson扩展地图类型，利用API进行数据的标记。现有技术中存在以下技术问题：1.第三方提供的数据偏差比较大，经纬度转换存在一定的误差，通过代码程序转换需要兼容很多不同类型坐标系，需要大量的计算测试才能够将误差缩小，极大的增加了工作难度，从平面坐标系到三维空间向量坐标转换更加的增加了算法的难度，浪费大量的时间。2.传统的地图从视觉效果来讲比较单一，呈现的只能是2D或者2.5D效果，色彩不够丰富，不能虚拟现实的场景，页面单一，情景单一。
发明内容
本发明旨在至少一定程度上解决上述技术中的技术问题之一。为此，本发明的目的在于提出一种基于Three.JS实现三维地图埋点方法，利用虚拟化技术情景，提升视觉的易用性，提升对三维空间认知，使得数据信息显示信息越来越栩栩如生化，可以直观生动的展示数据信息，解决平面坐标转换三维空间向量坐标的难度，可直观有效的定位数据信息，无需采集不同版本的坐标点进行转换；无需研发技术人员的介入，埋点之后可直观的看到效果，可实时采集并存储数据，节省在坐标计算上的时间成本，同时提高工作效率。
为达到上述目的，本发明实施例提出了一种基于Three.JS实现三维地图埋点方法，包括：
基于Blender创建三维地图模型；
对三维地图模型进行加载渲染，得到渲染结果；
基于Three.JS提供的变换控制器在渲染结果包括的3D空间中对目标控制对象进行变换操作，确定目标控制对象对应的三维空间向量坐标点位信息。
根据本发明的一些实施例，基于Blender创建三维地图模型，包括：
基于Blender选择创建对象的基本形状、调整尺寸和位置、进行编辑和变形、添加材质和纹理、调整光照和渲染效果，并进行细节处理，最后导出GLB/GLTF三维模型文件；
根据GLB/GLTF三维模型文件创建三维地图模型。
根据本发明的一些实施例，对三维地图模型进行加载渲染，得到渲染结果，包括：
创建透视摄像机；
初始化渲染器；
基于渲染器通过透视摄像机将渲染场景渲染至三维地图模型，得到渲染结果。
根据本发明的一些实施例，在基于Blender创建三维地图模型后，还包括：
在Blender的3D视图下，根据不同的操作需求，设置不同的交互模式；
基于交互模式对三维地图模型进行修正，得到目标三维地图模型。
根据本发明的一些实施例，所述交互模式包括物体模式及编辑模式；其中，
所述物体模式对物体进行操作的，包括位移、旋转及缩放；
所述编辑模式是对物体进行修改的，包括增加某个面、切割某个面、添加一个物体及设置位置信息。
根据本发明的一些实施例，基于Three.JS提供的变换控制器在渲染结果包括的3D空间中对目标控制对象进行变换操作，确定目标控制对象对应的三维空间向量坐标点位信息，包括：
基于Three.JS提供的变换控制器建立与渲染结果对应的三维模型的绑定关系；
变换控制器是一个三维坐标轴，通过拖动三维坐标轴就可移动与之绑定的三维模型，基于控件对象方法setMode的值实现三维模型的平移、旋转和缩放对应不同的可视化操作，确定目标控制对象对应的三维空间向量坐标点位信息。
根据本发明的一些实施例，基于渲染器通过透视摄像机将渲染场景渲染至三维地图模型，得到渲染结果，包括：
基于透视摄像机对各定位点进行实时实地图像采集，确定各定位点的二维图像；
对二维图像进行3D化处理，得到三维图像；
对三维图像用SIFT描述符进行特征点提取，并分析每一个所述特征点的邻域，确定邻域的属性并标注在三维图像上；
确定透视摄像机的运动轨迹，基于运动轨迹确定若干帧标注邻域的属性的三维图像，根据若干帧标注邻域的属性的三维图像创建目标场景；
对目标场景中包括的对象按照四叉树分割分为若干节点，将若干个节点与三维地图模型进行匹配，根据匹配结果，将匹配的节点的名称及位置渲染至三维地图模型中；
在三维地图模型中确定待渲染的目标区域；
确定目标区域内的目标节点，根据目标节点的特征信息进行渲染，得到渲染结果。
根据本发明的一些实施例，在三维地图模型中确定待渲染的目标区域，包括：
对三维地图模型对应的观察视角的视野范围进行视景体构建，并与三维模型的空间包围立方体进行求交运算，通过节点间空间关系获取位于视景体范围内的包围立方体索引，根据包围立方体索引确定目标区域。
根据本发明的一些实施例，根据目标节点的特征信息进行渲染，得到渲染结果，包括：
将多个目标节点的特征信息分配至多个渲染处理终端；每个渲染处理终端对应一个目标节点；
每个渲染处理终端对分配的目标节点的特征信息进行渲染，得到若干个子渲染结果；
将多个子渲染结果进行拼接，得到渲染结果；
每个渲染处理终端对分配的目标节点的特征信息进行渲染，得到若干个子渲染结果，包括：
获取目标节点的特征信息映射至三维地图模型表面的视频数据，根据视频数据的视频纹理贴合至三维地图模型表面后，基于着色器进行顶点分类及片元分割，基于处理结果通过着色器进行着色，得到子渲染结果。
根据本发明的一些实施例，根据若干帧标注邻域的属性的三维图像创建目标场景，包括：
对每帧标注邻域的属性的三维图像进行分析，确定静态对象和动态对象；
将若干帧三维图像中的同一静态对象基于Texture Packer打包器进行整合，作为一个静态集合，进而得到若干个静态集合；
将若干帧三维图像中的同一动态对象基于Sprite UV2打包器进行整合，作为一个动态集合，进而得到若干个动态集合；
在静态数据库中确定每个静态集合对应的静态场景组件；
在动态数据库中确定每个动态集合对应的动态场景组件；
根据静态场景组件及动态场景组件创建目标场景。
本发明提出了一种基于Three.JS实现三维地图埋点方法，利用虚拟化技术情景，提升视觉的易用性，提升对三维空间认知，使得数据信息显示信息越来越栩栩如生化，可以直观生动的展示数据信息，解决平面坐标转换三维空间向量坐标的难度，可直观有效的定位数据信息，无需采集不同版本的坐标点进行转换；无需研发技术人员的介入，埋点之后可直观的看到效果，可实时采集并存储数据，节省在坐标计算上的时间成本，同时提高工作效率。
本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书以及附图中所特别指出的结构来实现和获得。
下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。
附图说明
附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
图1是根据本发明一个实施例的一种基于Three.JS实现三维地图埋点方法的流程图；
图2是根据本发明一个实施例的对三维地图模型进行加载渲染的方法的流程图；
图3是根据本发明一个实施例的基于渲染器通过透视摄像机将渲染场景渲染至三维地图模型的方法的流程图。
具体实施方式
以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。
如图1所示，本发明实施例提出了一种基于Three.JS实现三维地图埋点方法，包括步骤S1-S3：
S1、基于Blender创建三维地图模型；
S2、对三维地图模型进行加载渲染，得到渲染结果；
S3、基于Three.JS提供的变换控制器在渲染结果包括的3D空间中对目标控制对象进行变换操作，确定目标控制对象对应的三维空间向量坐标点位信息。
上述技术方案的工作原理及有益效果：该实施例中，Blender 是一个开源、跨平台的三维计算机图形软件，它提供了广泛的功能，包括建模、动画、渲染、视频剪辑、特效等，适用于各种领域。首先基于Blender创建三维地图模型，其次对三维地图模型进行加载渲染，得到渲染结果，结合Three.JS提供的API中变换控制器（TransformControls）在3D空间中变换物体，从而获取所需的三维空间向量坐标点位信息，从而实现三维地图中数据信息的采集。主要是结合Three.JS技术和WebGL，随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.JS是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单。Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。利用Three.JS可以制作出很多酷炫的3D效果，并且Three.JS还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。利用虚拟化技术情景，提升视觉的易用性，提升对三维空间认知，使得数据信息显示信息越来越栩栩如生化，可以直观生动的展示数据信息，解决平面坐标转换三维空间向量坐标的难度，可直观有效的定位数据信息，无需采集不同版本的坐标点进行转换；无需研发技术人员的介入，埋点之后可直观的看到效果，可实时采集并存储数据，节省在坐标计算上的时间成本，同时提高工作效率。
根据本发明的一些实施例，基于Blender创建三维地图模型，包括：
基于Blender选择创建对象的基本形状、调整尺寸和位置、进行编辑和变形、添加材质和纹理、调整光照和渲染效果，并进行细节处理，最后导出GLB/GLTF三维模型文件；
根据GLB/GLTF三维模型文件创建三维地图模型。
上述技术方案的工作原理及有益效果：lender模型的建立步骤包括选择基本形状、调整尺寸和位置、进行编辑和变形、添加材质和纹理、调整光照和渲染效果、进行细节处理，最后导出和保存模型，将导出GLB/GLTF三维模型文件。GLB (GL Binary) 和 glTF (GLTransmission Format) 都是用于存储和传输三维模型的文件格式，根据GLB/GLTF三维模型文件创建三维地图模型，便于准确的确定三维地图模型。
如图2所示，根据本发明的一些实施例，对三维地图模型进行加载渲染，得到渲染结果，包括步骤S21-S23：
S21、创建透视摄像机；
S22、初始化渲染器；
S23、基于渲染器通过透视摄像机将渲染场景渲染至三维地图模型，得到渲染结果。
上述技术方案的工作原理及有益效果：创建透视摄像机，初始化渲染器，基于渲染器通过透视摄像机将渲染场景渲染至三维地图模型，得到准确的渲染结果。
根据本发明的一些实施例，在基于Blender创建三维地图模型后，还包括：
在Blender的3D视图下，根据不同的操作需求，设置不同的交互模式；
基于交互模式对三维地图模型进行修正，得到目标三维地图模型。
上述技术方案的有益效果：Blender中对模型进行交互的方式，更加直观便捷的采集需要的空间点位信息。
根据本发明的一些实施例，所述交互模式包括物体模式及编辑模式；其中，
所述物体模式对物体进行操作的，包括位移、旋转及缩放；
所述编辑模式是对物体进行修改的，包括增加某个面、切割某个面、添加一个物体及设置位置信息。
根据本发明的一些实施例，基于Three.JS提供的变换控制器在渲染结果包括的3D空间中对目标控制对象进行变换操作，确定目标控制对象对应的三维空间向量坐标点位信息，包括：
基于Three.JS提供的变换控制器建立与渲染结果对应的三维模型的绑定关系；
变换控制器是一个三维坐标轴，通过拖动三维坐标轴就可移动与之绑定的三维模型，基于控件对象方法setMode的值实现三维模型的平移、旋转和缩放对应不同的可视化操作，确定目标控制对象对应的三维空间向量坐标点位信息。
上述技术方案的工作原理及有益效果：基于Three.JS提供的变换控制器建立与渲染结果对应的三维模型的绑定关系，包括：创建一个Three.JS场景(Scene)，并添加需要渲染的三维模型到场景中；创建一个渲染器(Renderer)并将其绑定到一个HTML元素上；创建一个相机(Camera)并设置其位置，使得可以观察到场景中的三维模型；创建一个变换控制器(TransformControls)并将其绑定到需要控制的三维模型上；在渲染循环中更新变换控制器和渲染器的状态；基于Three.JS提供的变换控制器成功建立与渲染结果对应的三维模型的绑定关系，并且可以通过控制器对模型进行旋转、平移、缩放等操作。TransformControls通过鼠标操控物体移动、缩放、旋转的控件。该控件可以实现可视化操作三维模型，通过选中一个三维模型，然后通过控件对象的方法attach()可以把选中的三维模型与控件TransformControls绑定， 你可以把控件对象TransformControls理解为一个特殊的三维模型，比如平移状态，控件对象TransformControls就是一个三维坐标轴，通过拖动坐标轴就可以移动与坐标轴绑定的三维模型。通过该控件对象方法setMode的值可以实现三维模型的平移、旋转和缩放对应不同的可视化操作，比如平移是通过三维坐标轴实现，旋转通过一个三维圆弧线实现。通过平移、缩放、旋转最终得到我们需要的数据信息。确定目标控制对象对应的三维空间向量坐标点位信息，包括：TransformControls 对象提供了几种模式，可以通过 setMode 方法来设置：平移模式，允许通过拖动坐标轴来移动模型。旋转模式，允许通过拖动环绕模型的圆环来旋转模型。缩放模式，允许通过拖动坐标轴上的方块来缩放模型。获取和控制目标对象的空间向量坐标：使用 TransformControls 来操作模型时，可以通过监听 change 事件来获取目标对象的空间向量坐标。这个事件会在每次变换操作后触发，在这个事件的回调函数中获取目标对象的位置、旋转和缩放信息。调用 controls.update() 来更新变换控制器的状态，并调用 renderer.render(scene,camera) 来渲染场景，在这个过程中，通过 TransformControls 来直观地平移、旋转和缩放模型，并且通过监听事件来获取和处理这些变换操作，准确得到目标控制对象对应的三维空间向量坐标点位信息。
如图3所示，根据本发明的一些实施例，基于渲染器通过透视摄像机将渲染场景渲染至三维地图模型，得到渲染结果，包括步骤S231-S237：
S231、基于透视摄像机对各定位点进行实时实地图像采集，确定各定位点的二维图像；
S232、对二维图像进行3D化处理，得到三维图像；
S233、对三维图像用SIFT描述符进行特征点提取，并分析每一个所述特征点的邻域，确定邻域的属性并标注在三维图像上；
S234、确定透视摄像机的运动轨迹，基于运动轨迹确定若干帧标注邻域的属性的三维图像，根据若干帧标注邻域的属性的三维图像创建目标场景；
S235、对目标场景中包括的对象按照四叉树分割分为若干节点，将若干个节点与三维地图模型进行匹配，根据匹配结果，将匹配的节点的名称及位置渲染至三维地图模型中；
S236、在三维地图模型中确定待渲染的目标区域；
S237、确定目标区域内的目标节点，根据目标节点的特征信息进行渲染，得到渲染结果。
上述技术方案的工作原理及有益效果：基于透视摄像机对各定位点进行实时实地图像采集，确定各定位点的二维图像，包括：设置透视摄像机：首先，需要安装和设置透视摄像机来捕捉各定位点的图像。透视摄像机可以模拟人眼的视角，可以捕捉场景的深度和透视效果。确定定位点：在实地环境中确定各定位点的位置，这些定位点可以是特定的物体、标记或者其他可识别的点。定位点的实时采集：通过透视摄像机实时捕捉各个定位点的图像。这包括确定摄像头的位置、朝向和焦距等参数，以确保能够正确捕捉到所需的图像。图像处理：对采集到的图像进行处理，确定各定位点在二维图像中的位置和信息。涉及到图像识别、特征提取、图像配准等算法，以确保准确地提取出定位点的信息。生成二维图像：最后，根据处理后的数据，生成各定位点的二维图像。可以将这些二维图像保存下来或者用于进一步分析和展示。
该实施例中，对二维图像进行3D化处理，得到三维图像，包括：图像预处理：首先，对输入的二维图像进行必要的预处理，包括去噪、图像增强、边缘检测等处理，以提高后续处理的效果。深度估计：使用计算机视觉技术进行深度估计，即通过二维图像推断出不同区域的深度信息。这可以使用深度学习模型如神经网络进行深度估计。点云生成：根据深度估计的结果，可以生成点云数据，即由一系列的三维点坐标组成的数据结构。这些点代表了二维图像中不同位置的深度信息。表面重建：基于生成的点云数据，可以进行表面重建，即将稀疏的点云数据转换为连续的表面网格，以重建物体的三维形状。纹理映射：将二维图像的纹理映射到生成的三维模型表面上，以赋予模型更真实的外观和细节。渲染和显示：最后，通过渲染引擎将生成的三维模型进行渲染，并可以在屏幕上显示出来。这样就可以从二维图像转换到三维模型，实现了二维图像的3D化处理。
该实施例中，对三维图像用SIFT描述符进行特征点提取，包括：使用SIFT（尺度不变特征变换）描述符进行特征点提取，具体为：特征点检测：首先，对三维图像进行特征点检测，找到图像中具有独特性质和稳定性的关键点。常用的特征点检测算法包括DoG（高斯差分）检测器和Harris角点检测器。关键点定位：对于检测到的特征点，使用尺度空间极值检测方法来定位每个关键点的确切位置，并确定关键点的尺度。关键点描述：对于每个关键点，使用SIFT算法计算其描述符。描述符是一个128维的向量，包含了关键点周围区域的梯度信息，具有良好的鲁棒性和区分度。特征点匹配：将两幅图像中的特征点描述符进行匹配，通常使用最近邻匹配或者基于描述符距离的匹配方法。可以选择适当的匹配策略来提高匹配的准确性。筛选匹配：对匹配的特征点进行筛选和去除错误匹配，可以使用RANSAC等方法来估计模型，并排除外点。便于确定的确定特征点。以特征点为中心，构建相应的领域，领域内的点与特征点的相似性高，默认领域为一个对象，领域的属性即为对象的属性，如静态还是动态等。
该实施例中，确定透视摄像机的运动轨迹，基于运动轨迹确定若干帧标注邻域的属性的三维图像，根据若干帧标注邻域的属性的三维图像准确创建目标场景。
该实施例中，对目标场景中包括的对象按照四叉树分割分为若干节点，将若干个节点与三维地图模型进行匹配，根据匹配结果，将匹配的节点的名称及位置渲染至三维地图模型中，包括：四叉树分割：首先，对目标场景中的对象进行四叉树分割。四叉树是一种树状的数据结构，可以将空间递归地划分为四个象限，直到满足某种终止条件。这样可以将场景中的对象划分为若干个节点，以便之后的匹配和渲染。匹配节点与三维地图模型：将四叉树中的每个节点与三维地图模型进行匹配，可以使用匹配算法（如最近邻匹配、特征匹配等）来找到三维地图模型中与节点匹配的部分。匹配过程中需要考虑节点的形状、位置、特征等信息。获取匹配节点的名称和位置：一旦完成节点与三维地图模型的匹配，可以从匹配结果中获取匹配节点的名称和位置信息。这些信息通常可以从匹配结果中提取出来，以便后续的渲染操作。渲染至三维地图模型：根据匹配得到的节点名称和位置信息，将这些信息渲染到三维地图模型中。可以通过在相应位置添加标签、文字或者模型来展示节点的名称和位置，使用户可以直观地查看这些信息。这个步骤实现对各个节点对三维地图模型的匹配，是粗匹配。
该实施例中，确定目标区域内的目标节点，根据目标节点的特征信息进行渲染，得到渲染结果。首先确定目标区域，确定渲染区域，其次确定相应的目标节点，在粗匹配中完成节点的初步匹配，这里根据目标节点的特征信息进行渲染，得到渲染结果。特征信息为目标节点，即对象的主要的内容，包括位置、形状，大小等。
根据本发明的一些实施例，在三维地图模型中确定待渲染的目标区域，包括：
对三维地图模型对应的观察视角的视野范围进行视景体构建，并与三维模型的空间包围立方体进行求交运算，通过节点间空间关系获取位于视景体范围内的包围立方体索引，根据包围立方体索引确定目标区域。
上述技术方案的工作原理及有益效果：构建视景体：根据观察视角和视野范围，构建视景体。视景体可以看做一个椎体，表示从观察者视点出发的可见区域范围，在三维空间中由视点位置、方向、视角等参数确定。通常包括近裁剪面、远裁剪面、左右裁剪面、上下裁剪面等。与三维模型的空间包围立方体求交：将构建好的视景体与三维模型中的空间包围立方体进行求交运算。空间包围立方体通常用于快速剔除视野范围外的对象，提高渲染效率。获取包围立方体索引：通过求交运算，可以确定哪些包围立方体与视景体相交。根据这些相交的包围立方体，可以获取相应的索引信息或标识。确定目标区域：根据获取到的包围立方体索引信息，确定位于视景体范围内的目标区域。这些目标区域可能包含在视野范围内的具体对象、场景或区域。可以用于根据观察者的视角动态选择渲染区域，提高渲染效率并优化用户体验。
根据本发明的一些实施例，根据目标节点的特征信息进行渲染，得到渲染结果，包括：
将多个目标节点的特征信息分配至多个渲染处理终端；每个渲染处理终端对应一个目标节点；
每个渲染处理终端对分配的目标节点的特征信息进行渲染，得到若干个子渲染结果；
将多个子渲染结果进行拼接，得到渲染结果；
每个渲染处理终端对分配的目标节点的特征信息进行渲染，得到若干个子渲染结果，包括：
获取目标节点的特征信息映射至三维地图模型表面的视频数据，根据视频数据的视频纹理贴合至三维地图模型表面后，基于着色器进行顶点分类及片元分割，基于处理结果通过着色器进行着色，得到子渲染结果。
上述技术方案的工作原理及有益效果：将多个目标节点的特征信息分配至多个渲染处理终端；每个渲染处理终端对应一个目标节点；每个渲染处理终端对分配的目标节点的特征信息进行渲染，得到若干个子渲染结果；将多个子渲染结果进行拼接，得到渲染结果；便于提高渲染效率及渲染准确性。获取目标节点的特征信息映射至三维地图模型表面的视频数据，根据视频数据的视频纹理贴合至三维地图模型表面后，实现主体的初步贴合，基于着色器进行顶点分类及片元分割，实现进一步对边缘点的贴合，基于处理结果通过着色器进行着色，得到子渲染结果。便于提高渲染的准确性。
根据本发明的一些实施例，根据若干帧标注邻域的属性的三维图像创建目标场景，包括：
对每帧标注邻域的属性的三维图像进行分析，确定静态对象和动态对象；
将若干帧三维图像中的同一静态对象基于Texture Packer打包器进行整合，作为一个静态集合，进而得到若干个静态集合；
将若干帧三维图像中的同一动态对象基于Sprite UV2打包器进行整合，作为一个动态集合，进而得到若干个动态集合；
在静态数据库中确定每个静态集合对应的静态场景组件；
在动态数据库中确定每个动态集合对应的动态场景组件；
根据静态场景组件及动态场景组件创建目标场景。
上述技术方案的工作原理及有益效果：对每帧标注邻域的属性的三维图像进行分析，确定静态对象和动态对象；Texture Packer打包器为用于将多个小纹理图集（textureatlas）或图片打包成一个大的纹理图集。纹理打包是为了提高或应用程序性能和效率，减少纹理切换次数和内存占用。将若干帧三维图像中的同一静态对象基于Texture Packer打包器进行整合，作为一个静态集合，进而得到若干个静态集合；实现对静态对象的准确打包。将若干帧三维图像中的同一动态对象基于Sprite UV2打包器进行整合，作为一个动态集合，进而得到若干个动态集合；Sprite UV2 打包器（Sprite UV2 Packer）是一种用于处理 Sprite（精灵）的 UV2 贴图坐标打包工具，实现对动态对象的准确打包。在静态数据库中确定每个静态集合对应的静态场景组件；在动态数据库中确定每个动态集合对应的动态场景组件；根据静态场景组件及动态场景组件创建目标场景。对静态对象和动态对象分别进行处理，共同创建目标场景，提高创建目标场景的准确性。
显然，本邻域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (10)
1.一种基于Three.JS实现三维地图埋点方法，其特征在于，包括：
基于Blender创建三维地图模型；
对三维地图模型进行加载渲染，得到渲染结果；
基于Three.JS提供的变换控制器在渲染结果包括的3D空间中对目标控制对象进行变换操作，确定目标控制对象对应的三维空间向量坐标点位信息。
2.如权利要求1所述的基于Three.JS实现三维地图埋点方法，其特征在于，基于Blender创建三维地图模型，包括：
基于Blender选择创建对象的基本形状、调整尺寸和位置、进行编辑和变形、添加材质和纹理、调整光照和渲染效果，并进行细节处理，最后导出GLB/GLTF三维模型文件；
根据GLB/GLTF三维模型文件创建三维地图模型。
3.如权利要求1所述的基于Three.JS实现三维地图埋点方法，其特征在于，对三维地图模型进行加载渲染，得到渲染结果，包括：
创建透视摄像机；
初始化渲染器；
基于渲染器通过透视摄像机将渲染场景渲染至三维地图模型，得到渲染结果。
4.如权利要求1所述的基于Three.JS实现三维地图埋点方法，其特征在于，在基于Blender创建三维地图模型后，还包括：
在Blender的3D视图下，根据不同的操作需求，设置不同的交互模式；
基于交互模式对三维地图模型进行修正，得到目标三维地图模型。
5.如权利要求4所述的基于Three.JS实现三维地图埋点方法，其特征在于，所述交互模式包括物体模式及编辑模式；其中，
所述物体模式对物体进行操作的，包括位移、旋转及缩放；
所述编辑模式是对物体进行修改的，包括增加某个面、切割某个面、添加一个物体及设置位置信息。
6.如权利要求1所述的基于Three.JS实现三维地图埋点方法，其特征在于，基于Three.JS提供的变换控制器在渲染结果包括的3D空间中对目标控制对象进行变换操作，确定目标控制对象对应的三维空间向量坐标点位信息，包括：
基于Three.JS提供的变换控制器建立与渲染结果对应的三维模型的绑定关系；
变换控制器是一个三维坐标轴，通过拖动三维坐标轴就可移动与之绑定的三维模型，基于控件对象方法setMode的值实现三维模型的平移、旋转和缩放对应不同的可视化操作，确定目标控制对象对应的三维空间向量坐标点位信息。
7.如权利要求3所述的基于Three.JS实现三维地图埋点方法，其特征在于，基于渲染器通过透视摄像机将渲染场景渲染至三维地图模型，得到渲染结果，包括：
基于透视摄像机对各定位点进行实时实地图像采集，确定各定位点的二维图像；
对二维图像进行3D化处理，得到三维图像；
对三维图像用SIFT描述符进行特征点提取，并分析每一个所述特征点的邻域，确定邻域的属性并标注在三维图像上；
确定透视摄像机的运动轨迹，基于运动轨迹确定若干帧标注邻域的属性的三维图像，根据若干帧标注邻域的属性的三维图像创建目标场景；
对目标场景中包括的对象按照四叉树分割分为若干节点，将若干个节点与三维地图模型进行匹配，根据匹配结果，将匹配的节点的名称及位置渲染至三维地图模型中；
在三维地图模型中确定待渲染的目标区域；
确定目标区域内的目标节点，根据目标节点的特征信息进行渲染，得到渲染结果。
8.如权利要求7所述的基于Three.JS实现三维地图埋点方法，其特征在于，在三维地图模型中确定待渲染的目标区域，包括：
对三维地图模型对应的观察视角的视野范围进行视景体构建，并与三维模型的空间包围立方体进行求交运算，通过节点间空间关系获取位于视景体范围内的包围立方体索引，根据包围立方体索引确定目标区域。
9.如权利要求7所述的基于Three.JS实现三维地图埋点方法，其特征在于，根据目标节点的特征信息进行渲染，得到渲染结果，包括：
将多个目标节点的特征信息分配至多个渲染处理终端；每个渲染处理终端对应一个目标节点；
每个渲染处理终端对分配的目标节点的特征信息进行渲染，得到若干个子渲染结果；
将多个子渲染结果进行拼接，得到渲染结果；
每个渲染处理终端对分配的目标节点的特征信息进行渲染，得到若干个子渲染结果，包括：
获取目标节点的特征信息映射至三维地图模型表面的视频数据，根据视频数据的视频纹理贴合至三维地图模型表面后，基于着色器进行顶点分类及片元分割，基于处理结果通过着色器进行着色，得到子渲染结果。
10.如权利要求7所述的基于Three.JS实现三维地图埋点方法，其特征在于，根据若干帧标注邻域的属性的三维图像创建目标场景，包括：
对每帧标注邻域的属性的三维图像进行分析，确定静态对象和动态对象；
将若干帧三维图像中的同一静态对象基于Texture Packer打包器进行整合，作为一个静态集合，进而得到若干个静态集合；
将若干帧三维图像中的同一动态对象基于Sprite UV2打包器进行整合，作为一个动态集合，进而得到若干个动态集合；
在静态数据库中确定每个静态集合对应的静态场景组件；
在动态数据库中确定每个动态集合对应的动态场景组件；
根据静态场景组件及动态场景组件创建目标场景。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410501025.3A CN118071955B (zh) | 2024-04-25 | 2024-04-25 | 一种基于Three.JS实现三维地图埋点方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410501025.3A CN118071955B (zh) | 2024-04-25 | 2024-04-25 | 一种基于Three.JS实现三维地图埋点方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN118071955A true CN118071955A (zh) | 2024-05-24 |
| CN118071955B CN118071955B (zh) | 2024-07-12 |
Family
ID=91111649
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410501025.3A Active CN118071955B (zh) | 2024-04-25 | 2024-04-25 | 一种基于Three.JS实现三维地图埋点方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN118071955B (zh) |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050083325A1 (en) * | 2003-10-20 | 2005-04-21 | Lg Electronics Inc. | Method for displaying three-dimensional map |
| US20130241926A1 (en) * | 2012-03-14 | 2013-09-19 | Well.Ca Inc. | Systems and methods for transmitting and rendering 3d visualizations over a network |
| US20200219323A1 (en) * | 2019-01-04 | 2020-07-09 | University Of Maryland, College Park | Interactive mixed reality platform utilizing geotagged social media |
| KR102176837B1 (ko) * | 2019-08-19 | 2020-11-10 | 공간정보기술 주식회사 | 웹 기반 3차원 고속화 렌더링 편집 시스템 및 그 방법 |
| US20210109987A1 (en) * | 2019-10-10 | 2021-04-15 | Hover, Inc. | Interactive Path Tracing on the Web |
| CN115082632A (zh) * | 2022-06-29 | 2022-09-20 | 中科星图股份有限公司 | 一种基于WebGL的二维和三维一体化GIS系统及应用 |
| CN116109765A (zh) * | 2022-12-24 | 2023-05-12 | 中科图新(苏州)科技有限公司 | 标注对象的三维渲染方法、装置、计算机设备、存储介质 |
| WO2023138471A1 (zh) * | 2022-01-24 | 2023-07-27 | 阿里巴巴（中国）有限公司 | 三维场景渲染方法、设备以及存储介质 |
| CN117390322A (zh) * | 2023-10-25 | 2024-01-12 | 中国电信股份有限公司 | 虚拟空间构建方法、装置、电子设备及非易失性存储介质 |
| CN117689791A (zh) * | 2024-02-02 | 2024-03-12 | 山东再起数据科技有限公司 | 三维可视化多场景渲染应用集成方法 |
| WO2024055211A1 (zh) * | 2022-09-14 | 2024-03-21 | 北京原创力科技有限公司 | 基于NeRF多景层结合的三维视频重建方法及系统 |
-
2024
- 2024-04-25 CN CN202410501025.3A patent/CN118071955B/zh active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050083325A1 (en) * | 2003-10-20 | 2005-04-21 | Lg Electronics Inc. | Method for displaying three-dimensional map |
| US20130241926A1 (en) * | 2012-03-14 | 2013-09-19 | Well.Ca Inc. | Systems and methods for transmitting and rendering 3d visualizations over a network |
| US20200219323A1 (en) * | 2019-01-04 | 2020-07-09 | University Of Maryland, College Park | Interactive mixed reality platform utilizing geotagged social media |
| KR102176837B1 (ko) * | 2019-08-19 | 2020-11-10 | 공간정보기술 주식회사 | 웹 기반 3차원 고속화 렌더링 편집 시스템 및 그 방법 |
| US20210109987A1 (en) * | 2019-10-10 | 2021-04-15 | Hover, Inc. | Interactive Path Tracing on the Web |
| WO2023138471A1 (zh) * | 2022-01-24 | 2023-07-27 | 阿里巴巴（中国）有限公司 | 三维场景渲染方法、设备以及存储介质 |
| CN115082632A (zh) * | 2022-06-29 | 2022-09-20 | 中科星图股份有限公司 | 一种基于WebGL的二维和三维一体化GIS系统及应用 |
| WO2024055211A1 (zh) * | 2022-09-14 | 2024-03-21 | 北京原创力科技有限公司 | 基于NeRF多景层结合的三维视频重建方法及系统 |
| CN116109765A (zh) * | 2022-12-24 | 2023-05-12 | 中科图新(苏州)科技有限公司 | 标注对象的三维渲染方法、装置、计算机设备、存储介质 |
| CN117390322A (zh) * | 2023-10-25 | 2024-01-12 | 中国电信股份有限公司 | 虚拟空间构建方法、装置、电子设备及非易失性存储介质 |
| CN117689791A (zh) * | 2024-02-02 | 2024-03-12 | 山东再起数据科技有限公司 | 三维可视化多场景渲染应用集成方法 |
Non-Patent Citations (4)
| Title |
|---|
| 姚震;仲梁维;陈彩凤;: "基于Three.js的机械产品展示研究", 软件导刊, no. 05, 15 May 2018 (2018-05-15) * |
| 张文娟;吴琼;曹欣然;: "基于WebGL的三维落叶场景仿真", 计算机技术与发展, no. 06, 24 February 2018 (2018-02-24) * |
| 李玉东;张军;: "地形三维场景实时变换及可视化方法研究", 测绘工程, no. 06, 25 December 2010 (2010-12-25) * |
| 聂帅;秦爽;麦文;: "基于WebGL技术三维模型呈现研究", 计算机产品与流通, no. 07, 7 June 2019 (2019-06-07) * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN118071955B (zh) | 2024-07-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108648269B (zh) | 三维建筑物模型的单体化方法和系统 | |
| CN109360262B (zh) | 基于cad图生成三维模型的室内定位系统及方法 | |
| Li et al. | Read: Large-scale neural scene rendering for autonomous driving | |
| US20170090460A1 (en) | 3D Model Generation From Map Data | |
| US20170091993A1 (en) | 3D Model Generation From Map Data and User Interface | |
| US20130300740A1 (en) | System and Method for Displaying Data Having Spatial Coordinates | |
| CN109242966B (zh) | 一种基于激光点云数据的3d全景模型建模方法 | |
| CN104376594A (zh) | 三维人脸建模方法和装置 | |
| CN110503718B (zh) | 三维工程模型轻量化显示方法 | |
| CN112991558B (zh) | 一种地图编辑方法和地图编辑器 | |
| US8638334B2 (en) | Selectively displaying surfaces of an object model | |
| Li et al. | Outdoor augmented reality tracking using 3D city models and game engine | |
| WO2023231793A9 (zh) | 对物理场景进行虚拟化的方法、电子设备、计算机可读存储介质和计算机程序产品 | |
| CN118071955B (zh) | 一种基于Three.JS实现三维地图埋点方法 | |
| Liu et al. | A 2d and 3d indoor mapping approach for virtual navigation services | |
| Habib et al. | Integration of lidar and airborne imagery for realistic visualization of 3d urban environments | |
| Poux | How to represent 3D Data? | |
| Zhang et al. | Single image 3D reconstruction based on control point grid | |
| McClean | An Augmented Reality System for Urban Environments using a Planar Building Fa cade Model | |
| Ohori et al. | Visualising higher-dimensional space-time and space-scale objects as projections to ℝ3 | |
| Kada | Generalization of 3D building models for map-like presentations | |
| Arroyo Ohori et al. | Visualising higher-dimensional space-time and space-scale objects as projections to R^3 | |
| JPH10111934A (ja) | ３次元形状モデル作成方法及び媒体 | |
| Sherif et al. | Novel robust multilevel 3D visualization technique for web based GIS | |
| Shuvalova et al. | Interactive markerless augmented reality system based on visual SLAM algorithm |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |