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

第2回 物体にテクスチャを貼って回す

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

3次元空間でボールを回す

つぎに,ボールを3次元空間で回す。今回はまだインタラクションはなしで,Away3D TypeScriptのアニメーションの仕組みを学んでおこう。アニメーションにはRequestAnimationFrameクラスを用いる※2⁠。RequestAnimationFrame()コンストラクタの引数に与えた関数が,1秒間に約60回の頻度で呼出される。ただし,RequestAnimationFrame.start()メソッドでアニメーションを始めないといけないことに気をつけてほしい。

そこで,初期化の関数(initialize())に,つぎのようにRequestAnimationFrameクラスによるアニメーションの定めを加えた。コールバック関数(rotate())は,ボール(sphere)をx軸とy軸周りに1度ずつ回す。なお,角度を360度の剰余で与えているのは,数値が大きくなりすぎて意図しない動きになるのを防ぐためだ。

var timer;
function initialize() {

  timer = new away.utils.RequestAnimationFrame(rotate);
  timer.start();

}

function rotate(timeStamp) {
  sphere.rotationX = (sphere.rotationX + 1) % 360;
  sphere.rotationY = (sphere.rotationY + 1) % 360;
  view.render();
}

物体の回転について,細かいことをひとつ補っておく。 DisplayObject.rotationZプロパティを使えばz軸で回すこともできる。だが,x軸とy軸で,数学的にはz軸周りにも回せる。z軸による回転は,xy平面で回すことを意味する。同じように,x軸ならyz平面上の回転になる。yz平面はy軸で90度回せば,xy平面に重なる。つまり,x軸とy軸で,z軸と同じ回転が表せるということだ。3次元空間における回転を少し突っ込んで扱うようになったときのために,このことは頭の片隅に置いてほしい。

これでビーチボールが水平および垂直に回るようになった。サンプル1としてjsdo.itに掲げよう。スクリプトは以下にコード2としてまとめた。次回は,テクスチャつきの床を加えるとともに,ボールそのものを回すのでなく,ドラッグでカメラの視点が移るようにインタラクションを与えて仕上げたい。

サンプル1 Away3D 14/08/26: Rotating a texture mapped sphere in the 3D space

コード2 球体にテクスチャを貼って3次元空間で回す

var view;
var sphere;
var imageDiffuse = "assets/beachball_diffuse.jpg";
var timer;
function initialize() {
  var directionalLight = createDirectionalLight(0.25, 0xFFFFFF);
  var AssetLibrary = away.library.AssetLibrary;
  view = createView(240, 180, 0x0);
  sphere = createSphere(300, 32, 24, directionalLight);
  view.scene.addChild(sphere);
  AssetLibrary.addEventListener(away.events.LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  AssetLibrary.load(new away.net.URLRequest(imageDiffuse));
  timer = new away.utils.RequestAnimationFrame(rotate);
  timer.start();
  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 material = new away.materials.TriangleMethodMaterial();
  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;
}
function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  if (assets.length > 0) {
    var material = sphere.material;
    material.texture = assets[0];
    view.render();
  } else {
    var AssetLibrary = away.library.AssetLibrary;
    var RESOURCE_COMPLETE = away.events.LoaderEvent.RESOURCE_COMPLETE;
    AssetLibrary.removeEventListener(RESOURCE_COMPLETE, onResourceComplete);
    AssetLibrary.addEventListener(RESOURCE_COMPLETE, onResourceComplete);
    AssetLibrary.load(new away.net.URLRequest(eventObject.url));
  }
}
function rotate(timeStamp) {
  sphere.rotationX = (sphere.rotationX + 1) % 360;
  sphere.rotationY = (sphere.rotationY + 1) % 360;
  view.render();
}
※2
RequestAnimationFrameクラスは,内部的にwindow.requestAnimationFrame()メソッドを用いている。このメソッドは,ブラウザが画面を描画し直そうとするとき,コールバック関数を呼出す。再描画は画面のリフレッシュレートにもとづくので,呼出しの頻度は一般的な60Hzでは1秒間に60回ほどとなる。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書