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

第17回 ロゴがパーティクルで弾けるアニメーション

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

初期設定で呼び出す関数

前掲コード1の初期設定の関数(initialize())は,つぎの5つの関数を呼び出している。これらの関数の中のcreateView()は,第16回コード3とまったく同じである。また,関数setupCameraController()も引数とプロパティの設定が減っただけだ。この2つの関数は抜き書きしないので,前掲コード1を直接参照してほしい。

  • createLights()
  • createView()
  • setupCameraController()
  • createMaterial()
  • setListeners()

関数createLights()は,つぎのように光源をつくったうえでStaticLightPickerオブジェクトに納めて返す。ただし,光源はパーティクルを照らすだけなので,平行光源(DirectionalLightオブジェクト)は使わず,PointLightオブジェクトをつくっている(第14回炎の光を加える参照⁠⁠。PointLightオブジェクトは,後に複数つくることになるため,関数(createPointLight())を分けた。PointLightオブジェクトに定めているプロパティは,すでにこの連載で紹介したので,以下に表1としてまとめておこう。

var light;

function initialize() {
  var lightPicker = createLights();

}

function createLights() {
  light = createPointLight(0xFFFFFF, 1, 600, 100, 2);
  return new StaticLightPicker([light]);
}
function createPointLight(color, ambient, fallOff, radius, specular) {
  var light = new PointLight();
  light.color = color;
  light.ambient = ambient;
  light.fallOff = fallOff;
  light.radius = radius;
  light.specular = specular;
  return light;
}

表1 LightBaseクラスのプロパティ

LightBaseクラスのプロパティ値と機能
ambient環境光の強さを示す0以上1以下の数値(デフォルト値0)
ambientColor環境光のカラー値を示す0から0xFFFFFFまでの整数(デフォルト値0xFFFFFF)
color光のカラー値(デフォルト値0xFFFFFF)
diffuse光の拡散する強さを示す0以上の数値(デフォルト値1)
fallOff光が届く距離の最大値(デフォルト値10000)
radius光が届く距離の最小値(デフォルト値9000)
specular光の反射する強さを示す0以上の数値(デフォルト値1)

関数createMaterial()は,つぎのようにマテリアル(MethodMaterialオブジェクト)をつくって返す。MaterialBase.bothSidesプロパティは,マテリアルのカメラと反対側の面を描画するかどうかを定める。負荷を減らすため,描画しないfalseがデフォルト値だ。このプロパティをtrueとし,MaterialBase.lightPickerプロパティには,PointLightオブジェクトが納められたStaticLightPickerを与えた。

var colorMaterial;

function initialize() {

  colorMaterial = createMaterial(lightPicker, true);

}

function createMaterial(lightPicker, bothSides) {
  var material = new MethodMaterial();
  material.bothSides = bothSides;
  material.lightPicker = lightPicker;
  return material;
}

関数setListeners()の仕事のひとつは,ロゴの画像ファイル(assetsURL)AssetLibrary.load()メソッドでロードし,読み込み終えたときLoaderEvent.RESOURCE_COMPLETEイベント)のリスナー関数(onResourceComplete())を定めることだ。この関数は,ロードした素材をCast.bitmapData()メソッドの引数に渡して,BitmapDataオブジェクトを得る。このオブジェクトからは,ピクセル単位でカラー値が調べられる。そのカラーをパーティクルひとつひとつに当てようという目論見だ。

var assetsURL = "assets/chrome.png";
var bitmapData;

function initialize() {

  setListeners();
}

function setListeners() {

  AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  AssetLibrary.load(new URLRequest(assetsURL));
}

function onResourceComplete(eventObject) {
  var asset = eventObject.assets[0];
  bitmapData = Cast.bitmapData(asset);
  var colorGeometry = createParticles();
  startParticleAnimation(colorGeometry);
}

素材を読み込み終えたときのリスナー関数(onResourceComplete())からは,さらにつぎの2つの関数が呼び出される。ひとつは,パーティクルの幾何学情報のGeometryオブジェクトやそれらのカラーと位置,およびアニメーションのデータをつくる関数(createParticles())だ。そしてもうひとつは,Meshオブジェクトをつくって,パーティクルのアニメーションを初期設定する関数(startParticleAnimation())になる。

  • createParticles()
  • startParticleAnimation()

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書