Three.js のお勉強の続きです。

今回は 3Dオブジェクト！！

Three.jsでは、3D空間に配置するオブジェクトを3Dオブジェクトと呼んでいます。

3Dオブジェクト

3Dオブジェクトは、
形状と材質から構成される。

Meshクラスのコンストラクタに、形状と材質をプロパティとして渡す事で、3Dオブジェクトを生成する事が出来ます。

生成したオブジェクトは、シーンに追加して3D空間に配置する。

形状とは

Geometry(ジオメトリ)と呼ばれ
頂点と線の組み合わせで、形を表現する為の情報です。

直方体、球、円柱、平面、円錐など
Three.js では、あらかじめ良く使うジオメトリが用意されています。

例えば、球の形状であれば、
SphereGeometory というクラスをnewするだけです。

形状を生成する際に分割数を指定する事も出来ます。
数を増やすとポリゴン数が増えて球の場合はどんどん滑らかになって行きます。

自分で頂点を作成してオリジナルのジオメトリを作成する事も可能。
また頂点には、頂点カラーを設定する事もできます。

材質とは

Material (マテリアル)と呼ばれる。
3Dオブジェクトを描画する際の、表面の色合いを表す。

法線材質など、光の当たる角度とカメラの位置によって、
表面の色合いが変化して描画されるものなどがある。

発光材質、ランバード材質、フォン反射材質などなどなど。

マテリアルには、opacityというプロパティも用意されているので、
半透明のオブジェクトを描画することも出来ます。

ジオメトリの種類

Three.jsで用意されているジオメトリの一覧

名称	クラス
箱	BoxGeometry
平面	PlaneGeometry
円	CircleGeometry
球	SphereGeometry
円柱	CylinderGeometry
トーラス(ドーナツ形状)	TorusGeometry
球面上ポリゴン	PolyhedronGeometry
回転体	LatheGeometry
正四面体	TetrahedronGeometry
正八面体	OctahedronGeometry
正十二面体	DodecahedronGeometry
トーラスノット型	TorusKnotGeometry
パラメトリック	ParametricGeometry
チューブ	TubeGeometry
テキスト	TextGeometry

他にもめっちゃくちゃいっぱいある…。

マテリアルの種類

Three.jsで用意されているマテリアルの一覧

名称	クラス
法線	MeshNormalMaterial
発光	MeshBasicMaterial
カメラ距離	MeshDepthMaterial

Mesh~ で始まるクラスは、
メッシュして3Dオブジェクトを作るのに使う。