Cesium在Vue中加载Draco压缩后的gltf模型

最新推荐文章于 2024-06-14 17:00:51 发布
最新推荐文章于 2024-06-14 17:00:51 发布
阅读量3.5k 收藏 7
点赞数 3
分类专栏： 前端 vuejs 文章标签： vue Cesium
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37540004/article/details/105046538
版权

走了很多弯路

  1. 首先找到node_modules/cesium/ThirdParty目录
  2. 找到draco_decoder.wasm文件。
  3. 在项目根目录下的public目录下新建ThirdParty，将draco_decoder.wasm复制进去，然后加载模型的时候什么都不用改，还是
model:{
	url: '模型目录'
}
  1. 就可以加载Draco压缩后的gltf模型了。
  2. 其实就只解析压缩模型的js目录问题
重复过往
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Draco是用于压缩和解压缩3D几何网格和点云的库。 旨在改善3D图形的存储和传输。-C/C++开发
05-26
现在从静态URL托管新闻版本1.3.6版本的WASM和JavaScript解码器建议始终从此URL提取Draco WASM和JavaScript解码器：https://www.gstatic.co新闻版本1.3.6版本WASM和现在从静态URL托管JavaScript解码器。建议始终从此URL提取Draco WASM和JavaScript解码器：https://www.gstatic.com/draco/v1/decoders/*将*替换为*以加载文件。 例如https://www.gstatic.com/draco/v1/decoders/draco_decoder_gltf.wasm随着更多站点开始使用静态URL，用户将受益于将Draco解码器缓存在缓存中更改了Web示例，从静态URL中提取了Draco解码器
Cesium 填坑之路
往事随风的博客
05-03 2760
一、解决cesium widgets.css is not exported from package 在版本1.9以上版本后，按照官方文档引入css 时 会报错：cesium widgets.css is not exported from package 解决方案： 1.node_modules里找到cesium的package.json文件，在exports里增加导出widgets.css "./widgets.css": "./Source/Widgets/widgets.
Vue3+Cesium实现一些基础的可视化功能
最新发布
m0_67946993的博客
06-14 470
Cesium常用的可视化功能
Cesium在Vue中加载Draco压缩后（ion）的gltf/glb模型
yuxinSir的博客
12-29 1405
首先找到node_modules/cesium/Build/Cesium/ThirdParty目录找到draco_decoder.wasm文件。 在项目根目录下的public目录下新建ThirdParty，将draco_decoder.wasm复制进去，然后加载模型的时候什么都不用改，还是 model:{ url: '模型目录' } 就可以加载Draco压缩后的gltf模型了。 其实只是解析压缩模型的js目录问题 ...
cesium 源码分析 worker与webassmbly
tianyapai的专栏
11-12 2751
当前cesium的代码有有一部份是关于解压Draco压缩过的gltf/glb文件的过程，这个过程封装在了DracoLoader.js中，这个过程中使用到了worker+webassmbly提高执行效率，现在大致分解一下执行的过程，至于如何编写wasm文件以及如何执行可参考Emscripten官网，使用emsdk工具链处理。 DracoLoader.js中调用线程的过程代码如下： // 全局变量 DracoLoader._decoderTaskProcessor = unde...
加载gltf-pipeline压缩后的gltf文件所需的js文件
03-23
gltf-pipeline对gltf文件进行压缩，压缩后的文件加载时需要专门的接压缩算法，这里面的js就是！包括： draco_decoder.js draco_decoder.wasm draco_encoder.js draco_wasm_wrapper.js
37.（cesium篇）cesium加载gltf模型（贴地）.zip
06-08
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“37.（cesium篇）cesium加载gltf模型（贴地）”。如下载有问题，可联系博主。 解压密码：cesium
38.（cesium篇）cesium设置entity的方向（gltf模型）.zip
06-08
该资源包的执行效果查看地址：...“地图之家”专栏中的“38.（cesium篇）cesium设置entity的方向（gltf模型）”。如下载有问题，可联系博主。 解压密码：cesium
vue3.x中使用cesium，vue3.x+Cesium
05-04
4. **Cesium组件化**: 为了更好地在Vue组件中使用Cesium，你可以创建一个名为`CesiumViewer.vue`的组件。在这个组件中，初始化Cesium Viewer实例，并在销毁时清理资源。例如： ```html , height: '100%' }"> ...
cesium+vue实现飞机模型按照预定航线飞行
01-17
在Vue中，可以将航线数据存储在组件的data属性中，然后通过计算属性或方法处理这些数据，以便Cesium可以理解和使用。 3. **轨迹动画**：使用Cesium的`Tween`或者`TimeIntervalCollection`来创建动画效果，使飞机...
基于Cesium手写实现模基于Cesium对以entity形式加载的gltf或者glb模型的编辑操作组件，包括完整demo和源代
03-13
基于Cesium手写实现模基于Cesium对以entity形式加载的gltf或者glb模型的编辑操作组件，包括完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：...
three.js 环境中使用的Draco解码器
03-06
Draco 是一个开源库，用于压缩和解压缩3D几何图形和点云数据。这种压缩技术可以显著减少3D模型的数据大小，从而加快加载速度并减少网络带宽需求。
decoder_wasm:借助于WebAssembly技术，基于ffmpeg的H.265解码器
05-26
1 简介 借助于WebAssembly(简称Wasm)技术，实现在浏览器端调用ffmpeg接口完成H.265码流到YUV数据的解码。 总体流程如下： 2 依赖 2.1 按照官网的定义，WebAssembly (wasm) 是一个可移植、体积小、加载快并且兼容 Web 的全新格式。通过wasm，可以在浏览器里执行原生代码(例如C、C++)。 目前，wasm技术已经得到主流浏览器的广泛支持（数据来源）。 2.2 FFmpeg FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。 我们代码里主要使用FFmpeg来做解码（decode）。为了减小体积，最终编译生成的wasm里包含的是裁剪过的FFmpeg，主要包含以下几个库： libavcodec： 编解码（最重要的库） libavutil
drcobj:使用 draco 压缩和解压 three.js 模型文件。(Use draco to compress and decompress threejs-object files.)
04-29
Draco是用于压缩和解压缩3D几何网格和点云的开源库。 旨在改善3D图形的存储和传输。 您可以使用drcobj_exporter.js将threejs-object（.json）文件转换为draco压缩的threejs-object（.drcobj）文件， drcobj_loader.js是drcobj文件的加载器。 新版本！ 与1.0.3.2版相比，1.1.0版将模型加载时间减少了50％以上！ 模型文件大小比较 测试模型： ./ example / bunny.json JSON格式 德科比 FBX OBJ 特遣部队 GLB 2.98兆字节 146KB 1.82兆字节 6.8兆字节 2.12兆字节 1.6兆字节 如何使用 负荷模型 < script src =" ./three.js " > </ script > < script src =" ./src/vendor
Draco节点安装包
04-27
Draco节点安装包支持ubuntu16.04以上和centos7以上
draco常见问题
weixin_45031229的博客
05-11 652
"Mounts": [ { "Type": "bind", "Source": "/", // 看这个 "Destination": "/sata", "Mode": "", "RW": true, "Propagation": "rslave" } ],
Uncaught (in promise) RequestErrorEvent {statusCode: 404, response: ArrayBuffer(168), responseHeader
挣钱花388的博客
12-01 840
来搭建的框架，然后在里面加载了OSGB转的3dtiles，转化工具为OSGBLab。但是加载的这个3dtiles无论如何都不显示，当地图移动时就报错，报错截图如下：cesium加载3dtiles瓦片出现得报错。所有的报错中 存在唯一的报错 就是请求draco_decoder.wasm失败。1.89版本之后 存在这个问题 所以得手动添加一些文件。但是后台给我的返回的b3dm的请求都是200状态。所以从解决draco_decoder.wasm下手。
WebGL Babylon 离线模型加载失败问题
creatlh的博客
07-03 450
默认情况下，Draco解压器使用的文件是从https://preview.babylonjs.com引用，需要将引用下载到本地使用。
Cesium 源码解析 Model（六）
tianyapai的专栏
09-23 1039
cesium
在vue3项目中的cesium地球上加载gltf模型
07-28
在Vue3项目中加载gltf模型到Cesium地球，您需要进行以下步骤： 1. 首先，在Vue项目中安装Cesium库。您可以使用 npm 命令来安装它：npm install cesium 2. 打开 Vue 项目的入口文件（比如 main.js），并在顶部导入 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值