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

项目需求:要将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