【CesiumJS-3】加载倾斜模型数据(3DTilest)以及修改位置

这篇具有很好参考价值的文章主要介绍了【CesiumJS-3】加载倾斜模型数据(3DTilest)以及修改位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引入倾斜模型数据

  // 加载3DTiles数据
  let tileset;
  try {
    tileset = await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json");
    viewer.value.scene.primitives.add(tileset); // 倾斜模型添加到场景中
    viewer.value.zoomTo(tileset); // 视角定位到倾斜模型的位置
  } catch (error) {
    console.log(`Error loading tileset: ${error}`);
  }

await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json")

倾斜模型的数据通过nginx代理本地文件夹以接口的形式获取;如果倾斜模型数据较小可直接放到项目文件Public目录下,以绝对路径的形式引入即可;

nginx代理本地文件夹相关操作链接

cesium.js加载3dtiles格式倾斜摄模型影悬浮空中的解决办法,WebGL,前端,javascript,开发语言

效果展示

调整倾斜模型位置

  let tileset;
  try {
    tileset = await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json");
    viewer.value.scene.primitives.add(tileset);
    viewer.value.zoomTo(tileset);

    // +++++++++
    // 原始点
    let boundingSphere = tileset.boundingSphere;
    let cartographic = Cesium.Cartographic.fromCartesian(
      boundingSphere.center
    );
    let longitude = cartographic.longitude;
    let latitude = cartographic.latitude;
    let height = cartographic.height;
    // 世界坐标
    let origin = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      cartographic.height
    );
    // 偏移后点
    let offset = Cesium.Cartesian3.fromRadians(
      longitude,
      latitude,
      height - 10
    );
    // 计算向量
    let translate = Cesium.Cartesian3.subtract(
      offset,
      origin,
      new Cesium.Cartesian3()
    );
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translate);

    viewer.value.scene.globe.depthTestAgainstTerrain = false; // 开启深度测试
  } catch (error) {
    console.log(`Error loading tileset: ${error}`);
  }

完整代码文章来源地址https://www.toymoban.com/news/detail-850994.html

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const viewer = ref(null);

const initCesium = async () => {
  // 1.引入token
  Cesium.Ion.defaultAccessToken = "xxxxxxxxx";
  // 2.三维地球初始化
  viewer.value = new Cesium.Viewer("cesiumContainer", {
    animation: true, //是否创建动画小器件,左下角仪表
    shouldAnimate: true,
    fullscreenButton: false, //是否显示全屏按钮
    geocoder: false, //是否显示geocoder小器件,右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    scene3DOnly: false, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: false, // 是否显示时间轴
    navigationHelpButton: false,// 是否显示右上角的帮助按钮
    baselLayerPicker: false, // 将图层选择的控件关掉,才能添加其他影像数据
    shadows: false, // 是否显示背影
    baseLayerPicker: false, // 是否显示图层选择器
    orderIndependentTranslucency: false, //去掉大气层黑圈
  });

  // 加载3DTiles数据
  let tileset;
  try {
    tileset = await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json");
    viewer.value.scene.primitives.add(tileset);
    viewer.value.zoomTo(tileset);
    
    // 原始点
    let boundingSphere = tileset.boundingSphere;
    let cartographic = Cesium.Cartographic.fromCartesian(
      boundingSphere.center
    );
    let longitude = cartographic.longitude;
    let latitude = cartographic.latitude;
    let height = cartographic.height;
    // 世界坐标
    let origin = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      cartographic.height
    );
    // 偏移后点
    let offset = Cesium.Cartesian3.fromRadians(
      longitude,
      latitude,
      height - 10
    );
    // 计算向量
    let translate = Cesium.Cartesian3.subtract(
      offset,
      origin,
      new Cesium.Cartesian3()
    );
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translate);

    viewer.value.scene.globe.depthTestAgainstTerrain = false; // 开启深度测试
  } catch (error) {
    console.log(`Error loading tileset: ${error}`);
  }

  //缩放
  viewer.value.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
  ];
  //视图视角切换
  viewer.value.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.PINCH,
    Cesium.CameraEventType.RIGHT_DRAG,
  ];

}

onMounted(() => {
  initCesium();
})
</script>

<style scoped>
#cesiumContainer {
  position: relative;
  width: 100vw;
  height: 100vh;
}
</style>

到了这里,关于【CesiumJS-3】加载倾斜模型数据(3DTilest)以及修改位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Cesium.js加载3dTiles格式倾斜摄模型影悬浮空中的解决办法

    在之前的博文中,已经讲过如何在Cesium中加载3dTiles格式的倾斜摄影模型(Cesium加载3D Tiles模型)。最近发现一个问题,新加载的倾斜摄影模型,都漂浮在空中,无法很好的贴合地面。分析了一些这个问题,可能是由于以下原因造成的: 飞行器的精度 倾斜摄影的参数问题 Ces

    2024年02月12日
    浏览(50)
  • cesium加载3dtiles倾斜摄影数据

    效果如图 倾斜摄影数据的地址:百度网盘 请输入提取码 提取码:ztde 1.配置nginx,代理3dtiles倾斜摄影数据服务 如我的倾斜摄影数据放在D盘的某个文件夹里面,nginx可以这样配置    2.代码里面3dtiles的url指向倾斜摄影服务地址,同时配置一系列的参数 3dtiles的配置参数如下,可

    2024年02月11日
    浏览(46)
  • threejs加载3dtiles(倾斜摄影)数据

    使用npm 安装  或者去官网下载都行 GitHub - NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js 首先引入,在填入3dtiles数据的地址,可以是文件路径也可以是网站路径 const tilesRenderer = new TilesRenderer( \\\'./path/to/tileset.json\\\' ); const tilesRenderer = new TilesRenderer( \\\'http://192.168.1.

    2024年02月16日
    浏览(38)
  • Unity加载3dTile倾斜摄影数据(WebGL)

    1.支持.b3dm(3dtile)格式倾斜摄影数据加载,支持osgb格式倾斜摄影数据加载 2.支持编辑器下加载预览,方便进行场景编辑 3.支持海量的数据量加载 4.多线程LOD算法动态加载卸载 5.支持urp,hdrp等渲染管线 6.支持PC,WebGL,Android平台发布 qq交流:1749568798 +VX : huazaikv 相关视频: unity

    2024年02月11日
    浏览(53)
  • 【CesiumJS入门】(4)加载3D Tiles并获取tileset

    本次,我们将写一个函数来加载3D Tiles数据, 3D Tiles数据的文档:CesiumGS/3d-tiles: Specification for streaming massive heterogeneous 3D geospatial datasets (github.com) 同时我们将获取加载成功后的 tileset 数据集(有了tileset后续就可以方便得进行模型相关的操作了),下图为加载模型后的效果。

    2024年02月16日
    浏览(37)
  • 如何用pytorch做文本摘要生成任务(加载数据集、T5 模型参数、微调、保存和测试模型,以及ROUGE分数计算)

    摘要 :如何使用 Pytorch(或Pytorchlightning) 和 huggingface Transformers 做文本摘要生成任务,包括数据集的加载、模型的加载、模型的微调、模型的验证、模型的保存、ROUGE指标分数的计算、loss的可视化。 ✅ NLP 研 0 选手的学习笔记 ● python 需要 3.8+ ● 文件相对地址 : mian.py 和 tra

    2024年02月05日
    浏览(66)
  • Hive数据倾斜的原因以及常用解决方案

    在Hadoop平台的hive数据库进行开发的时候,数据倾斜也是比较容易遇到的问题,这边文章对数据倾斜的定义以及产生的原因、对应的解决方案进行学习。 数据倾斜:数据分布不均匀,造成数据大量的集中到一点,造成数据热点。主要表现为任务进度长时间维持在 99%或者 100%的

    2024年02月15日
    浏览(49)
  • 谷歌倾斜摄影数据获取以及转换3DTiles介绍

    2005年谷歌地球横空出世,将地球以三维可视化方式展现在每一个电脑屏幕前的用户,掀起了数字地球热潮,而随着三维倾斜摄影模型数据的加入,将谷歌地球对全球的三维可视化效果表达,提升到了更高的层次。作为全球三维倾斜摄影覆盖面积最广的三维数字地球平台,谷歌

    2024年02月03日
    浏览(41)
  • 基于MapReduce的Hive数据倾斜场景以及解决方案

    通常认为当所有的map task全部完成,并且99%的reduce task完成,只剩下一个或者少数几个reduce task一直在执行,这种情况下一般都是发生了数据倾斜。 即为在整个计算过程中,大量相同的key被分配到了同一个reduce任务上造成。Hive的数据倾斜本质上是MapReduce计算引擎的数据倾斜,

    2024年02月13日
    浏览(46)
  • 基于MapReduce的Hive数据倾斜场景以及调优方案

    通常认为当所有的map task全部完成,并且99%的reduce task完成,只剩下一个或者少数几个reduce task一直在执行,这种情况下一般都是发生了数据倾斜。 即为在整个计算过程中,大量相同的key被分配到了同一个reduce任务上造成。Hive的数据倾斜本质上是MapReduce计算引擎的数据倾斜,

    2024年02月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包