three.module.jsとは何なのでしょうか？何のために必要なの？

Question

盗みたいソース
上記のソースの柔らかい光をゲームステージに取り入れたいと思っています。
本質的な部分はおそらく「UnrealBloomPass.js」を使った記述なのだろうと思うのですが、その前に「three.module.js」といったものを使う必要があるようです。

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

という記述が冒頭にありますが、この「THREE」というのが、おそらくthree.jsの各クラスを統合している大元の何かだと思う。（　new THREE.MeshBasicMaterial( { color: "black" } )といったようなマテリアルオブジェクトの生成など、オブジェクトの生成で必ず出てくる）
下記リンクも参考にしつつ、three.module.jsとは？
three.module.jsと「THREE」との関係とは？
というあたりが気になっています。どなたか詳しい方教えてくださると幸いです。
three.module.jsの読み込み

Comments

[cx20]

質問のタグにある「D3.js」は外した方が良いかと思います。「D3.js」は「three.js」とは関係が無いライブラリである為です。

[m.ts10806]

タイトルには要件を記載してください。
https://teratail.com/help/question-tips#questionTips3-1
現状だと何も内容がないです。

[justmeet0924]

すみませんでした。
また出直します。

[m.ts10806]

いえ、質問編集してもらえたらそれで良いのですが。

[m.ts10806]

解決後でも誰かが参考にする可能性は大いにあるので今からでも修正しておいてもらえると

[justmeet0924]

やってみました。でも、「THREE」が何なのか？はわからなかった・・・。

[m.ts10806]

解決済みにされてるので現在ついているcx20さんの回答で理解できたのでは？

[justmeet0924]

一つの投稿で、二つ分の疑問を解決するのは贅沢なので、これについてはまた新しく質問します。

[justmeet0924]

moduleについては理解しました。

[m.ts10806]

ではその旨、回答者さんにフィードバックしてあげてください。私はあくまでタイトルをちゃんとしてもらいたかっただけなので。

Answer 1

three.module.jsとは？

three.js.module.js は three.js の ES Modules の規格のライブラリになります。
下記の説明が詳しいですが、ざっくりと説明すると import 文を使ったライブラリの読み込み可能になります。
最近の three.js のサンプルはこの形式で書かれています。

■ ブラウザで覚えるES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA
https://ics.media/entry/16511/

使い方については下記を参照下さい。

■ three.js 入門 (2) - インストール
https://note.com/npaka/n/n0d16d72dcd95

＜追記＞
上記の note の記事の内容は公式サイトの仮訳でしたが、公式サイトの方も日本語化されたようです。
全部が翻訳されているわけではなさそうですが、主要なものについて日本語版が用意されているようです。

公式サイトの説明だと Skypack というサービスを利用することで CDN 経由で ES Modules の形式のライブラリが利用できるようです。

■ CDNや静的ホスティングからインストールをする
https://threejs.org/docs/index.html#manual/ja/introduction/Installation

<script type="module">
  // Find the latest version by visiting https://cdn.skypack.dev/three.
  import * as THREE from 'https://cdn.skypack.dev/three@<version>';
  const scene = new THREE.Scene();
</script>

Comments

[cx20]

three.js のリポジトリでは r106 以降は ES Module の形式のサンプルとなっている為、前の形式を希望される場合は、r105 以前のサンプルを参照下さい。
https://github.com/mrdoob/three.js/blob/r105/examples/webgl_postprocessing_unreal_bloom_selective.html

[cx20]

r105 と r106 のサンプルを比較すると違いが理解しやすいかと思います。
https://github.com/mrdoob/three.js/blob/r106/examples/webgl_postprocessing_unreal_bloom_selective.html