第5节：cesium 加载3D Tiles模型（含源码+视频）

已于 2023-06-09 12:01:48 修改
阅读量1.6k 收藏
点赞数
分类专栏： cesium vue 文章标签： cesiumjs cesium cesium 3dtils 3d tiles 3dtiles
于 2023-06-04 00:36:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29384639/article/details/131027630
版权
cesium vue 专栏收录该内容
53 篇文章 263 订阅 ¥59.90 ¥99.00
订阅专栏

结果示例：

在这里插入图片描述

完整源码：

第一步：下载3D Tiles模型

如果是其他模型，可以转为3D Tiles模型，后面会有模型转换教程章节！！！

第二步：渲染3D Tiles模型

核心代码

<template>
  <div class="viewer">
    <vc-viewer @ready="ready"
了解本专栏 订阅专栏 解锁全文
cesium vue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Cesium加载3Dtiles模型的平移和旋转
white_mo的博客
03-27 2000
假设模型需要平移(x, y, z)量，先计算局部坐标系中点(x, y, z)在世界坐标下的位置(xworld, yworld, zworld)模型旋转时，由于Cesium默认绕轴旋转是绕世界坐标系轴旋转，因此我们需要做如下操作完成绕局部坐标轴旋转。将局部Z轴回到原本的指向，即刚刚旋转的角度取负值，此处需要注意变换的顺序，后进行的变换先复位。将模型绕世界坐标系的某个轴旋转（真正进行旋转的矩阵），此处以Z轴为例，矩阵记为R。先将红线表示的向量（z'轴）绕Z轴顺时针旋转Φ度，再绕Y轴顺时针旋转θ度。
cesium 3dtiles 加载本地数据_使用Cesium加载并调整3D Tiles
weixin_39581896的博客
11-22 4178
首先我们先来感受一下实现之后的效果：知乎视频​www.zhihu.com3dtiles简介3D Tiles是用于流式传输大规模异构3D地理空间数据集的开放规范。为了扩展Cesium的地形和图像流，3D Tiles将用于流式传输3D内容，包括建筑物，树木，点云和矢量数据。3D Tiles是目前大火的开源WebGL框架Cesium的御用格式。根据实际体验，3D Tiles和二维地图中的瓦片组织非常相似...
cesium 加载3D建筑模型（3D tiles）
最新发布
weixin_40451732的博客
05-31 1465
上面的模型都是cesium自带的，如果是自己的模型，怎么加载呢？有两种方式：通过方式[官网地址](上传到cesiumion自己的资源中，会生成一个id，然后用前面的方法学习视频参考文章。
cesium单独加载3d模型.txt
11-16
cesium单独加载3d模型
Cesium入门之十：Cesium加载3DTiles数据
热门推荐
九仞山的专栏
06-13 1万+
详细介绍了3DTiles文件的数据结构及Cesium加载3DTiles数据的相关类
cesium-加载3dTiles
孙霸天的专栏
01-08 1万+
cesium-加载3dTiles 3dTiles介绍 3D Tiles是一种开放的三维空间数据标准，其设计目的主要是为了提升大的三维场景中模型的加载和渲染速度。假如要在Web客户端渲染一个非常大的三维模型（如一个大城市的建筑模型），如果把模型全部下载到客户端并且进行渲染，这个过程所消耗的时间对于使用普通电脑的用户来说是不能接受的。然而，在绝大多数的用户交互式的三维场景中，都只需要渲染模型的一小部分，将三维模型全部加载并渲染是一种极大的资源浪费，3D Tiles为这个问题提供了一个很好的解决方案。将三维空间数
【Cesium学习（六）】Cesium加载3D模型（3D tiles和glTF模型）
HAI_GUI的博客
08-17 5416
3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集, 3DTiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是一个优秀的,并且格式公开的数据格式。3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。
cesium-影像图&地形图&3dtiles模型
qq_42129143的博客
01-08 1679
cesium加载影像图层&cesium加载地形图
Cesium 单独加载3D模型
07-17
在本文中，我们将深入探讨如何使用Cesium框架来单独加载3D模型，特别是不包含地球背景的场景。Cesium是一个强大的开源JavaScript库，专为在Web浏览器中展示高精度的3D地理空间数据而设计。它广泛应用于地理信息系统...
基于Electron和Cesium的模型浏览器源码+项目说明.zip
04-11
基于Electron和Cesium的模型浏览器源码+项目说明.zip 基于Electron和Cesium的模型浏览器源码+项目说明.zip 基于Electron和Cesium的模型浏览器源码+项目说明.zip 基于Electron和Cesium的模型浏览器源码+项目说明.zip ...
37.（cesium篇）cesium加载gltf模型（贴地）.zip
06-08
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“37.（cesium篇）cesium加载gltf模型（贴地）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium加载3Dtiles模型-大疆智图
梨子社区
09-18 8778
1.osg2cesiumApp v1.3软件来将我们的OSGB倾斜摄影数据转换成3Dtiles文件进行加载。2.cesiumlab2软件来将我们的OSGB倾斜摄影数据转换成3Dtiles文件进行加载。3.我们可以借助SuperMap的iearth工具来转换。
cesium——加载3DTiles，模型的选中，高亮效果
等花开一起压花路
07-21 3262
这种切片和分层的方式使得数据可以根据需要按需加载，从而降低了网络传输和计算资源的需求。它的开放性和普及性使得很多GIS软件和服务已经支持3DTiles标准，从而为用户和开发人员提供了丰富的工具和资源。使用3DTiles，开发人员可以加载和呈现各种地理数据，如建筑物、地形、植被和其他点云数据等。3DTiles是一种用于组织和传输大规模地理数据的规范，旨在提供一种高效、可扩展的方式来加载和显示复杂的3D模型。总之，3DTiles为地理数据的可视化和交互提供了一种全新的方式。
cesium在3dtiles上动态绘制面怎么做
misswell的博客
02-22 781
在上面的代码中，我们使用Cesium.Geometry和Cesium.GeometryInstance类创建几何图形，使用Cesium.Primitive类将其添加到场景中，并使用Cesium.PerInstanceColorAppearance类来为每个面设置颜色。这个示例中绘制的是三角形面，如果需要绘制其他形状的面，只需要更改顶点坐标和顶点索引即可。在加载完成后，您可以使用Cesium3DTileFeature类来访问3D Tiles中的每个要素。在3D Tiles加载完成后，使用。
19.（cesium篇）cesium接入加载3D城市建筑物（离线）
地图之家
07-22 4741
19.（cesium篇）cesium接入加载3D城市建筑物（离线）
Cesium教程(十一)：三维模型加载
WwLK123的博客
06-03 3316
这些主要是桌面软件多支持的数据格式，结构较为复杂，不适于网络传输。因此，Khronos公司特别推出GL传输格式（三维模型数据格式种类多样，常见的有DAE、OBJ、STL、3DS MAX、CLM、IFC等数据格式。）数据格式，glTF是Cesium三维数据传输渲染的数据标准。glTF的特点就是传输和解析高效。
cesium之3D tiles格式介绍
whl0071的专栏
07-26 6728
3DTILES.JSON文件格式说明
Cesium 加载3Dtiles数据-最佳方法对比
qq_49491645的博客
11-16 4001
加载3D tileset文件，这里我封装成了一个函数实现数据的加载效果，利用Cesium的scene.primitives.add实现数据路径的读取，没有错误后就证明出来数据读取成功。完成以上步骤后，利用Cesium的readyPromise函数对数据自动化解析，关于这个函数的使用方法可以自行参考Cesium中文网站上的解析，在此不一一赘述（Cesium加载空间数据的方法有很多种，网络上关于3Dtiles数据集加载的废话连篇，看着就很无语。
cesium示例集--8.如何在cesium中加载3dtiles模型数据
u012830884的博客
11-03 1169
这里要注意的是，地形深度检测的开启，可能会影像到模型的高度问题，可根据实际情况，来判断是否要开启地形检测，以及groundOffset的值。如何在cesium中加载3dtiles模型数据?如此，一个模型就加载好了。
cesium加载分级3d模型
07-01
### 回答1： Cesium是一个用于构建和展示地球上三维场景的开源平台。它支持加载和显示不同级别的3D模型，使用户能够以不同的细节级别观察地球上的物体。 加载分级3D模型的过程大致可分为以下几个步骤： 1. 准备3D模型：首先，需要将3D模型准备好。通常，3D模型需要以COLLADA (.dae)、glTF (.gltf) 或3D Tiles (.3dtiles)等格式存在。 2. 配置Cesium：在代码中配置Cesium以使用3D模型。这包括引入Cesium库、创建Cesium的Viewer对象，并设置它的一些属性，比如视图容器和底图。 3. 加载3D模型：使用Cesium提供的加载函数，将3D模型引入Cesium的场景中。这可以通过调用Cesium的load函数来实现。在load函数中，需要指定3D模型的URL、加载完成后的回调函数等参数。 4. 调整模型的显示级别：Cesium允许用户根据需要调整模型的显示级别。通过设置3D模型的加载选项，可以控制模型的显示范围、LOD（层次细节）以及其他参数。这样，用户可以根据场景的远近和观察需求，动态地控制模型的显示细节。 5. 实时交互与更新：一旦3D模型加载完成并显示在Cesium的场景中，用户可以与模型进行交互，例如平移、缩放和旋转。同时，用户还可以实时更新模型的状态，比如改变颜色、位置等属性。 通过上述步骤，我们可以很方便地使用Cesium加载分级3D模型，并根据需要对模型进行进一步的定制和交互。Cesium在加载和展示3D模型方面具有强大的功能和灵活性，可满足各种场景下的需求。 ### 回答2： Cesium是一种用于构建地球和空间场景的开源JavaScript库，它可以实现加载和展示分级3D模型。分级3D模型是一种将地球表面上的物体（如建筑物、植被等）分成多个层次，从而实现详细的展示和交互的技术。下面将介绍cesium如何加载和展示分级3D模型。 首先，在使用cesium加载分级3D模型之前，需要准备好模型数据。分级3D模型一般采用LOD（Level of Detail）技术，即将模型的细节层次化，根据距离观察者的远近显示相应层次的细节。因此，需要准备不同层次的模型数据，通常以瓦片（Tile）的形式组织。 接下来，将模型数据与Cesium集成。Cesium提供了一系列API和类，用于加载、显示和控制3D模型。通过以下步骤，将分级3D模型加载到cesium中： 1. 使用Cesium的Tileset类加载分级3D模型的根瓦片。根瓦片是整个模型的入口点，包含了其他瓦片的引用。 2. 根据观察者的位置和视野范围，动态加载相应的瓦片。Cesium的Tileset类会根据观察者的位置和视野范围决定哪些瓦片需要加载和显示。 3. Cesium会根据瓦片的层次关系，自动管理瓦片的加载和卸载。在观察者接近某个瓦片时，Cesium会自动加载该瓦片和其子瓦片；在观察者远离某个瓦片时，Cesium会自动卸载该瓦片和其子瓦片，以节省内存。 最后，根据需要，可以通过Cesium的API实现对分级3D模型的交互和控制。例如，可以调整视角和距离观察者的远近，以查看模型的不同层次细节；也可以通过鼠标操作在模型上进行选取、旋转等操作。 综上所述，通过Cesium可以方便地加载和展示分级3D模型，实现了地球表面物体的详细展示和交互体验。 ### 回答3： Cesium是一个开源的JavaScript库，用于在Web浏览器上创建高性能的3D地理可视化效果。它支持加载和展示各种形式的地理数据，包括分级3D模型。 要加载分级3D模型，我们首先需要将模型数据准备好。通常，这需要从3D建模软件中导出成支持的文件格式，例如glTF或OBJ。这些文件将包含模型的几何数据、纹理贴图和材质信息。 一旦我们准备好模型文件，就可以在Cesium中使用"Model"类来加载模型。 加载模型的步骤如下： 1. 创建一个Cesium的Viewer对象，用于渲染3D场景。 2. 使用Cesium的Cesium.Model类创建一个模型对象。 3. 通过设置模型对象的url属性，指定模型文件的URL地址。 4. 使用Cesium的Viewer.scene.primitives.add方法将模型添加到场景中。 在加载过程中，Cesium会自动解析模型文件，并在场景中根据模型的几何数据和材质信息绘制出模型。默认情况下，模型会放置在地球上的特定位置，但我们也可以通过设置模型对象的position属性来调整模型的位置。 另外，我们还可以通过设置模型对象的scale属性来调整模型的大小，以适应不同的场景需求。 需要注意的是，加载3D模型可能需要一定的时间，特别是对于较大的模型文件或者网络较慢的情况。因此，在加载模型时，我们可以使用Cesium的事件处理机制来显示加载进度或者提供加载动画，以提高用户体验。 总之，Cesium提供了强大的功能来加载和展示分级3D模型，为我们创建令人印象深刻的地理可视化效果提供了便利。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cesium vue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值