wax1026 / loadbigobj Goto Github PK

Threejs大型obj文件的秒加载实现

原理: https://www.jianshu.com/p/5c2cafcea26c

例子中的3d模型使用的是100m的陆羽模型 原下载地址 https://www.artec3d.com/3d-models/lu-yu.

luyu.obj obj模型文件

luyu.gltf obj转gltf文件 (obj2gltf -i luyu.obj -o luyu.gltf)

luyu2.gltf gltf文件压缩后的文件 (gltf-pipeline -i luyu.gltf -o luyu2.gltf -d)

1 安装BrowserSync npm install -g browser-sync

2 执行 browser-sync start --server --files "css/*.css, *.html"

3 打开 http://localhost:3000/loadobj.html

这里面的代码是加载obj文件和gltf文件

4打开 http://localhost:3000/login.html

这是模拟登陆页面 在这个页面启动webwork 异步加载和解压缩模型

5 点击链接进入模型页 使用indexdb加载模型 加载只需要1.3s