Cesium 加载本地3DTiles

Haip

已于 2024-04-24 12:55:49 修改

阅读量620

点赞数 1

分类专栏： cesium 文章标签：其他

于 2023-09-18 15:18:17 首次发布

本文链接：https://blog.csdn.net/u014324940/article/details/132980242

版权

cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在浏览器中使用新API`showDirectoryPicker`获取本地文件夹，递归遍历文件结构，并结合Cesium库实现3DTileset的加载。同时，对Cesium源码进行改造，以处理特定版本的初始化问题，动态构造资源地址。

摘要由CSDN通过智能技术生成

在线预览

1. 使用浏览器新的api showDirectoryPicker

浏览器端使用showDirectoryPicker获取本地一个文件夹，遍历获取所有文件夹及文件的描述信息

const showLocalLoadPanel = () => {
            let gui = new dat.GUI();
            let items = gui.addFolder('加载数据文件');
            let commonUpload = async (callback) => {
                const res = await showDirectoryPicker();
                const fileList = [];
                // 递归获取文件结构
                const detalAction = async (obj) => {
                    let res = {};
                    if (obj.entries) {
                        const dirs = obj.entries();
                        for await (const entry of dirs) {
                            res[entry[0]] = entry[1].entries ? { type: 'directory', children: await detalAction(entry[1]) } : { type: 'file', fileHandle: entry[1] };
                        }
                    }
                    return res;
                }
                const files = await detalAction(res);
                const rootFile = await files['tileset.json'].fileHandle.getFile()
                callback(URL.createObjectURL(rootFile), files);
            };
            items.add({
                '3dtilset': () => {
                    commonUpload((url, files) => {
                        Cesium.Cesium3DTileset.fromUrl(new Cesium.Resource({ url, files })).then((tile) ={
                            tileset = viewer.scene.primitives.add(tile);
                            viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.3, 0.0));
                        })
                    })
                }
            }, '3dtilset');
        }