Threejsに入門してみる@udemy

前少し触ったが、Threejsに入門してみる。
以下のudemyで学びます(ありがとうございます)

【Three.js入門】モダンな3Dフロントエンド技術を習得して周りのエンジニアと差をつけよう！
https://www.udemy.com/course/threejs-beginner/

Threejsの意味はx,y,z軸の３と思われる

３つの大事な要素

• シーン
• カメラ
• レンダラー

シーン

いろいろな物を配置するようの空間を「シーン」と呼ぶ

カメラ

どこを映すかを決める
現実のカメラと同じ
仮想空間にあるので、視野角や映す距離などを数値で決めれて面白い

レンダラー

出力方式の設定。
カメラで映したものをどう言う形式で画面に描画するかを決める

光源

どんな光をどこに置くのかを決められる。スゴイ。
光源はオブジェクトと違ってどこにあるのかがわかりにくいので、
場所を表示してくれるヘルパーが用意されている。
これを使うことでどこに配置されているかが視覚的にわかる。

モノ系

ジオメトリ

骨、枠組みの決め。
丸にしたり、三角にしたり、四角にしたり、形を決める。

マテリアル

材質。
色をつけたり、画像を貼ったりすることで、表現できる。

メッシュ

「ジオメトリ」＋「マテリアル」で作られるオブジェクト。
枠組みに色付けなどのイメージ。

ポイント光源を動かそう

Date.now()で光源をうごかすのか、なるほど
requestAnimationFrame()でフレームごとにできる
関数を再帰的に呼ぶイメージ

テクスチャの貼り付けは画像ファイルをよみこんで、マテリアルに指定すればオッケー

解像度が合っていないとジャギる
レンダラーに対してピクセル比をwindow.devicePixelRatio()を設定する

慣例としてDOMロード完了時にイニシャライズでコードを読み込むようにする

リサイズ時にレンダラーサイズを更新
アスペクト比を直す

window.innerWidthはよく使うっぽい
サイズやアスペクト比に使える

形

• box
• sphere
• plane
  • 地面に使える
  • 裏面は見えない
  • sideをdoubleSideに指定すれば裏面も見える
• torus

Buffer geometryは継承元になっている
単純なジオメトリーを自作したいときに使える（複雑なものは別で作ったほうが良い）

頂点（XYZ）を配列に詰める
区切りを指定する
描画
の流れで生成

Arrayバッファなので、効率やスピード重視の持ち方になってる感じかな

パーティクルとか、宇宙空間の塵とか、使えそう

UIデバッグとかいう、すげー便利そうなものでできた

色んな種類があり、lil-GUIがオススメ

ああ、やっぱりすげぇ便利そうだ
gui.add()でコントロールに簡単に追加できる
例ではx座標をバーで動かしている

配置決めとか、オブジェクトの形の確認とか
工夫次第でいろいろ役立ちそう

汎用で使えるような予約語があって、チェックボックスでの制御が簡単に追加可能

addの場合
visible
wireframe

addColorの場合
color

addfolderでフォルダ管理も可能

球の形使えばミラーボールとか簡単に作れそう
三角形の寄せ集めでできてるので

clock()が用意されていて経過時間が取得できる

テクスチャとカラーは組み合わせて使える
opacityも行けるが、transparent trueを指定する必要あるので注意

MeshBasicMaterialは光源がなくても使えるので、
とても使いやすい
→動作も軽そうね

MeshNormalMaterialも光源がなくて使える
物体のジオメトリ面の向きで色がカラフルに決まる
→動作は軽くしつつ、見た目は結構ポップにできる

MeshStandardMaterialは光源が必要
roughness（粗さ）やmetalness（金属感）で光の反射をコントロールし物質の材質を表現できる
色もテクスチャも貼れる

MeshPhongMaterialは光源が必要、反射率を決定可能
shininess（反射率）やspecular（鏡面反射の色）などが設定できる
→光の色じゃなくて、物質の方に色を設けるの違和感あるなー。

光源のステップに入ります

AmbientLight（周囲光）
全体に均一に、globalに照らす

threejsでは光のバウンシング（床面等での反射）がない
→これを薄いAmbientLightで疑似表現するときに使える

DirectionalLight（平行光源）
太陽のような、直線的な光源
真上から降り注ぐなど

さっきの説明の通り

threejsでは光のバウンシング（床面等での反射）がない

ので、薄いAmbientLightはつけておくべき(グレーなどで薄く)

原点(0,0,0)に向かって降り注ぐ
距離と強さに関係ないので、距離を離しても意味がない

HemisphereLight（半球光源）
引数は、（空の色、地面の色、光の強さ）

おしゃれな色にできるけど、ちょっとセンスが必要そう

PointLight（ポイント光源）
引数は、（色、強さ、距離、減衰）
おお、現実に近いかも
間接照明みたいで良さげ

RectAreaLight（長方形ライト）
引数は、（色、強さ、幅、高さ）
MeshStandartMaterialかMeshPhisycalMaterialのみで使える

ドキツイ感じで扱い難しそう
くっきり特色がでるから、目立たせたいときに使えそう

.lookAt()で照らす方向をしていできる

Spotlight（懐中電灯）
まさにスポットライト
設定できる引数が多い

これも目立たせたいときに使えそう
引数からぼやかし具合も調整可能

回転を加えるのは難しい
spotLight.targetで調べてみると、(0,0,0)のpositionにいる
.target.position.x = 1;にしてみるが、シーンにないので反映されない
シーンに.targetを加えると反映される
ここらへん反映されない理由がわからずハマりそうポイントだな。。

先程も言ったように、ヘルパー光源があるので、視覚化できるよ
ヘルパー光源はライトの種類ごとに用意されている
例pointLightHelper()

SpotLightHelperも.target変更についていけない
window.requestAnimaionFrame(()=> spotLightHelper.update());

RectAreaRightのヘルパーだけはヘルパーモジュールに用意されている（なぜ？ｗ）

カメラに入りまーす

カメラの種類

６つある

ArrayCamera

複数のカメラ
マリカーの多人数プレイみたいなことができる

PerspectiveCamera

現実と同じく、遠いものは小さく映る

OrthographicCamera

距離に応じて形が変わらない
普通使わない

CubeCamera

環境マッピング生成用のカメラ

StereoCamera

VR的なやつ

Camera

抽象的基本クラス

PerspebtiveCamera

mousemoveeventでclientXを元に決める。

camera.posoitionのsin, cons,とcursorXでの操作
lookAtで物体を見続ける

OrbitControls

物体を見続けるクラス。
Cameraの基底クラス使わずこれで良さげ
enableDampingでスムーズスクロール

パーティクルを作ってみよう

• ジオメトリ
  • いっぱいgeometryつかう場合はbufferGeometryでパフォーマンスを向上
• マテリアル
  • パーティかる用のPointsMateriall
• メッシュ
  • パーティクル用のPoints

エッジが見えてしまう

• 深度のテストを自動的にやっている、コレをOFFにする
  • depthTest: false,
  • 別のケースではバグってしまう
  • 深度がなくなるので奥のパーティクルが見えてしまう
• depthWrite: false,
  • これで解決

https://qiita.com/masato_makino/items/ce57452196d480aaa203

一通り学べたのでクローズ！