Three.jsのDraco圧縮で軽くなるのは形だけ｜画像は小さくならない

「Claude Codeで作ったThree.jsのページで3Dのモデルの読み込みが遅いのでDracoで圧縮すればいいのか」と迷っている作り手は多いです。Dracoの圧縮で小さくなるのは形のデータだけで、質感の画像は小さくなりません。重さの多くが画像なら先に画像を小さくし、頂点の多いモデルだけをDracoで圧縮します。

three.jsの公式の説明では、Dracoで圧縮した形はかなり小さくなる代わりに読み込む端末で元に戻す時間がかかるとされています（three.js公式のDRACOLoaderの説明・2026年11月に確認）。小さくなる分と戻す時間の両方があるので、どのモデルにも使えばよいわけではありません。

この記事では、Dracoで何が小さくなるのかと圧縮したあとに必要になる作業を順に説明します。そのうえでモデルごとに使うか使わないかを決める基準と、今日確かめられることをお伝えします。

Dracoで小さくなるのは形のデータだけ

Draco（Googleが公開している3Dの形を圧縮する無料のライブラリ）は、3Dの形と点の集まりを圧縮して保存と転送を軽くするために作られています（GoogleのDracoの公開ページ・2026年11月に確認）。Three.jsのページでは、glTF（Webでよく使われる3Dのファイルの形式）の中にDracoで圧縮した形を入れて使います。

three.jsの公式の説明では、Dracoのファイルに入るのは頂点の位置と法線（面の向き）と色などです。質感の設定や画像やアニメーションは入らないと書かれています。glTFのファイルを圧縮しても、画像の部分はそのまま残ります。

3Dのモデルの重さは、形のデータと質感の画像の合計です。細かい形のモデルでは形のデータが大きくなり、写真のような質感のモデルでは画像の方が大きくなります。

Dracoで軽くなるのは形のデータの分だけなので、画像が大半のモデルではほとんど変わりません。

圧縮すると読み込む端末で戻す時間がかかる

前の節のとおり形のデータは小さくなりますが、そのままでは画面に描けません。読み込む端末のブラウザで、圧縮した形を元に戻してから描きます。

three.jsでは、GLTFLoader（glTFを読み込む道具）にDRACOLoader（Dracoの形を戻す道具）を渡しておく必要があります。公式の説明では、Dracoで圧縮したglTFを読むには setDRACOLoader で渡すことが必要とされています（three.js公式のGLTFLoaderの説明・2026年11月に確認）。

戻すためのファイルもサイトに置きます。公式の例では setDecoderPath で戻す道具の置き場所を指定していて、DRACOLoaderはブラウザに合わせてJavaScriptとWASM（ブラウザで速く動く形式のプログラム）のどちらで戻すかを自動で選びます。

DRACOLoaderは1つ作って使い回すことがすすめられています。モデルを読むたびに新しく作ると、戻す道具も何度も読み込まれて作られます。

圧縮してから公開するまでの作業は、圧縮する・戻す道具を置く・読み込む側に渡す・実機で確かめるの4つです。Claude Codeに頼むときも、この4つを最初の依頼に書いておくと抜けが出にくくなります。

Dracoを使うなら、戻す道具を置いて読み込む側に渡すところまでが1つの作業です。

重さが画像か形かはファイルの中身で分かる

前の2つの節から、圧縮する前に重さの内訳を知る必要があると分かります。内訳は glTF Transform（glTFを調べて軽くする無料の道具）で確かめられます。

glTF Transformの公式の説明では、npm install --global @gltf-transform/cli で入れたあとに inspect でモデルの中身を調べられます（glTF Transformのコマンドの説明・2026年11月に確認）。形を圧縮する draco と、画像を圧縮する webp や etc1s や uastc も同じ道具に入っています。

画像が大半なら、先に画像を見直します。MDNのWebGLの説明では、通信量はJPGやPNGの方が小さくなりやすくてもGPU（画面を描く専用の計算機）のメモリではGPU向けに圧縮した形式の方が小さいとされています（MDNのWebGLのベストプラクティス・2026年11月に確認）。

GPU向けに圧縮したKTX2の画像を使う場合は、three.jsでは setKTX2Loader でKTX2Loaderを渡す必要があります。Dracoと同じで、圧縮したら読み込む側にも道具を足す作業が必要です。

inspect で形と画像のどちらが重いかを見てから、圧縮する場所を決めます。

Dracoを使うモデルと使わないモデル

ここまでの話を表にまとめます。読み込んでいるモデルを1つずつ当てはめてください。

左の列が多いモデルはDracoで圧縮し、戻す道具を置いてから実機で読み込みの速さを比べます。右の列が多いモデルは、Dracoを使わずに画像の大きさと形式を先に見直してください。

試作の段階なら圧縮は後でよく、公開の前に重さの内訳を見てから決めます。

御社が今日やること

次の4つは今日確かめられます。

1. 読み込んでいるglTFとGLBのファイルを書き出し、大きい順に並べる
2. 一番大きいファイルを glTF Transform の inspect にかけ、形と画像のどちらが重いかを見る
3. 形が重いファイルだけ draco で圧縮し、元のファイルとの大きさの差を書き留める
4. DRACOLoaderを1つだけ作って setDRACOLoader で渡しているかをコードで確かめる

やりがちな失敗は、圧縮したファイルだけを公開して戻す道具を置き忘れることです。手元では動いていても公開先でモデルが出ないときは、まず setDecoderPath の置き場所を確かめてください。

スマホでの動きが重いときは、ファイルの大きさより先に描く画素の数を下げる方法を確かめます。Claude Codeに入れておきたいThree.jsのスキルも別の記事で説明しています。

弊社がやっていること

弊社は2017年から300件以上のサイトやシステムを作ってきました。3Dや動きのあるサイトのご相談では、読み込んでいるモデルの重さの内訳を一緒に見てどこから軽くするかの順番を決められます。

一方で弊社をすすめない場合もあります。

• 試作の段階で見た目を確かめたいだけなら、圧縮は後でよいので弊社に頼む必要はありません
• モデルが1つで画像を小さくするだけで足りるなら、ご自分で直せます
• どの機種でも同じ速さで読み込めるとは言えず、弊社も約束できません

3Dを含めた作り直しを考えるときは料金の一覧をご覧ください。どこから軽くするか迷うときは相談の窓口からご連絡ください。初回の30分は無料です。