cesium加载Draco几何压缩数据

1.1 处理流程

  • 利用3d-tiles-tools 或gltf-pipeline 压缩glb 或b3dm。
  • cesium 直接加载Draco压缩后的数据。

1.2 遇见的问题

报错找不到draco_decoder.wasm,无法解压数据。

cesium包里有这个文件,但是vue项目中找不到。那大概率是webpack的问题。

接下来看我的 vue.config.js文件。

复制代码
plugins: [
            new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }] }),
            new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }] }),
            new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }] }),
            new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }] })
]

可以看到只处理了ThirdParty/Workers 文件的引用,但是ThirdParty里其他文件没有处理,而draco_decoder.wasm 恰好在这次选项中。那就更改配置。

复制代码
        plugins: [
            new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }] }),
            new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }] }),
            new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }] }),
            new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }] }),
            new CopyWebpackPlugin({
                patterns: [{
                        from: path.join(cesiumSource, 'ThirdParty'),
                        to: 'ThirdParty',
                        // 只复制 ThirdParty 下的 Workers 目录之外的文件
                        filter: (file) => {
                            return !file.includes('Workers');
                        }
                    },

                ]
            }),]

此时可以加载Draco压缩数据

相关推荐
你喜欢喝可乐吗?几秒前
Windows 安装 nodejs npm
前端·npm·node.js
yyds4674 分钟前
滑动窗口协议
前端·架构
LaoZhangAI6 分钟前
AI ASMR视频免费制作教程2025:TikTok爆火新趋势详解
前端·后端
LaoZhangAI6 分钟前
FLUX.1 Kontext API完全指南:文本图像编辑最强工具2025版
前端·后端
LuckySusu8 分钟前
【CSS篇】什么是 Margin 重叠问题?如何解决?
前端·css
一依不舍8 分钟前
百度文心大模型 4.5 系列开源:从技术突破到全球生态的中国力量
前端
LaoZhangAI10 分钟前
Claude 4 vs Gemini 2.5 Pro:2025年顶级AI模型权威对比分析
前端·后端
Dream耀10 分钟前
Cookie:Web身份认证的基石
前端·javascript·http
LuckySusu11 分钟前
【CSS篇】元素的层叠顺序(Stacking Order)详解
前端·css
come1123412 分钟前
npm 命令入门指南(前端小白版)
前端·npm·node.js