11.Three.js使用indexeddb前端缓存模型优化前端加载效率

11.Three.js使用indexeddb前端缓存模型优化前端加载效率

1.简述

在使用Three.js做数字孪生应用场景时,我们常常需要用到大量模型或数据。在访问我们的数字孪生应用时,每次刷新都需要从web端进行请求大量的模型数据或其他渲染数据等等,会极大的消耗时间,用户体验不好,因而我们可以通过indexeddb缓存我们的模型数据。

2.indexeddb简介

indexeddb 介绍和学习可以参考这里:https://zhuanlan.zhihu.com/p/429086021

IndexedDB主要用来客户端存储大量数据而生的,我们都知道cookie、localstorage等存储方式都有存储大小限制。如果数据量很大,且都需要客户端存储时,那么就可以使用IndexedDB数据库。它是一种前端的非关系型数据库,同样具有增删改查的功能。我下面封装了一个工具类dbUtils.js对模型数据进行缓存:

const DB_NAME = 'modeldb'; //数据库名称
const DB_VERSION = 1; //数据库版本号
const DB_STORE_NAME = 'model_glb_table'; //数据库仓库function DBUtil() {this.db = null;// 根据模型的url地址,请求模型// 如果没有数据库中没有模型,则请求模型并放入缓存中,返回promise,带有模型的blob文件对象// 如果如果缓存中有模型了,就直接从缓存中取出this.get = async (url, onProgress) => {this.db = await this.initDataBase();let getRequest = this.db.transaction([DB_STORE_NAME], "readwrite") // 事务对象 指定表格名称和操作模式("只读"或"读写").objectStore(DB_STORE_NAME) // 仓库对象.get(url);  // 通过主键(url)获取数据let that = this;return new Promise((resolve, reject) => {getRequest.onsuccess = function (event) {let modelFile = event.target.result;// 假如已经有缓存了 直接用缓存if (modelFile) {if (onProgress) {onProgress(100);}console.log("使用缓存");resolve(modelFile.blob)} else {// 假如没有缓存 请求新的模型存入that.put(url, onProgress).then((blob) => {resolve(blob)}).catch(() => {reject()});}};getRequest.onerror = function (event) {// console.log('error', event)reject()}})}// 请求模型并放入缓存中this.put = async (url, onProgress) => {const response = await fetch(url);if (response.status !== 200) {throw new Error('Request failed');}const contentLength = response.headers.get('Content-Length');// console.log(contentLength)const totalBytes = parseInt(contentLength, 10);let downloadedBytes = 0;const readableStream = response.body;const { readable, writable } = new TransformStream();const writer = writable.getWriter();const reader = readableStream.getReader();const pump = async () => {const { done, value } = await reader.read();if (done) {writer.close();return;}writer.write(value);downloadedBytes += value.length;if (onProgress) {const progress = (downloadedBytes / totalBytes) * 100;console.log(progress.toFixed(2))onProgress(progress.toFixed(2));}return pump();};await pump();let blob = null;try {blob = await new Response(readable).arrayBuffer();} catch (e) {console.log('请求arrayBuffer失败,用blob方式')blob = await new Response(readable).blob();}let obj = {ssn: url}obj.blob = new Blob([blob])const inputRequest = this.db.transaction([DB_STORE_NAME], "readwrite").objectStore(DB_STORE_NAME).add(obj);return new Promise((resolve, reject) => {inputRequest.onsuccess = function () {console.log('glb数据添加成功');resolve(obj.blob);};inputRequest.onerror = function (evt) {console.log('glb数据添加失败', evt);reject();};});}// 打开数据库this.initDataBase = () => {if (!window.indexedDB) {console.log("浏览器不支持indexedDB缓存!!!")return;}let request = indexedDB.open(DB_NAME, DB_VERSION); //如果没有数据库,则创建,有数据库就链接return new Promise((resolve, reject) => {request.onerror = function () {// console.log("error: create db error");reject()};// 数据库创建或升级的时候会触发request.onupgradeneeded = function (evt) {evt.currentTarget.result.createObjectStore(DB_STORE_NAME, { keyPath: 'ssn' });};// 数据库打开成功回调request.onsuccess = function (evt) {// console.log("onsuccess: create db success ");resolve(evt.target.result)};})}
}

3.Three.js加载模型

原本的three.js加载模型如下,这是最基础的加载模型的方法:

function initObject() {//再加载模型const objLoader = new THREE.GLTFLoader();objLoader.load("./data/Soldier.glb",function (gltf) {let root = gltf.scene;root.position.set(0,0,0);root.scale.set(100,100,100);scene.add(root);},//加载回调function (xhr) {console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},//加载失败回调function (error) {console.log("An error happened");});}

使用缓存后加载的方法:

function initObject() {new DBUtil().get("./data/Soldier.glb", (progress) => {console.log("progress", progress);}).then((blob) => {//再加载模型const objLoader = new THREE.GLTFLoader();let url = URL.createObjectURL(new Blob([blob]));objLoader.load(url, function (gltf) {let root = gltf.scene;root.position.set(0, 0, 0);root.scale.set(100, 100, 100);scene.add(root);},//加载回调function (xhr) {console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},//加载失败回调function (error) {console.log("An error happened");});})}

4.验证检查

我们刷新网页后,查看应用程序中是否多了一个数据库,数据库中是否有数据

在这里插入图片描述

尝试删除该数据库后,再刷新页面。

对比数据库存在时,再次刷新页面。可以发现该数据库缓存存在时,模型渲染效率快了很多。特别时互联网访问时,还会有一个模型数据下载的过程,使用缓存可以直接省略下载的时间,效率上可以得到很大的提升。

视频地址:https://www.bilibili.com/video/BV1cQSzYLE9n/?vd_source=0f4eae2845bd3b24b877e4586ffda69a

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/59124.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧城市的守护者——智能井盖监测终端

城市化进程的加速推进使得基础设施建设成为提升城市品质的关键环节。然而,在这一进程中,市政公用设施中的井盖与地下线缆的安全问题却日益凸显。由于缺乏有效的实时监控与管理体系,给犯罪分子留下了可趁之机,频繁发生的井盖被盗及…

零基础玩转IPC之——如何实现远程实时查看监控视频(P2P)

P2P是peer-to-peer的简称,又称为点对点技术,是没有中心服务器、依靠用户群节点进行信息交换的对等式网络。区别于传统的C/S中央服务器结构,P2P网络中每一个用户节点即是客户端又是服务端,能同时作为服务器给其他节点提供服务。 优…

开源OCR免费助力法律文档数字化,提升文档管理效率

一、在法律行业,每天需要处理大量纸质文件,从合同到判决书,手动录入不仅费时,还容易出错。为解决这一问题推出了一款免费开源的OCR智能识别平台,通过先进的光学字符识别(OCR)技术,将…

华为OD七日集训第5期 - 按算法分类,由易到难,循序渐进,玩转OD(Python/JS/C/C++)

目录 一、适合人群二、本期训练时间三、如何参加四、7日集训五、精心挑选21道高频100分经典题目,作为入门。第1天、逻辑分析第2天、数组第3天、双指针第4天、滑动窗口第5天、贪心算法第6天、二分查找第7天、分治递归 六、集训总结 大家好,我是哪吒。 最…

Python3 网络编程详解

概述 Python 提供了丰富的网络编程支持,包括低级别的 Socket 编程和高级别的 SocketServer 模块。本文将详细介绍如何在 Python 中使用 Socket 进行网络编程,并通过具体的代码示例来展示服务器和客户端的实现。 什么是 Socket? Socket 又称…

【数据分享】2024年我国省市县三级的休闲娱乐设施数量(免费获取/18类设施/Excel/Shp格式)

KTV、棋牌室、音乐厅等休闲服务设施的配置情况是一个城市公共基础设施完善程度的重要体现,一个城市休闲服务设施种类越丰富,数量越多,通常能表示这个城市的公共服务水平越高! 本次我们为大家带来的是我国各省份、各地级市、各区县…

什么是软件设计模式, 它们⽤于解决什么问题, 它们为什么有效

什么是设计模式 软件设计模式是指在软件设计过程中,经过验证的、可复⽤的、对特定 场景下常⻅问题的解决⽅案的⼀种描述或模板。这些模式并不是具体的 代码,⽽是⽤于指导如何组织代码、类和对象,以便更好地解决问题和 满⾜需求。 ⽤于解决的…

串口接收,不定长数据接收

###1.CUBE-MX配置串口 2.我采用串口中断接收,打开中断接口 3.时钟同样8倍频,1分频,使用内部时钟 打开串口中断 main() { __HAL_UART_ENABLE_IT(&huart1, UART_IT_IDLE); // 启用空闲中断__HAL_UART_ENABLE_IT(&huart1, UART_IT_R…

海滨学院班级记忆宝盒:设计与实现

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常…

分布式集群本地缓存

在 Java 分布式集群微服务项目中,虽然 Redis 等分布式缓存更常用,但在某些特定场景下,本地缓存依然有较好的应用价值。常用的本地缓存工具主要有以下几种: 1. Caffeine 简介:Caffeine 是一个现代化的高性能 Java 本地…

如何在Linux系统中使用SSH进行安全连接

如何在Linux系统中使用SSH进行安全连接 SSH简介 安装SSH 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 启动SSH服务 验证SSH是否安装成功 SSH配置 配置监听端口 配置登录方式 SSH客户端 安装SSH客户端 使用SSH客户端 SSH密钥认证 生成SSH密钥对 复制公钥到远程服务器…

Maven(26)如何使用Maven进行持续集成?

使用Maven进行持续集成(Continuous Integration, CI)通常涉及设置一个CI服务器,如Jenkins,并配置Maven项目以自动构建和测试。以下是一个详细的步骤指南,包括如何在Jenkins中设置Maven项目: 步骤 1: 安装和…

使用 Elasticsearch 进行语义搜索

Elasticsearch 是一款功能强大的开源搜索引擎,可用于全文搜索、分析和数据可视化。传统上,Elasticsearch 以其执行基于关键字/词汇的搜索的能力而闻名,其中文档基于精确或部分关键字匹配进行匹配。然而,Elasticsearch 已经发展到支…

ElasticNet Regressor(弹性网络回归) --- 论文实战

一、前言 在《机器学习论文复现实战---linear regression》中通过Pearson 相关性分析,去除了2个高相关性特征 "PN" 和 "AN" ,数据维度变为890*25。(数据集地址) 这里我们不做如何前期处理,直接就将数据放入 ElasticNet 模型中进行训练了。 二、模型训…

OJ-5G网络建设

示例1 输入: 3 3 1 2 3 0 1 3 1 0 2 3 5 0 输出: 4示例2 输入: 3 1 1 2 5 0 输出: -1 示例3 输入: 3 3 1 2 3 0 1 3 1 0 2 3 5 1 输出: 1 分析:压缩路径 顺序:1 2;…

Kubeadm搭建k8s

一、架构 节点名称规格IP地址安装组件master012C/4G,cpu核心数要求大于2192.168.88.76docker、kubeadm、kubelet、kubectl、flannelnode012C/2G192.168.88.20docker、kubeadm、kubelet、kubectl、flannelnode022C/2G192.168.88.21docker、kubeadm、kubelet、kubect…

Ubuntu 安装 redis

一、使⽤apt安装 apt install redis -y 二、⽀持远程连接 修改 /etc/redis/redis.conf 修改 bind 127.0.0.1 为 bind 0.0.0.0修改 protected-mode yes 为 protected-mode no # By default, if no "bind" configuration directive is specified, Redis listens# fo…

Vue常用的修饰符有哪些?

修饰符(Modifiers)是用于指定以特殊方式绑定或处理Vue事件或指令的特殊符号。 事件修饰符 .stop: 阻止时间继续传播,相当于调用event.stopPropagation() .prevent: 阻止默认事件,相当于调用event.preventDefault() .capture: 使…

WordPress伪静态设置

为什么要设置WordPress伪静态,搜索引擎优化(SEO)中,静态URL通常被认为更易于搜索引擎爬虫抓取和索引,有助于提高网站的搜索引擎排名。 WordPress伪静态设置方法主要依赖于服务器环境,以下是针对不同服务器…

【简道云 -注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞…