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

最新推荐文章于 2023-08-09 20:36:01 发布
最新推荐文章于 2023-08-09 20:36:01 发布
阅读量2.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： ThingJS 3D可视化 物联网 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ThingJS/article/details/107316872
ThingJS推出浏览器临时缓存持久化技术，显著提升大型3D场景的加载速度。首次加载后，场景加载时间从62秒降至19秒，最高可达10倍提升。通过引用thing.cached.min.js库，开发者可以将模型资源存储到本地缓存，后续加载优先从缓存读取，目前支持.glb, .gltf等模型文件。" 124433741,11116776,2022电工初级考试详解,"['电工', '安全', '考试']

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这真是一个甜蜜的烦恼，大型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',
    fun
最低0.47元/天 解锁文章
ReactHook学习(第二篇-N)
weixin_68658847的博客
04-25 1154
ReactHook学习(第二篇-N)
ThingJS支持塌陷性能，加快3D渲染速度
ThingJS的博客
09-15 1487
在3D建模阶段，塌陷性能其实就是附加，材质也会合并会变成一种材质。加快渲染速度。ThingJS在导入塌陷后的模型后再进行轻量3D开发。 今天来讲讲如何基于js语法来开发一个物体模型拆解展开的效果，专业名称叫“物体爆炸图”，标准ThingJS体系模型出于互动模型性能考虑，都要求在模型上传前做塌陷，这种建模细节对于提升3D开发效率很有必要，目的是减少模型对内存的占用。 在3D开发之前，模型本身会重叠很多命令，占用很大一部分内存和CPU，拖慢电脑，所以针对模型进行塌陷后（指的是把很多个物体合并成一个，转换为一个.
paginathing.js
02-18
paginathing.js，方便实现表格的jquery动态加载页数。
ThingJS，让物联网开发更简单！
qq_42739428的博客
01-15 1677
随着互联网的不断发展壮大，物联网可视化也逐步受到各行各业的关注，不但制作出优秀的3D可视化场景是一个难题，而且开发3D可视化场景，形成3d可视化行业应用也是一个难题，那么我们该如何去开发3D可视化场景呢？如何让一个虚拟的3D场景不仅能够展示现实场景，还能够同步现实中的部分功能呢？ThingJS可视化平台就能让你快速开发3D场景！ ThingJS提供了从搭建场景到发布项目这四个步骤的资料，其中相关...
ThingJS学习
奔跑的狮子
11-05 1366
【代码】ThingJS学习。
ThingJS，像孩子搭乐高一样去开发3D商业项目！
ThingJS的博客
07-17 1426
ThingJS是一个基于JS代码进行开发的PAAS平台，通过轻量化的官方示例，快速上手3D可视化，只要懂得JS的设计师或者开发人员，都能够在短时间内有不错的开发成果。 启动平台之后，第一步该是创建对象APP，以便承载后期的3D功能开发。 ThingJS启动后创建核心对象APP ThingJS的核心对象APP创建方法如下： 1 var app = new THING.App(); 加载园区场景 这个是核心对象的创建方法，具体还有加载园区的方式，通过URL的方式将园区加载至ThingJS中： var app
智慧园区效果不满意？请收下ThingJS这份秘籍
ThingJS的博客
06-17 861
人类从来都是视觉动物，美观舒适的场景会带来“感官上的满足”。在实际的项目中也一样，炫酷科幻的可视化项目更能受到客户青睐。那么怎样才能快速提升3D场景的效果？传统的3D场景效果往往只能随着复杂的3D建模工作进行，并且每制作一个3D场景，效果也需要重新制作一份，效果制作门槛儿高、操作繁琐且不可复用。使用森园区搭建完园区场景，一键套用官方效果模板，并支持自定义效果模板，复用更方便！01.搭建园区进入森园区，进行场景搭建或打开已有场景。02.切换园区效果模板切换园区效果模板可以在森园区直接点击切换园区效果，也可以在
【代码级别的性能优化】Node.js异步编程模式：回调、Promise、async_await
Node.js作为一个基于Chrome V8引擎的JavaScript运行时环境，其非阻塞I/O操作和事件驱动的特点，使得异步编程成为提高应用性能和响应速度的关键。 Node.js的异步编程模型主要通过事件循环(event loop)机制来实现，...
Unity3d 周分享（22期 2019.8.30 ）
游戏路上的小学生
09-29 7462
选自过去1~2周 自己所看到外文内容：https://twitter.com/unity3d 和各种其他博客来源吧 早就有了，抱歉才发！ 1、 Unity Transform 性能优化摘要 https://qiita.com/sator_imaging/items/ff5811885f515a0a4998 由于我有机会在逐帧的基础上处理大量的Transform ，我想总结一下...
thing.js入门学习
lff18277233091的博客
07-29 4330
1.官网链接，若有不懂的直接戳官网：thing.js官网 2.开发工具：直接使用在线开发工具 3.学习路线：先了解清楚thing.js的用途 可以做可视化页面展示 做3D效果等 4.建议：一定要浏览文档及看文档的官方示例（非常重要个人觉得） 5.做项目的时候都是用vue语法，但是目录结构方面有很大的差别： 自我感觉到的相同点： 可以用vue的双向数据绑定及生命周期，监听及计算属性的用法都相同，js都是通用的 自我感觉到的不同点： 更多的是使用原生js创建节点及插入元素及使用模板字符串 ..
Everything.js.zip
07-15
Everything.js runs entirely on node.js and optimized to give you real-time, accurate results. Containing all the knowledge in the universe, Everything.js is built to know and do literally anything ever. It is written in JavaScript and After you’ve installed Everything, you can start getting familiar with the code.Everything is open-source and annotated so learning should be a breeze. EverythingJS is an open-source library developed in full by Lunar Gravity. 标签：Everything
ThingsJs-学习笔记1:初步了解
ZLZQ_Yuan
05-28 2974
1.官网： thingsjs官网 2.大致功能概述： thingsjs介绍 ThingJS平台的推出，解决了传统3D开发人员投入大、开发效率低、场景制作周期长、模型无法复用、系统部署复杂的问题。 特点： （1）强大的3D引擎：可在各类主流网页浏览器中自如运行，包括可在移动端直接访问运行。 （2）简化模型制作：ThingBuilder（包括面向园区级别的搭建工具CampusBuilder，还包括面向城市级场景的CityBuilder）。使用平台的CampusBuilder3D场景快速搭建工具，拥有便捷的搭建
ThingsJs--学习笔记3：在springboot项目前端嵌入thingsjs页面，并在实现对它的跨域数据对接
ZLZQ_Yuan
05-29 2437
1.在线编写thingsjs页面 var app = new THING.App(); app.background = [0, 0, 0]; // app.camera.earthFlyTo. THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', at
ThinkJS安装到启动
太阳晒屁股了的博客
05-17 830
前言 ThinkJS 是一款 Node.js 的 MVC 框架，所以安装 ThinkJS 之前，需要先安装 Node.js 环境。ThinkJS 需要 Node.js 的版本>=0.12.0，如果版本小于这个版本，需要升级 Node.js，否则无法启动服务 安装 ThinkJS npm install thinkjs@2 -g --verbose 如果安装慢的话，可以尝试使用淘宝...
数字孪生--thingjs
wanxiweilai的博客
08-11 691
4、使用自定义模型时需要导入模型的URL，然后设置type为thing。1、使用js创建新的模型（设置模型的参数，长宽高、模型的外观颜色需要单独设置），3、 物体模型的移动，旋转。
ThingJS 开发使用感悟
似水流年的博客
08-11 8082
ThingJS 隶属于北京优锘科技有限公司，是优锘科技旗下物联网三维可视化开发平台。ThingJS采用JavaScript开发语言，主要面向前端程序员和实施人员。ThingJS平台让传统企业无需组建3D可视化开发团队，也能开发3D可视化应用。以上解释来自百度百科，我相信应该是由其官方人员编写的。简单的说，ThingJS 是由国人开发的（北京优锘），需要付费使用的，基于ThreeJS封装的一个 3d 可视化开发平台。.....................
ThingJS开发使用感受
@Fonden
08-09 1041
出于为了实现有关厂区的数字孪生项目，断断续续使用ThingJS平台开发一年左右，做一个使用感受的总结。在编码方面，笔者的编码方式和博客中的描述基本一致：“由于平台提供的代码编码端体验不佳，我们不得不先在本地进行开发，再将相关代码复制到在线平台，而调试修改代码也是如此繁琐”。个人感觉至少现阶段的ThingJS还是比较适合去做一些简单的业务场景、数据交互简单的项目，类似于大屏展示，这种纯数据展示；如果要实现一个较为庞大复杂的业务场景时，就不太方便，开发难度也会随之增加。
前端实现Thing.js 3D模型展示Demo
qq_39339668的博客
04-30 5696
记录一下自己本周学习Thing.js的一些心得，然后自己写了一个demo。
有哪些优化3dtiles加载速度的方案呢？
weixin_35755434的博客
12-16 1244
优化 3D Tiles 加载速度的一些方案包括： 使用高效的加载器：选择一个高效的 3D Tiles 加载器，能够快速有效地解析和加载 3D Tiles 数据。 使用优化的数据格式：使用优化的数据格式，如 glTF，可以提高加载速度。 使用 CDN 加速：使用内容分发网络 (CDN) 可以加速 3D Tiles 数据的加载。 减少网络延迟：优化网络延迟，如使用更快的网络连接或者使用更近的服...
THINGJS前端
最新发布
04-02
### ThingJS在前端开发中的应用 ThingJS 是一款专注于三维可视化领域的产品，能够帮助开发者快速构建基于 Web 的 3D 应用程序。它提供了丰富的 API 和工具集，使得即使是没有深厚 3D 技术背景的开发者也能轻松上手。 #### 1. **ThingJS 平台简介** ThingJS 提供了一个强大的在线开发环境，支持用户无需安装任何额外软件即可完成项目的创建、编辑和部署[^1]。其核心优势在于简化了传统 3D 可视化开发流程，降低了技术门槛。 #### 2. **ThingJS 的主要应用场景** ThingJS 不仅适用于简单的展示型项目，还广泛应用于复杂的工业级解决方案中。以下是几个典型的应用方向： - **Web 内嵌页面与 3D 交互功能开发** ThingJS 支持通过 WebView 组件将 HTML 页面无缝集成到 3D 场景中，并允许两者之间传递消息[^2]。这种特性非常适合需要动态更新 UI 或者实时反馈操作状态的需求。 - **线路采集及相关功能实现** 对于涉及路径规划或者管网布局类的任务，可以利用 ThingJS 提供的相关接口收集坐标点并绘制轨迹线[^4]。这有助于提升用户体验以及增强系统的功能性。 #### 3. **基本使用教程** ##### (a) 数据通信机制 为了使外部网页能与 ThingJS 进行双向通讯，通常采用 `postMessage` 方法发送信息给目标窗口实例；同时设置事件监听器捕获来自对方的消息通知[^3]。 ```javascript // 清除旧有绑定以防冲突 window.removeEventListener("message", handlerFunctionName, false); // 添加新的消息处理器 window.addEventListener("message", function(event){ console.log('接收到的数据:', event.data); }, false); function sendMessageToThingJS(dataObject){ parent.postMessage(JSON.stringify(dataObject), '*'); } ``` ##### (b) 创建基础工程结构 登录至官网后进入控制面板新建空白模板，默认会自动生成一套完整的文件夹体系包含但不限于 index.html 文件作为入口加载引擎库资源链接地址定义样式表单等内容片段如下所示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>My First Project</title> <!-- 引入必要的 CSS --> <link rel="stylesheet" href="./styles.css"> <!-- 加载 ThingJS SDK --> <script type="text/javascript" src="//www(thingjs.com)/api/v1/sdk.js"></script> </head> <body onload="init();"> <div id="container"></div> <script> let app; async function init(){ const options = { containerId : 'container', sceneFileUrl: '' // 如果存在初始场景则指定URL }; try{ app = await THING.App.create(options); // 初始化完成后可执行其他逻辑... }catch(error){ alert(`初始化失败:${error.message}`); } } </script> </body> </html> ``` #### 4. **总结** 综上所述，借助 ThingJS 能够极大地缩短从前端设计到最终交付的时间周期，尤其对于那些希望迅速验证想法原型的企业和个人而言尤为适用。然而值得注意的是尽管该框架极大地方便了入门学习过程但仍需不断积累实践经验才能充分发挥潜力。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值