Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@i-ryo

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

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

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

※2020/05/17追記:いろんなマテリアルを設定して比較

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】いろいろなマテリアルを貼ってみる

随時更新していきます!

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
7
Help us understand the problem. What is going on with this article?