【Three.js】3Dモデルのサイズを小さくする方法

2021年6月12日

Three.jsではblenderで作成したglTFファイルを扱うことができますが、オブジェクトの数が多かったりするとファイルサイズがかなり大きくなってしまいます。
その結果サーバーのアップロード制限に引っかかってしまったりと問題が起こる場合があるので、そのような時にglTFファイルのサイズを小さくする方法になります。

広告

blenderで「ファイル>エクスポート>glTF 2.0 (.glb/.gltf)」を選択します。
右側のメニューから「ジオメトリ」を開き、「ノーマル」のチェックを外します。

下の方に「圧縮」という項目があり、ここにチェックを入れるとかなりサイズが小さいglTFファイルを出力することができますが、Three.jsで読み込むことができませんでした。

この方法を使うことで「元のファイル:10,317KB」が「変更後のファイル:2,030KB」まで小さくすることができました。

ただしこの方法はマテリアルで色を付けただけの単純なモデルには使えますが、ノーマルマップを駆使して高度な表現を使ったモデルには適さないと思います。

Three.jsthree.js

Posted by texa