Three.jsを使用して「SCP132jp」を作れるのでは？？
という軽い気持ちで手を出したら、そこは毒沼でした・・・
ずぶの素人の備忘録です。
1.どのThree.jsを使うのか
Three.jsは現在下記3種類をダウンロードできます。
・three.js
通常のthree.js。デバックが容易なので初心者に優しい。
・three.mini.js
通常のthree.jsよりかなりサイズが小さいので、WEBサイトに公開する際はこっちを使うらしい。
・three.module.js
ES modulesの規格ライブラリ。mainのJavaScriptファイルから別のJavaScriptファイル(loaderとか)を読み込めるので、HTMLファイルにたくさん記述しなくて便利。記述の際はtype = "module"になるのでちょっと注意。
結論は、作りたいものによる！！ですが
始めたてでジオメトリとかサンプルを作りたい→ three.js
色々理解してきたから、マウスコントロールしたり、外部から3Dファイルを読み込んで作りたい→three.module.js
かなと個人的には思います。
2.ディレクトリを間違えるとエラーが多発
これに関しては所詮 ”おま環” な気がしますが、結構苦しんだのであえて書きます。
現在、HDDがは「C:」「D:」「E:」の三つを使用しています。
1 容量を気にして「E:」にthree.jsをダウンロード
2 「D:」で作り始め、「E:」のthree.jsを読み込むよう設定
3 Chromeブラウザに描画 →CORSオリジンエラー発生
対策
ディレクトリの階層構造はちゃんと考える！（当たり前）
あとは、使用していたのがVScodeのLiveSeverだったので、CDN等を利用するのも良いかと思います。
少し違いますが、three.module.jsを使用した際もエラー多発しました。これは、呼び出すJavaScriptファイルに書いてあるthree.module.jsのパスを書きなおせば直ります。
3.カメラ、ライト、ジオメトリー...種類多い
シーン、カメラ、レンダーを用意して、その中にライトや表現したい物体を設置するイメージでコーディングしていきます。各々種類が多いので、よく使うものだけをまとめます。
1 シーン
様々なオブジェクトをすべて保持するコンテナで、ステージや舞台のイメージです。オプションはそんなにないですが、オブジェクトを設定したらscene.add()で追加しないと描画されないので注意！
2 カメラ
描画する範囲を設定できる。基本的にはPerspectiveCameraを使用しますが、他にも種類があります。
サンプル
const camera = new THREE.PerspectiveCamera(垂直視野,アスペクト比,開始距離,終了距離);
//引数はすべて数字
camera.position.set(x座標, y座標, z座標);
//カメラの位置を決める
3 レンダー
シーンとカメラをブラウザ画面に描画する。
4 描画する物体の設定
ジオメトリ(形状)、マテリアル(材質)を設定してメッシュ化の流れで書いていきます。
・ジオメトリ→立方体、球、円錐等様々
・マテリアル→メタリックや透明度、色などたくさんのプロパティを設定できます。
・メッシュ→ジオメトリとマテリアルをまとめてシーンに追加できるようにする。
サンプル
//ジオメトリ（立方体）
const box = new THREE.BoxGeometry(幅,高さ,深さ);
//マテリアル
const material = new THREE.MeshBasicMaterial({
color: "#ffffff",
metalness:0.5,
//ここにプロパティを書いていく
});
//メッシュ
const mesh = new THREE.Mesh(box, material);
//設定したジオメトリとマテリアルを入れる
5 ライト
物体を照らすライト（マテリアル設定では影響しないこともある）。影を落とすことができるものと できないものがあるので注意。
・AmbientLight→基本的なライト。色を設定でき、オブジェクトにもその色が影響する。
・SpotLight→スポットライト。影を落とすことができる。
・PointLight→全方向に光が発散する。影を落とすことはできない。
サンプル
//ライト
const light = new THREE.AmbientLight( 色 );
4.三角関数、クォータニオンなど数学の地獄
カメラやメッシュのアニメーションを付ける際に必須です！絶対に使います。
それでもThree.jsは面白い
3Dソフト「Blender」などで作ったモデルをloarderで読み込めば、描画もできるしアニメーションも付けられるし、マテリアルやライト以外にもシェーダーを使えばより多彩な表現ができます！そして、それを作るのはとても楽しいので、触ってみてください。
Three.jsのダウンロードはこちらから