Away3D TypeScriptではじめる3次元表現

第1回 Away3D TypeScriptで基本的な3次元の形状をつくる

この記事を読むのに必要な時間:およそ 6 分

ここまで解説したJavaScriptコードをまとめれば,3次元空間に球体をひとつ置くにはあと一歩だ。何が足りないのかというと,このまま試したのでは物体が表れない。Away3D TypeScriptは内部的につくったCanvasに描くため,必ず描画のメソッドView.render()を呼び出さなければならないのだ。

View.render()メソッドの呼出しを加えてまとめたのが以下のコード1になる。これで,3次元空間に球体がひとつ描かれる図4⁠。注意したいのは,コード1View.render()メソッドを2回呼び出していることだ。これは誤りではない。なぜか1回の呼出しだけでは,物体が描かれないために加えてある※2⁠。確認用に,コード1をjsdo.itにもサンプル2として掲げた※3⁠。

図4 3次元空間に描かれたひとつの球体

図4 3次元空間に描かれたひとつの球体

コード1 3次元空間に球体をひとつ置く

var view;
var sphere;
function initialize() {
  var directionalLight = createDirectionalLight(0.25, 0x00FFFF);
  view = createView(240, 180, 0x0);
  sphere = createSphere(300, 32, 24, directionalLight);
  view.scene.addChild(sphere);
  view.render();
  view.render();
}
function createView(width, height, backgroundColor) {
  var defaultRenderer = new away.render.DefaultRenderer();
  var view = new away.containers.View(defaultRenderer);
  view.width = width;
  view.height = height;
  view.backgroundColor = backgroundColor;
  return view;
}
function createSphere(radius, segmentsH, segmentsV, light) {
  var defaultTexture = away.materials.DefaultMaterialManager.getDefaultTexture();
  var material = new away.materials.TriangleMethodMaterial(defaultTexture);
  var sphere = new away.prefabs.PrimitiveSpherePrefab(radius, segmentsH, segmentsV)
  .getNewObject();
  sphere.material = material;
  material.lightPicker = new away.materials.StaticLightPicker([light]);
  return sphere;
}
function createDirectionalLight(ambient, color) {
  var light = new away.entities.DirectionalLight();

  light.ambient = ambient;
  light.color = color;
  return light;
}

サンプル2 Away3D 14/08/26: Creating a sphere in the 3D space

※2
仕様としてわかりにくいし,そう決める理由も考えづらい。だが,これまでのところ修正はされておらず,⁠Away3D Forum」に報告しても回答が得られなかった(⁠A static object of Away3D TypeScript is not displayed⁠。もっとも,多くのサンプルコードはアニメーションなので,再描画が繰返されるため,気にせずに済まされているようだ。
※3
Away3D TypeScriptのライブラリは,今のところCDNでは配信されていない。そのため,jsdo.itによりJSファイルをアップロードしてscript要素に読込みんでいる(前掲サンプル2の[HTML]の欄参照⁠⁠。また,body要素に属性が加えられないので,初期設定の関数(initialize())はJavaScriptコードの最後に呼び出した。

球体以外の基本的なかたちをつくる

Away3Dでは球体以外にも,基本的なかたちがつくれるひながたのクラスはいろいろある。3つほど紹介して,今回は締めよう。つぎの表3は,平面と直方体およびドーナッツ型をつくるひながたのクラスのコンストラクタだ。引数として渡す幾何学的な数値に違いがある。だが,ひながたオブジェクトにPrefabBase.getNewObject()メソッドを呼出してMeshオブジェクトが得られることは変わらない。つまり,コンストラクタを差し替えるだけで,これらのかたちの物体がつくれる。

表3 平面・直方体・ドーナッツ型のひながたをつくる

ひながたをつくるコンストラクタ引数の値
PrimitivePlanePrefab
(幅, 高さ)
平面のひながたをつくる。
ー 平面のx軸方向の長さ。デフォルト値は100。
高さ ー 平面のz軸方向の奥行き。デフォルト値は100。
PrimitiveCubePrefab
(幅, 高さ, 奥行き)
直方体のひながたをつくる。
ー 直方体のx軸方向の長さ。デフォルト値は100。
高さ ー 直方体のy軸方向の長さ。デフォルト値は100。
奥行き ー 直方体のz軸方向の長さ。デフォルト値は100。
PrimitiveTorusPrefab
(半径, 太さの半径, 水平分割数, 垂直分割数)
ドーナッツ型のひながたをつくる。
半径 ー ドーナッツ型の大きさを示す半径。デフォルト値は50。
太さの半径 ー ドーナッツ型の太さを示す半径。デフォルト値は50。
水平分割数 ー 曲面の水平方向の分割数。デフォルト値は16。
垂直分割数 ー 曲面の垂直方向の分割数。デフォルト値は8。

ひとつ練習として,前掲コード1の球体をつくる関数(createSphere())を下敷きにして,ドーナッツ型をつくる関数に書き替えてみよう。この関数(createTorus())はつぎのように呼び出して,3次元空間にドーナッツ型を加えたい。呼出す関数を差し替えるだけで,前掲コード1の仕組みは変えない。

var torus = createTorus(300, 32, 24, directionalLight);
view.scene.addChild(torus);

図5 3次元空間に描かれたひとつのドーナッツ型

図5 3次元空間に描かれたひとつのドーナッツ型

前述のとおり,基本的にはコンストラクタと引数だけ,つぎのように書き替えればよい。物体の変数名(torus)は関数名(createTorus())に合わせて変えただけだ。もうひとつ,かたちを真横から見たのでは,ドーナッツ型かどうかわからない。そこで,DisplayObject.rotationXプロパティにより角度を少し傾けた(前掲図5参照⁠⁠。

function createTorus(radius, segmentsH, segmentsV, light) {
  var defaultTexture = away.materials.DefaultMaterialManager.getDefaultTexture();
  var material = new away.materials.TriangleMethodMaterial(defaultTexture);
  // var sphere = new away.prefabs.PrimitiveSpherePrefab(radius, segmentsH, segmentsV).getNewObject();
  var torus = new away.prefabs.PrimitiveTorusPrefab(radius, radius / 3, segmentsH, segmentsV)
  .getNewObject();
  torus.material = material;
  torus.rotationX = -30;
  material.lightPicker = new away.materials.StaticLightPicker([light]);
  return torus;
}

さて次回は,3次元空間に加えた球体の表面にビットマップ,いわゆるテクスチャを貼ってみよう。そして,物体に回転のアニメーションを加えるつもりだ。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書