Three.js 之 错误实践 lfs + .glb模型

Three.js 之 错误实践 lfs + .glb模型

Date
Created
Apr 14, 2025 08:51 AM
Descrption
好记性不如烂笔头
Tags
Three.js
记录
notion image
最近在做个人OnePage网站,看到了一个很好的参考原型:
很酷,Right?
但是作者不开源,可能也担心到时候同质化太严重; 所以只能自己从头开始了,好在还有义父cursor;
但是在开发过程中,你会发现自己画的模型比较粗糙,你想要一个比较好的3D模型,于是你兴冲冲的导入了一个.glb或者事.gltf,等到你要git commit的时候发现这个模型文件为什么有将近40兆,于是,git提示你,要用lfs,于是你一想,这么大必须得lfs啊; 但是当你配置好dockerfile,配置好流水线,发布到服务器的时候,原以为一切都没问题了,这时候突然发现什么都出不来,你习惯性的打开F12,发现报错了:
Unexpected token ‘v’, “version ht”… is not valid JSON
 
这就是我踩了两天的坑: 就是模型文件不可以用lfs来存放,因为他会让数据变成二进制,所以当你访问这个资源的时候,就无法正常下载到资源,我猜测就是没人给你复原成json数据,并且如果对于比较大的3D模型,你要进行一些压缩:
使用这个网站,可以进行模型Draco压缩,减面等操作;
notion image
最后,当你压缩好后,需要不适用lfs提交模型文件,当然这个我觉得还是得优化一下:
TODO:现在下载速度比较慢
最后你就可以正常的打开你的Three.js网页了:
notion image
 
来看一看我的米奇妙妙屋; 最后感谢一波义父cursor!