当前位置: 首页 > Web前端 > HTML5

不用担心加载复杂的场景!ThingJS带你体验十倍速度

时间:2023-04-05 22:16:03 HTML5

这是一个甜蜜的烦恼:大型3D场景结构复杂,精度要求高,导致数据读取量大。为此,ThingJS技术团队成功开发了浏览器的定时临时缓存持久化技术,大大降低了Web端数据传输的压力,优化了大型场景的加载体验。该功能已经测试并上线。这种基于浏览器的本地缓存功能由ThingJS平台提供的thing.cached.min.js库封装提供,根据JS脚本提供的代码加载本地3D场景。需要注意的是,ThingJS平台的场景加载有第一次定时读取过程,本地缓存命令只执行第二次。加载速度飙升,厉害了!以上3D场景示例测试结果显示,首次加载至少需要62秒,开启本地缓存功能后,加载大型3D场景仅需19秒,性能提速62%!具体表现取决于电脑网络或者开发环境的综合因素,大家可以自己动手练习~~听说有人体验过加载速度飙升10倍!下面是详细的操作步骤:1.参考thing.cached.min.js文件包库2.第一次加载场景时,先给文件加上'glb','gltf','bin'后缀,'json','jpg','png'等模型资源存放在缓存中。3.加载后,先从缓存中读取数据。目前只支持model类的文件对象,以后会有扩展。代码示例THING.Utils.dynamicLoad('https://www.thingjs.com/static/plugins/thing.cached.min/1.1.0/thing.cached.min.js',function(){//初始化代码if(typeofCachedDownloader!=='undefined'){CachedDownloader.getInstance().onRequest=function(url){varextensions=\['glb','gltf','bin','json','jpg','png'\];varextension=url.getExtension();returnextensions.indexOf(extension.toLowerCase())===-1?false:true;}}})在浏览器缓存时引入场景预览脚本动态旋转是可能的。注意区分不同的场景,比如公园场景或者地图场景。1.如果导入的是预览公园的脚本,初始化方法示例为:init(app,'scene',null)2.如果导入的是预览地图的脚本,需要在回调的complete回调中引用参考地图组件脚本。代码范例(app,'scene',null);//执行初始化})点击观看演示进入ThingJS官方论坛