java3d载入obj_Threejs大型obj文件的秒加载实现

2024-05-05 12:36:18

项目需求:要将3d模型显示在网页上并实现时时旋转和鼠标悬停功能.给我的3d模型是60M的obj文件

threejs加载obj模型比较简单但加载时间很长毕竟60m的文件网络传输需要很长时间

obj模型太大必须想办法压缩 google的第一个链接就有解决办法

image.png

image.png

第一步将obj转换成gltf文件

通过obj2gltf工具可以吧obj转换成gltf文件大小大约为20M 但是还是很大因为在网络不好的环境下下载20m文件还是需要很长时间

threejs 显示20m的gltf文件为1s

第二步使用draco压缩gltf文件

gltf-pipeline工具可以压缩gltf文件大小大约2m 但是又有新的问题 threejs在加载的时候需要解压缩也就是说显示2m的文件需要5s的时间而且每次刷新都需要重新解压缩每一次刷新都需要5s的时间显示3d模型.

下图分别是 gltf文件 obj文件和压缩的gltf文件的大小

image.png

那么现在有两种方案

方案一

使用20m的gltf文件加浏览器缓存那么只有在第一次的时候需要加载20m的文件以后每次刷新都只需要1s的时间显示模型

方案二

使用压缩后的gltf文件第一次只需要加载2m的文件但每次刷新都需要5s的时间显示模型

我们仔细考虑一下这两个方案

方案一优点每次刷新加载的时间只需要1s

方案二优点只需要加载2m的gltf文件

那么怎么把这两个方案的优点结合起来实现只需要加载2m的文件又可以让模型的显示只需要1s

自然而然就可以想到

方案三

加载2m的文件在第一次解压后将解压的数据存起来然后每一次刷新直接取存好的数据这样就可以实现即加载2m的文件又可以让模型的显示只需要1s

那么怎样实现数据的存储因为 localstorage最大存储为5m 并不能存大量的数据所以只能使用indexdb 但使用indexdb的时候是又有新的问题

在第一次解压后将数据存储起来需要3s的时间也就是说第一次显示模型需要8s(5s的解压缩+3s的存储)

虽然就第一次慢一些后面每一次刷新都只需要1s的时间

但是还是不能容忍要客户等待8s 的时间

那么怎样实现第一次显示也很快那么自然而然想到当客户还没进入到模型显示页面的时候就已经开始加载这些数据能不能像java那样使用多线程换句话说在用户登录的时候另一个线程就已经开始加载模型解压缩存储数据 ,然后第一次显示模型的时候就直接从数据库取数据

通过了解发现 webworker就可以实现那么就有了方案四

方案四

在登录页面时利用webworker加载模型解压缩存储数据当用户进入到模型页面时从数据库取数据直接加载实现第一次秒加载和后续的秒加载

思维导图.png

上面是研究过程但是在实际应用中由于我们自己有3d结构师通过把模型精简 obj文件只有36m 压缩后的gltf只有2m 考虑到浏览器支持和代码复杂度最终使用方案三

java3d载入obj_Threejs大型obj文件的秒加载实现相关推荐

javascript 文件的同步加载与异步加载
原文:[转载]javascript 文件的同步加载与异步加载 HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: bool ...
解读年度数据库性能：PostgreSQL的日志文件和数据加载
墨墨导读:本文主要介绍PostgreSQL的日志文件参数及注意事项,从csv日志中载入数据库.通过灵活的数据加载方式,让SQL在处理很多问题上更加简捷便利. 运行日志参数 1.1 运行日志主要参数运 ...
PostgreSQL的日志文件和数据加载
墨墨导读:本文主要介绍PostgreSQL的日志文件参数及注意事项,从csv日志中载入数据库.通过灵活的数据加载方式,让SQL在处理很多问题上更加简捷便利. 运行日志参数 1.1 运行日志主要参数运 ...
app启动页数秒加载代码_iOS 底层探索 - 应用加载
一.前导知识以下参考自 WWDC 2016 Optimizing App Startup Time : 1.1 Mach-O Mach-O is a bunch of file types for ...
drawboard pdf拆分文件_掌握在线PDF拆分技巧，从此打开文件不再处于“加载中”...
随着生活节奏的加快,我们身边的事物渐渐地处于"加载中",到奶茶店买杯奶茶需要加载,玩个游戏处于"加载中",就连工作时打开一个PDF文件都是"加载中&q ...
图片在xml文件中直接加载.9文件
图片在xml文件中直接加载.9文件,可能会因为图片压缩的缘故产生锯齿,如果使用 ImageView imageview = (ImageView) view .findViewById(R.id.in ...
oracle ocx加载错误,怎么对.ocx格式的文件进行注册加载？出现0x8002801c错误怎么办？...
很多用户在安装使用软件时,会要求注册加载一个.ocx格式的控件,否则软件程序就无法运行.有的用户在注册这个控件时还会出现错误,提示对DllRegisterServer调用失败,错误代码为0x80028 ...
Vue文件内动态加载JS
Vue文件内动态加载JS let jsUrl = 'https://code.jquery.com/jquery-3.4.1.min.js' // JS地址 let jqueryJs = decode ...
打开dll文件时模块加载失败，请确保二进制存储在指定的路径中，或者调试它以检查该二进制或相关的.DLL文件是否有问题
** 打开dll文件时模块加载失败,请确保二进制存储在指定的路径中,或者调试它以检查该二进制或相关的.DLL文件是否有问题 **打开dll文件时模块加载失败,电脑提示请确保二进制存储在指定的路径中,或 ...

最新文章

热门文章