search
LoginSignup
7

posted at

updated at

【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を動かすの巻

随時更新していきます!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7