Three.jsでWebGLをやろう！【#0概念編】

かっこいい動きをするWebサイトをつくりた〜い！

こんにちは。WANIGAKIです。
今日からWebGLをやりたいと思います。

これは日記であり、わかりやすい説明をするものではないです。
そのうえ私はなんちゃってで技術を学ぶけしからん野郎なので間違ってることも多々あると思います。ご勘弁を。

CanvasとWebGLとThree.js

1. WebサイトはHTMLとJavaScriptとCSSでできている
わかる。学校で一瞬習った。

2. HTMLのCanvasなるものを使うと図形を描画できる
なるほど。jpegの画像やmp4の動画を貼りつけるだけじゃ表現できないインタラクティブな表現をしたかったらCanvasを使えばいいということだ。

3. Canvasにカッコイイ表現をするにはWebGLというしくみを使う
はい。

4. 直接「生のWebGL」を扱うのは大変なのでThree.jsなどのライブラリを使うといいよ
へえ〜。

5. Three.jsはnpmでインストールするんだよ。ちなみにVSCodeでThree.jsの入力補完をさせるには...
………

6. こちらのサイトを参考にしましょう

最新版で学ぶThree.js入門 - 手軽にWebGLを扱える3Dライブラリ

あぶないあぶない。危うくすべてを諦めてAPEX Legendsを始めるところでした。今回は上記のチュートリアルをやってみることにします。
いってきま〜す。

大事なこと

さて、Three.jsのチュートリアルをやってみてだいぶイメージがつかめました。

Blenderやらで作る3Dととほぼ一緒で、3D空間にオブジェクト、ライト、カメラを設置し、その世界をレンダラーで一枚の絵にしてCanvasに表示する、ということです。

そしてThree.jsがそれらを準備してくれているので我々は「カメラ！」「ライト！」と宣言するだけでいいと。なんて優しいんだ。

真理の図。これだけは載せないといけないと思い
（参考サイトのほぼまんま）描いた。

Blender。真理に極めて近い。

Blenderなら使ったことあるし、なんかいけそうな気がしてきましたね。

ではまた。