Cesium 加载本地3DTiles

在线预览

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, localFiles: files })).then((tile) ={
                            tileset = viewer.scene.primitives.add(tile);
                            viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.3, 0.0));
                        })
                    })
                }
            }, '3dtilset');
        }

2. 改造Cesium源码 Resource

在1.108版本的源码有效，109的会提示draco_decoder.wasm初始化失败；修改resource源码，注入前面解析得到的文件目录树结构，在请求资源时重新构造该资源的地址

结果