这是一个苦涩的懊恼:大型3D场景结构复杂,对精度要求高,由此产生大量数据读取。为此, ThingJS技术团队胜利研发出浏览器惯例长期缓存长久化技术,大幅升高Web端数据传输压力,优化大型场景的加载体验,这一性能现曾经测试结束上线。

这一基于浏览器的本地缓存性能,由ThingJS平台提供的thing.cached.min.js库封装提供,依照JS脚本提供的代码执行加载本地3D场景。

要留神的是,ThingJS平台的场景加载都有首次惯例读取过程,第二次才开始执行本地缓存命令,其加载速度飙升,令人惊喜!

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

以下是具体的操作步骤:

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

进入ThingJS官方论坛