three.js で基本となる、
Renderer, Scene, Cameraについて

Three.js はHTMLのドキュメントロードが終わったタイミングで、最低限、Renderer, Scene, Cameraの3つのインスタンスを生成する必要がある。

以下にそれぞれの概略を記載する。

レンダラー(Renderer)

シーンを描画してくれるインスタンスで、
一緒に渡したカメラからの視点で画面に描画(レンダリング)してくれる。

レンダラーの種類はいくつかあるが、
主に使うのはWebGLRender。

レンダラーの種類

• WebGLRender
  WebGLを、扱う為のレンダラー
  (基本はこのレンダラーを使う。)

• CanvasRender
  2DContextを扱えるレンダラー
  WebGLが使えない場合に2DContextを使って3D表現する事が出来る。
  もちろんGPUを使う事は出来なくなる。

他にもSVGレンダラーとか、色々あるようだが、
使い所がわからない…。

きっと凄い使い方ができるんだろうか。

シーン(Scene)

１つの世界
3次元空間を指すもの。

シーンに色んなオブジェクト(球体、箱、グリッドなど)を追加する事で、3D空間に配置する事が出来る。

配置したオブジェクトはレンダリングする事で画面に表示される。

レンダリングする際は、カメラと一緒にレンダラーに渡す。
渡したカメラから見た光景を描画してくれるという訳だ。

シーン内の座標系は、OpenGLと同じ右手座標系が使われている。

カメラ(Camera)

透視投影とは、
遠くのものは小さく、近くのものは大きく表現して表示してくれる。

一般的に僕らが見ている世界の見え方を再現している。

透視投影の他にも、
正投影できるカメラも用意されている。

シーンと一緒にレンダラーに渡すと描画してくれる。

生成したカメラに必要な設定は以下の通り。

• カメラの位置座標
• カメラ視野の中心座標
• カメラの上ベクトル
• カメラ性質のパラメータ

カメラ性質のパラメータに関して

項目	説明
fov	視野角
aspect	縦横比
near	表示範囲の手前までの距離
far	表示範囲の奥までの距離

おしまい

必要最低限のレンダラー、シーン、カメラについて学んだ。

レンダラーに関しては
使うレンダラーを変更するだけで描画が可能。

WebGLが対応していないデバイスでは、
WebGLRenderの代わりにCanvasRenderを使うという使い分けも出来そう。

しかし、WebGLRenderでないとGPUによる描画が行われないので、代わりに使った所で処理速度が遅く使い物にならないかもしれない。

次は、簡単なデモを作ってみるぜ。