three.jsでobj,mtlファイルの読みこみを高速化する方法

Question

前提

three.jsでブラウザ上でobj mtlファイルを読み込んで表示させたいです。
ただobjファイルの容量が大きいため、公式のサンプルに倣って書いたものだと読み込みに3分ほど時間がかかってしまいます。
どうにか表示を早くさせる方法はないのでしょうか？

Answer 1

丁寧にありがとうございます！
その方法で一旦試してみます。

Answer 2

obj 形式に拘らないようでしたら glTF 形式を用いるのはいかがでしょうか。
glTF 形式では
・Draco 圧縮（KHR_draco_mesh_compression）
・meshopt 圧縮（EXT_meshopt_compression）
の2つの圧縮形式が利用できます。

おそらく obj ファイルに比べてファイルサイズは 1/10 程度に圧縮されるのではと思います。
ケースバイケースだと思いますので、実際に試してみるのが良いでしょう。

three.js での Draco 圧縮 / meshopt 圧縮の使い方については下記を参照ください。
https://threejs.org/docs/#examples/en/loaders/GLTFLoader
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_gltf_compressed.html

obj 形式から glTF 形式の変換は Blender がお手軽です。
obj 形式で import して glb 形式で export するだけです。
Draco 形式への変換は Blender で glb 形式で export する際に「Compression」を選べば Draco 形式で保存されます。
meshopt 形式への変換は meshoptimizer のリポジトリにある gltfpack というツールを使うと変換が可能です。