请选择 进入手机版 | 继续访问电脑版
分享
首页 资讯 产品知识 查看内容

ThingJS本地加载速度提升10倍,复杂场景不愁!

发表于 2020-7-13 14:47
zzv_icon287 zzr_icon0
摘要: 这真是一个甜蜜的烦恼,大型3D场景结构复杂,对精度要求很高,产生大量数据读取。为此, ThingJS研发出浏览器常规临时缓存持久化技术,目的是降低数据传输压力、提高大型场景的开发体验,这一宝贝功能终于测试完毕上 ...

这真是一个甜蜜的烦恼,大型3D场景结构复杂,对精度要求很高,产生大量数据读取。为此, ThingJS研发出浏览器常规临时缓存持久化技术,目的是降低数据传输压力、提高大型场景的开发体验,这一宝贝功能终于测试完毕上线了!

要注意,ThingJS平台的场景加载都有首次常规读取过程,第二次才开始执行本地缓存命令,飙升的加载体验令人惊喜!

中丹1.02 场景示例图

某三维大型场景测试结果表明,首次加载至少需要62秒,启用本地缓存功能之后,大型3D场景加载仅用19秒,性能提速62%以上!加载性能具体取决于电脑网络或开发环境的综合因素,可以手动实践一下~~听说有开发者体验到飙升至10倍的加载速度!

这是一个基于浏览器的本地缓存功能,由ThingJS平台提供的thing.cached.min.js库封装提供,按照JS脚本提供的代码执行加载本地3D场景。以下是详细的操作步骤:

1、引用thing.cached.min.js文件封装库
2、第一次加载场景,先把文件后缀为’glb’, ‘gltf’, ‘bin’, ‘json’, ‘jpg’, 'png’等模型资源储存到缓存中
3、之后的加载优先从缓存里读取数据,目前仅支持模型类的文件对象,后续会有扩展。

THING.Utils.dynamicLoad('https://www.thingjs.com/static/plugins/thing.cached.min/1.1.0/thing.cached.min.js',
    function () {
        //初始化代码
        if (typeof CachedDownloader !== 'undefined') {
            CachedDownloader.getInstance().onRequest = function (url) {
                var extensions = ['glb', 'gltf', 'bin', 'json', 'jpg', 'png'];
                var extension = url.getExtension();
                return extensions.indexOf(extension.toLowerCase()) === -1 ? false : true;
            }
        }
    })

浏览器缓存过程中,引入场景预览脚本可以进行动态旋转,注意不同的场景有区分哦~~

  1. 如果引入该脚本是预览园区,初始化方法示例为:init(app, ‘scene’, null)
  2. 如果引入该脚本是预览地图,则应在引用地图组件脚本complete回调中引用,初始化方法示例为:init(app, ‘city’, event.object)
THING.Utils.dynamicLoad(['/uploads/wechat/5oiR5pyJ5pyA6ZW/55qE572R5ZCN5LiN5L+h5L2g5pWw5pWw/file/ScenePreview/AppPreview.js'],
            function () {
                init(app, 'scene', null);  // 执行初始化
            }
        )

点击观看演示demo