DEJA_VU3D - Cesium功能集 之 071-编辑gltf（平移+旋转）

最新推荐文章于 2024-03-27 13:56:43 发布
最新推荐文章于 2024-03-27 13:56:43 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： DEJA_VU3D - Cesium功能集（附源码） 文章标签： Cesium VUE GIS javascript gltf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34205305/article/details/126755813
版权

前言 

编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合，有自己琢磨实现的，也有参考其他大神后整理实现的，初步算了算现在有差不多实现小130个左右的功能，后续也会不断的追加，所以暂时打算一周2-3更的样子来更新本专栏（尽可能把代码简洁一些）。博文内容如存在错误或者有可改进之处，也希望在这里和各位大佬交流提高一下。

更多内容/样例/demo说明：DEJA_VU3D完整功能目录 

专栏内容本着尽可能简洁的原则，上篇文章我们介绍了基于Cesium对3Dtiles模型数据的编辑操作编辑3Dtiles（平移+旋转），本篇我们来介绍实现基于Cesium对gltf或者glb模型的编辑操作，包括平移和旋转效果。最终大致效果如下：

加载gltf或者

了解本专栏 订阅专栏 解锁全文
总要学点什么
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
订阅专栏
DEJA_VU3D - Cesium功能集 之 070-编辑3Dtiles（平移+旋转）
总得学点什么的博客
09-07 2131
本篇我们就来介绍实现基于Cesium对3Dtiles模型数据的编辑操作，包括平移和旋转效果，包括完整源代码
Cesium模型调整
12-22
大家下载了之后，把资源替换成你本地的，然后看下控制台，有的方法得自己改下，别再问为啥跑不了了。
cesium模型的旋转、平移和缩放带辅助操作
weixin_44265800的博客
10-13 8851
cesium模型的旋转、平移和缩放 带辅助轴线
VUE3-Cesium（Cesium3DTileStyle-3dtiles样式更改）
damadashen的博客
06-14 6660
Cesium中3dtile模型样式的给更改，Cesium3DTileStyle详解及案例
cesium实用功能-选中gltf、glb拖动修改位置，bim没试
weixin_39216318的博客
01-10 1997
function createModel() { let leftDownFlag = false; let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); var params = { tx: 94.94663004042711, //模型中心X轴坐标(经度，单位：十进制度) ty: 29.74529725388329,//模型中心Y轴坐标(纬度，单位：十进制度) ...
Cesium加载3Dtiles模型的平移和旋转
最新发布
white_mo的博客
03-27 1732
假设模型需要平移(x, y, z)量，先计算局部坐标系中点(x, y, z)在世界坐标下的位置(xworld, yworld, zworld)模型旋转时，由于Cesium默认绕轴旋转是绕世界坐标系轴旋转，因此我们需要做如下操作完成绕局部坐标轴旋转。将局部Z轴回到原本的指向，即刚刚旋转的角度取负值，此处需要注意变换的顺序，后进行的变换先复位。将模型绕世界坐标系的某个轴旋转（真正进行旋转的矩阵），此处以Z轴为例，矩阵记为R。先将红线表示的向量（z'轴）绕Z轴顺时针旋转Φ度，再绕Y轴顺时针旋转θ度。
Cesium模型编辑
xt3d的博客
05-12 740
Cesium模型编辑 实现效果 关键代码 let mx = Cesium.Matrix3.fromRotationX( Cesium.Math.toRadians(this.opts.rx) ); let my = Cesium.Matrix3.fromRotationY( Cesium.Math.toRadians(this.opts.ry) ); let mz = Cesiu
cesium 模型位置编辑、旋转、节点定位.txt
weixin_42193179的博客
08-01 3985
var that = this; var longitude = this.config.position.longitude; var latitude = this.config.position.latitude; var height = this.config.position.height; var heading = 0; if(this.config.position.head...
Cesium|xt3d模型编辑
xt3d的博客
03-06 707
Cesium|xt3d模型编辑效果代码预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conten
Cesium地图中加载的建筑模型3D model 模型 gltf格式建筑模型
04-24
从谷歌地球下载的深圳市福田区的几个建筑模型， 自行转换为gltf格式了。 直接在cesium代码中就能加载调用。。。一共6个模型， 深圳图书馆， 深圳市民中心 深圳音乐厅 深圳证券交易所 。。。
cesium/threejs可视化某BIM模型
07-30
cesium和threejs对某个BIM模型实现的可视化，包括代码和数据。
96.（cesium篇）cesium动态单体化-3D建筑物（楼层）.rar
07-08
该资源包的执行效果查看地址：...“地图之家”专栏中的“96.（cesium篇）cesium动态单体化-3D建筑物（楼层）”。如下载有问题，可联系博主。 解压密码：cesium
基于Cesium+VUE实现模拟卫星轨道（高空）效果组件，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-27
基于Cesium+VUE实现模拟卫星轨道（高空）效果组件，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/125493400 代码不易，略收小费，使用过程中...
【精选】摄影测量（三）：单张像片解析基础_deja_vu97的博客-CSDN博客.html
11-05
【精选】摄影测量（三）：单张像片解析基础_deja_vu97的博客-CSDN博客.html
deja-vu:Vue.js的非常轻量级的组件库
05-26
Deja vu for Vue 2 一个非常轻巧的基于Vue的UI库安装npm install deja-vu --save-dev快速开始 import Vue from 'vue'import DejaVu from 'deja-vu'Vue . use ( DejaVu )供参考这是一个正在开发的项目，请不要使用它...
deja-vu：永无止境的漫画
02-18
deja-vu：永无止境的漫画
cesium编辑功能CesiumEdit.js
qq_37121832的博客
03-14 771
cesium编辑功能CesiumEdit.js
Cesium入门之十：Cesium加载3DTiles数据
热门推荐
九仞山的专栏
06-13 1万+
详细介绍了3DTiles文件的数据结构及Cesium加载3DTiles数据的相关类
Cesium 实战 18 - 三维模型（GLB、GLTF）使用 blender 调整位置、坐标轴、比例等
linzi19900517的博客
10-31 5743
项目中有时会遇到模型态势不一致的问题，本文介绍Cesium 三维模型使用 blender 调整位置、坐标轴、比例等。
cesium访问gltf模型的场景对象
09-15
### 回答1： cesium通常使用场景对象来显示3D模型，特别是使用gltf格式的模型。 要在cesium中访问gltf模型的场景对象，你可以使用以下代码： ``` var viewer = new Cesium.Viewer('cesiumContainer'); var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({ url : 'path/to/your/model.gltf' })); ``` 这段代码会创建一个新的cesium视图，然后使用`Model.fromGltf`方法将gltf模型添加到场景中。 模型将作为场景对象的一部分呈现，可以使用常规的场景操作来调整其位置、旋转和缩放。 ### 回答2： Cesium是一个用于创建Web上的3D地球和地图的开源JavaScript库。它支持使用gltf模型来创建丰富的3D场景。 在Cesium中，可以通过Scene对象来访问和操作gltf模型。Scene对象表示整个3D场景，它是Cesium应用程序的核心对象之一。 要在Scene中添加一个gltf模型，可以使用Entity对象。Entity是描述场景中实体的对象，可以包含模型、位置、姿态、缩放等属性。通过创建并配置一个Entity对象，可以将gltf模型加载到场景中。 比如，可以使用Cesium.Cesium3DTileset来加载一个gltf模型。Cesium3DTileset是Cesium中加载和渲染gltf模型的对象。通过设置Cesium3DTileset的url属性为gltf模型文件的URL路径，然后将其添加到Scene中，就可以将该模型加载到场景中显示了。 另外，Cesium还提供了丰富的方法和属性，用于控制和操作加载的gltf模型。可以设置模型的位置、旋转、缩放等属性，还可以通过监听相关事件来实现与模型的交互。 总结来说，Cesium通过Scene对象提供了访问和操作gltf模型的功能，可以通过Entity对象将模型添加到场景中，并通过Cesium3DTileset对象来加载和渲染gltf模型。同时，Cesium还提供了丰富的方法和属性，用于控制和操作模型。通过这些功能，开发者可以创建出丰富多样的3D场景。 ### 回答3： Cesium是一个开源的3D地球浏览引擎，它支持使用gltf模型来创建场景对象。gltf是一种用于表达3D模型和场景现实的格式，具有高效的性能和广泛的兼容性。 要在Cesium中访问gltf模型的场景对象，首先需要加载模型。可以使用Cesium的场景加载器来加载gltf模型文件。加载器会解析模型文件中的场景数据，并创建相应的场景对象。加载过程中可以设置一些选项，如加载器类型（异步加载或同步加载）和模型路径等。 加载完成后，可以通过Cesium的场景对象来访问gltf模型的属性和方法。场景对象提供了一些常用的操作接口，如显示、隐藏、平移、旋转和缩放等。可以根据需求对场景对象进行各种操作，以满足用户的交互需求。 此外，Cesium还支持与gltf模型相关的其他功能，如动画、材质和光照等。可以使用场景对象的方法来控制模型的动画效果，如播放、暂停和重置等。可以修改模型的材质属性，如颜色、透明度和纹理等。还可以添加光源来调节模型的明暗效果。 总之，通过Cesium可以方便地访问gltf模型的场景对象，并对其进行各种操作和控制。这为用户创建交互式的3D场景提供了便利，使得模型的展示和动画效果更加丰富和逼真。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

总要学点什么

相信每一个技术人员的惺惺相惜

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

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

打赏作者

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

抵扣说明：

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

余额充值