WebGL対応のJavaScriptフレームワークAway3Dのチュートリアル第3回では様々な基本的な形状について説明していきます。これからAway3Dをはじめようという方はまずは第1回の入門編の記事を参考にして頂ければと思います。

Away3Dの基本的な形状を確認する

形状(ジオメトリとも言います)を指定することで「球体」や「立方体」、「平面」など様々な3Dのオブジェクトを表示することができます。言葉で説明するより、実際に動くものを見たほうがわかりやすいと思いますので、次のデモを試してみてください。

クリックすると別ウインドウで再生されます

クリックすると別ウインドウで再生されます

上記のデモのような形状が Away3D で扱える基本的な形状として、7 種類用意されています。

  • 平面
  • 球体
  • 直方体
  • 三角錐
  • 円柱
  • カプセル形状
  • ドーナツ形状

基本的な形状を利用するためのサンプルコード

Away3Dでは形状とマテリアルを結合しメッシュを作成することによって、表示可能な3Dのオブジェクトを得ることができます。マテリアルに関しては連載の第2回で紹介しましたが、形状はクラスのインスタンスを作成することで用意できます。

具体的なコードですが、球体の場合を例にして紹介しますと次の①の部分を変更すれば任意の形状を設定することができます。

// 3Dの土台を作成します
view3d = new away.containers.View();

// マテリアルを作成します
var material = new away.materials.TriangleMethodMaterial(0xFF0000);

// ①形状を作成します (球体の場合)
var prefab = new away.prefabs.PrimitiveSpherePrefab(300);

// 形状とマテリアルからメッシュを作成します
mesh = <away.entities.Mesh> prefab.getNewObject();
mesh.material = material;

// meshをsceneに追加すれば表示されます
view3d.scene.addChild(mesh);

様々な形状のスクリプトを確認する

Away3Dに用意されている様々な形状を実現するコードを見て行きましょう。なお、それぞれの形状のクラスファイルは away.prefabs パッケージに所属しています。

away3d-sphere

// 球体のジオメトリ
new away.prefabs.PrimitiveSpherePrefab(radius, segmentsW, segmentsH, yUp)

away3d-cube

// 直方体のジオメトリ
new away.prefabs.PrimitiveCubePrefab(width, height, depth, segmentsW, segmentsH, segmentsD, tile6)

away3d-plane

// 平面のジオメトリ
new away.prefabs.PrimitivePlanePrefab(width, height, segmentsW, segmentsH, yUp, doubleSided)

away3d-cone

// 三角錐のジオメトリ
new away.prefabs.PrimitiveConePrefab(radius, height, segmentsW, segmentsH, closed, yUp)

away3d-cylinder

// 円柱のジオメトリ
new away.prefabs.PrimitiveCylinderPrefab(topRadius, bottomRadius, height, segmentsW, segmentsH, topClosed, bottomClosed, surfaceClosed, yUp)

away3d-capsule

// カプセル形状のジオメトリ
new away.prefabs.PrimitiveCapsulePrefab(radius, height, segmentsW, segmentsH, yUp)

away3d-torus

// ドーナツ形状のジオメトリ
new away.prefabs.PrimitiveTorusPrefab(radius, tubeRadius, segmentsR, segmentsT, yUp)

パラメーターについて

上記で紹介した形状ですが、それぞれにクラスのコンストラクタの引数で大きさ等を指定することができます(引数は省略可能なので指定しなくても動作します)。ほとんどのクラスで同じ引数を取るのですが、代表的なものを紹介すると次の通りです。

  • width : 横幅
  • height : 高さ
  • depth : Cubeにおける奥行き
  • radius : 半径。Sphere では球体の半径で、ConeとCylinderでは底辺の半径。
  • segmentsW : 横方向の分割数
  • segmentsH : 縦方向の分割数
  • yUp : 向きの指定

segments (セグメント)というパラメーターは二次元表現にはありませんので、見慣れないパラメーターだと思います。3D では表示オブジェクトをポリゴン化して表示させるのですが、セグメントというパラメーターは大雑把にいうとポリゴンの細分化の分割数となります。例えばセグメントを増やすと、球体( Sphere )ではより滑らかになります。

まとめ

今回のチュートリアルでは、基本的な形状についての解説を行いました。平面や直方体など基本的な形状を組み合わせるだけでも様々な3D表現を作ることができます。ぜひサンプルを元に色々と試してみてください。

第3回目の記事は以上です。今回のソースファイルはこちらからダウンロードできます。

次回の記事では、カメラの制御方法を説明します。

連載目次