初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

2章シーンの基本要素

前章でThree.jsの基本について学びました。いくつかのサンプルを紹介し、読者にとってはおそらく初めてである完全なThree.jsシーンを作成しました。この章ではもう少しThree.jsの詳細に踏み込み、シーンを構成する基本的なコンポーネントについて説明します。この章で説明するのは以下のようなトピックについてです。

• Three.jsシーンで使用されるコンポーネント群
• Three.Sceneオブジェクトを使用してできること
• ジオメトリとメッシュの関係
• 平行投影カメラと透視投影カメラの違い

初めにシーンを作成する方法と、そこにオブジェクトを追加する方法について説明します。

2.1　シーンの作成

前の章でTHREE.Sceneを使用したので、すでにThree.jsの基本についてはある程度知っているはずです。シーンに何かを表示するには表2-1にある3つの種類のコンポーネントが必要でした。

表2-1　シーンの表示に必要な3つのコンポーネント

コンポーネント	説明
カメラ	シーンに何を描画するかを決定する
ライト	マテリアルがどのように表示され、影を作成する時にどのように使用されるか（詳細は「3章 光源」で説明）に影響を与える
オブジェクト	カメラの視点で描画される主な物体群。立方体、球など

THREE.Sceneはさまざまなオブジェクトすべてを保持するコンテナです。このオブジェクト自身のオプションや機能はそれほど多くありません。

	THREE.Sceneはシーングラフとも呼ばれることのある構造体です。シーングラフはグラフィカルなシーンの必要な情報をすべて保持している構造体です。つまりThree.jsでいうと物体、ライト、その他レンダリングに必要なオブジェクトのすべてを ...