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压缩数据