Three.jsの使い方とWebGLに関するあっさりした説明

1. Three.js使ってみた
谷口晴哉

2. WebでイケてるCGを描画したい！
と思い最近WebGLのラッパーライブラリの
Three.js触り始めました．

3. 今回はWebGLの概要とThree.jsの
使い方についてサクッと説明します．

4. What s WebGL
• ブラウザに標準搭載されている，canvasにCGをリアルタイ
ムに描画できるAPI．
• GPUを使っているため高速なレンダリングが可能．

6. WebGLを使った事例

10. WebGLは低レイヤなAPIなので直接書くのは難しい．
ポリゴン一個表示するのに２００行😭

11. もっと手軽にWebでCGを扱いたい．．．

12. そこで Three.js！
• Webブラウザ上で手軽にCGを描画できるWebGLのラッパ
ーライブラリ．
• とても広く使われており，盛んに開発されていている勢い
のあるライブラリ．

13. 今回扱う例
陰影のついたトーラスを描画する．

14. Three.jsで出てくる言葉の解説
• シーン(scene)：描画する3Dモデル
（Mesh）やライトを管理する．
• メッシュ（Mesh）：3Dモデルそのも
の．形状を定義するgeometryと質感や
色を定義するmaterialを組み合わせたも
のというイメージ．
• カメラ(camera)：その名の通りカメラ．
• レンダラ(renderer)：カメラとシーンを
渡すとCGを描画してくれる．

15. 今回必要な処理
1. rendererの設定
2. cameraの設定
3. sceneの設定
4. トーラスのMeshを作成し，
sceneに追加
5. ライトを定義し，sceneに追加
6. 出来上がったsceneとcameraを
rendererに渡して描画して完成．

16. https://glitch.com/edit/#!/digitalcube-lt-for-explain
それではコードを見ていく

17. カメラの各パラメータ

18. 平行光源のイメージ

19. 環境光のイメージ

20. 画像引用元
• https://wgld.org/
• WebGLスクール講義資料