【WebGL】Three.jsを習得するためにやったことまとめ（随時更新）

WebGL（ブラウザ3DCG）に憧れて、ライブラリThree.jsに取り組む。
2019年は中断してしまったが2020年に再開すべく、「JSライブラリ」記事から独立させました！

（その他のJSライブラリについてはこちら）
※参考：JSライブラリ&フレームワークを試してみたシリーズまとめ（随時更新）

※2022/11/15追記：Next.js環境でThree.jsを動かす

WebGLとは

WebGL APIについてはこちら
※参考：周回遅れでもWebGLを事始める！canvas大地に立つ!!

Three.js入門（入門編）

回る箱

ICS MEDIAサイトの「Three.js入門」に入門してみる！クルクル回転する立方体を作る。

※参考：Three.js入門サイトに私も入門する！！

値の打ち替え

クルクル回る立方体のいろいろな値を打ち替えて、サイズを変えたり形を変えたりしてみた。

※参考：【Three.js】回る箱をいろいろ打ち替えてみる

マテリアルとライティング

画像を球体に貼ってみた（2020/01/09追記！）

※参考：【Three.js】マテリアルとライティング設定（入門編に再入門！）

ジオメトリ

ジオメトリ設定で色々な形状を作る（2020/03/08追加！）

※参考：【Three.js】ジオメトリ設定で形状を色々変えてみる

カメラポジション

カメラポジションを理解しよとしたら三角関数の勉強になった（2020/04/13追加！）

※参考：【Three.js】カメラ制御を実現している「三角関数」を理解する！（サイン、コサイン、タンジェント）

OrbitControls.jsを使ってカメラを360度グリングリン動かす（2020/05/02追加！）

※参考：【Three.js】OrbitControls.jsでカメラの位置をインタラクティブに動かす！

Three.js入門（基礎編）

いろんなマテリアルを設定して比較（2020/05/17追加）

※参考：【Three.js】いろいろなマテリアルを貼ってみる

Three.js + Next.js

Next.js環境でThree.jsを動かす（2022/11/15追加）

※参考：【Three.js + Next.js】Three.js再始動！Next.js環境でThree.jsを動かすの巻

随時更新していきます！