vue结合Cesium加载gltf模型

这篇具有很好参考价值的文章主要介绍了vue结合Cesium加载gltf模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Cesium支持什么格式?

        Cesium支持的格式包括:3D模型格式(如COLLADA、gITF、OBJ)、影像格式(如JPEG、PNG、GeoTIFF)、地形格式(如STL、Heightmap)、矢量数据格式(如GeoJSON、KMZ)、时间动态数据格式(如CZML),以及其他各种数据格式。此外,Cesium还通过插件支持其他特定格式。

Cesium加载Gltf模型

  const position = Cesium.Cartesian3.fromDegrees(
    91.18062333588327,
    29.64956,
    3640.0
  );
  viewer.scene.globe.depthTestAgainstTerrain = true;
  const heading = Cesium.Math.toRadians(90); //135度转弧度
  const pitch = Cesium.Math.toRadians(0);
  const roll = 0;
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );
  const entity = viewer.entities.add({
    position: position,
    orientation: orientation,
    model: {
      uri: "./assets/cesium_gltf/GLTF/M_BWG.gltf", //注意entitits.add方式加载gltf文件时,这里是uri,不是url,并且这种方式只能加载.glb格式的文件
      scale: 1.0, //缩放比例
      minimumPixelSize: 128, //最小像素大小,可以避免太小看不见
      maximumScale: 20000, //模型的最大比例尺大小。minimumPixelSize的上限
      incrementallyLoadTextures: true, //加载模型后纹理是否可以继续流入
      runAnimations: true, //是否启动模型中制定的gltf动画
      clampAnimations: true, //制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
      // shadows: Cesium.ShadowMode.ENABLED,
      heightReference: Cesium.HeightReference.NONE,
    },
  });
  viewer.trackedEntity = entity; // 聚焦模型
  viewer.flyTo(entity);

效果图:

vue结合Cesium加载gltf模型,vue.js,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-788779.html

到了这里,关于vue结合Cesium加载gltf模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue3结合Cesium加载倾斜摄影3dtiles

            这篇文章主要是为了记录加载3dtiles时模型与地形有时候存在一些高度上的差异,为此将解决方法做一个记录,便于其他读者使用。         加载倾斜摄影3dtitle           调整倾斜摄影高度         调用方式:

    2024年02月02日
    浏览(70)
  • Cesium结合GIS天地图 加载倾斜摄影3dtile + vue3

    将倾斜摄影OSGB数据转换为3dtile(转换方式很多,可以利用第三方工具cesiumlab) 利用Cesium加载GIS地图,我这里使用的是天地图,可以加载其他地图都行 加载3dtile数据到地图中展示 以加载天地图为例,需要先到天地图官网去申请开发者,获取一个token,以下代码直接粘贴就行,注释

    2024年02月11日
    浏览(55)
  • 前端使用Cesium加载三维模型全攻略

    想象一下,地球在你眼前旋转,上面还有各种3D模型,是不是很酷?Cesium是一个超酷的库,专门用来创建超炫的3D地球和地图。好,言归正传,今天这篇文章就分享一下前端如何使用Cesium加载三维模型。 首先,确保你已经安装了Cesium库。可以从Cesium官网下载最新版本的库文件

    2024年04月17日
    浏览(57)
  • Vue.js2+Cesium1.103.0 十、加载 Three.js

    Demo ThreeModel.vue index.vue

    2024年02月11日
    浏览(50)
  • Cesium.js加载3dTiles格式倾斜摄模型影悬浮空中的解决办法

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

    2024年02月12日
    浏览(58)
  • Cesium 实战 - 使用 gltf-vscode 查看、预览以及编辑 glTF 和 GLB 模型

    模型渲染作为 Cesium 一个非常重要的功能,目前 只支持 glTF 和 GLB 两种格式,其实是一种格式 ,GLB 是 glTF 的二进制形式。 在实际项目中,由于对模型的操作,可能会需要查看模型的属性。之前一直使用 blender 来查看、调整以及转换等操作。模型转换详见:Cesium 三维模型使用

    2024年02月11日
    浏览(142)
  • 前端VUE框架通过Cesium加载3dtiles,计算3dtiles的面积

    前端VUE框架通过Cesium加载3dtiles,计算3dtiles的面积完整代码 前端开发中,使用Vue框架可以帮助开发者更高效地开发复杂的Web应用程序,并且越来越多的项目开始集成三维地球数据可视化。Cesium是一个开源的JavaScript库,可以轻松地实现地球数据的可视化,同时支持3D场景的绘制

    2024年02月08日
    浏览(55)
  • 数据处理(4):4种方式使用3Dmax模型数据转cesium Gltf模型

    方式一: COLLADAMaxNew插件 转换 下载链接: https://www.aliyundrive.com/s/xLXfLggCh9k 提取码: fs72 环境准备,需先安装max插件COLLADAMaxNew.dle,这是一个导出插件,可以将模型导出0penCOLLADA(*.DAE)格式文件 将下载得COLLADAMaxNew.dle插件放置3Dmax安装目录Plugins下即可,随后重启3Dmax即可。 也可以

    2024年02月15日
    浏览(40)
  • 【瑞模网】Cesium 模型转换(obj max fbx转gltf/3dtiles)

    这三种都是3dmax支持的格式,可以统一将.fbx和.max转化为.obj格式,然后通过obj2gltf转为glb或者gltf,其中gltf是比glb的模型要大一点;或者通过ceisumlab等工具将.obj处理成3dtiles,当然3dtiles是用于大场景居多。 .obj .max .fbx类型的模型转换为gltf/glb,使用obj2gltf 以下举例讲述下.max的处

    2024年02月11日
    浏览(66)
  • Three.js开发神器-结合3DTiles插件加载倾斜摄影模型

    首先我们通过链接和图片来看看效果 演示Demo链接地址:https://n3gis.github.io/exportToThree(3.0).html?scene=Demo_4 使用到的软件(软件大家到Unity商城上搜索,Unity商城地址:https://assetstore.unity.com) Unity3D 3DTiles(Unity3D插件,用于加载OSGB格式的倾斜摄影数据) Export To Three.js(Unity3D插件,

    2023年04月20日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包