three.js, three.min.js, three.module.jsの違いとは?【Three.js】

スポンサーリンク
Three.js
悩む人
悩む人

/buildの中に3つjsファイルがあるけど、

違いって何なの?機能は一緒?

こういったお悩みを解決いたします。

Three.jsを使い始めるときに、three.js, three.min.js, three.module.js のどれを使えばよいか、お悩みになったことはあるのではないでしょうか。

これらの違いを解説いたします!

結論から申し上げますと、どれも機能的には何にも変わりはありません

当記事を読むと、

  • Three.jsの3つのjsファイルの違いが分かる
スポンサーリンク

three.jsについて

Three.jsにおける基本的な機能を兼ね備えているjsファイルです。

これを読み込めば基本的な機能(シーンとかカメラとか)が使えるようになります。

読み込み方はシンプルです。

<script src="./build/three.js"></script>

このコードをthree.jsの機能を使用するスクリプト以前に記載するだけです。

スポンサーリンク

three.min.jsについて

悩む人
悩む人

minってついているから、最小限の機能しか提供していないの?

このように考えている方も多いのではないでしょうか。

まったくそんなことはありませんよ。

前述したthree.jsと全く同じ機能を提供してくれます。

では何が違うの?って話になりますが、実際の中身を見ていただいた方が分かりやすいです。

three.js

インデントもしっかり行われていますし、コメントも入っていて読みやすい印象を受けます。

一方、

three.min.js

なんじゃこりゃ…

到底人が読めるようなコードではありません。びっしり詰められています。

ただ、提供機能はthree.jsと全く同じなんです。

ということはつまり、minの意味はファイルサイズを最小限に抑えてあるよということです。

コメントも使用せず、インデントによる空白も削除し、変数もなるべく短いものを使用しています。

これはThree.jsに限った話ではなく、様々なライブラリにminファイルは存在します。

それは大半が機能はそのままで容量を最小化したファイルにすぎないのです。

読み込み方はthree.jsと同じです。

<script src="./build/three.min.js"></script>

three.module.jsについて

こちらも提供してくれる機能は、three.jsと同じです。

名前にmoduleと入っている通り、モジュール化されています。

機能を小分けにして、それぞれ個別に外部に提供していると考えて良いです。

つまり、「three.jsの提供しているすべての機能は必要ないけど、部分的に使いたい」という方に適しています。

使い方については、今までの2つとは若干異なります。

まずは、Javascriptで、three.module.jsが提供している機能のどれを使用するのかを明記する必要があります。

import * as THREE from '../build/three.module.js';

こんな感じです。このコードは、

three.module.jsが提供しているすべて(*)の機能をTHREEとして取り込みます

という意味になります。

そしてHTMLファイル側では、

<script type="module">
  import * as THREE from '../build/three.module.js';
  ...
  ...
  ...
</script>

という使い方をします。

要は、このスクリプトはモジュールを使用していますよ、と明記してあげる必要があるわけですね。

お気づきの方もいらっしゃるかと思いますが、上記のコードは、three.jsやthree.min.jsを読み込んだ時と同じになります。(* は提供されているすべての機能を意味するので)

もし、本来の使用法である部分的な読み込みがしたければ、

import (使用したい機能) as (任意の名前) from ‘../build/three.module.js’;

とすることで上手くいきます。

まとめ

いかがでしたでしょうか。

当記事を簡単にまとめると、

  • 3つのjsファイルに提供機能の違いはない
  • min は容量を最小化しているという意味
  • module は部分的に機能を提供

ちなみに私がThree.jsを使用するときは、three.min.jsを読みこんで使用しています。

なるべく容量は少ない方がいいですからね。

以上です。

Three.jsの学習におすすめの書籍はコレ!

・はじめてのThree.js

この本には、Three.jsを用いてコンテンツを開発する際に、必要な情報がほぼすべて盛り込まれています。

Three.jsをここまで詳しく解説している本はおそらくこれしかないです。

私は大学4年生からの研究活動でThree.jsを用いていますが、初めての学習でこの本を使用しました。

自分が必要な情報をかいつまんでその都度学習することもできますが、私個人としては、一通り目を通してThree.jsでできることをざっと把握することをおすすめします。

なぜなら、できることの全貌を知っている方が、アイデアの幅が広がり設計・コーディングもしやすくなるからです。

ぜひ一度お調べになってみてはいかがでしょうか。

コメント

タイトルとURLをコピーしました