复杂场景加载不愁！ThingJS 带你体验十倍飙升速度

这是一个甜蜜的烦恼：大型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官方论坛