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

第12回 パーティクルのアニメーションを加える

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

パーティクルにアニメーションを定める

パーティクルのアニメーションは,アニメーションノードのオブジェクトで定める。アニメーションノードをつくるクラスはParticleNodeBaseのサブクラスで,操作するプロパティによって使い分ける。それらのオブジェクトをまとめるのがParticleAnimationSetオブジェクトだ。コンストラクタには,時間の定めを使うかどうかと,アニメーションをループさせるかどうかの2つのブール値を渡す。

new ParticleAnimationSet(時間設定, ループ)

そして,ParticleAnimationSetオブジェクトを引数としてParticleAnimator()コンストラクタからつくったオブジェクトを物体のMesh.animatorプロパティに与えればアニメーションが定まる。

new ParticleAnimator(animationSetオブジェクト)

ParticleAnimationSetオブジェクトをつくる関数(getParticleAnimationSet())と炎のオブジェクトをつくる関数(getFireObjects())は,つぎのようにともにパーティクルをつくる関数(createParticles())から呼び出される。前者はParticleAnimationSet()コンストラクタが生成したオブジェクトを返す。後者はそのオブジェクトからつくられたParticleAnimatorインスタンスをMesh.animatorプロパティに与えている。

var ParticleAnimationSet = require("awayjs-renderergl/lib/animators/ParticleAnimationSet");
var ParticleAnimator = require("awayjs-renderergl/lib/animators/ParticleAnimator");

function createParticles(numFires, numParticles, radius, y, scene) {

  var animationSet = getParticleAnimationSet(animations, initParticle);

  var fireObjects = getFireObjects(geometrySet, numFires, material, animationSet, radius, y, scene);

}
function getFireObjects(geometrySet, numFires, material, animationSet, radius, y, scene) {

  for (var i = 0; i < numFires; i++) {
    var mesh = createAnimationParticle(particleGeometry, material, animationSet, fireObjects);

  }

}
function getParticleAnimationSet(animations, initParticleFunc) {
  var animationSet = new ParticleAnimationSet(true, true);

  return animationSet;
}
function createAnimationParticle(particleGeometry, material, animationSet, fireObjects) {

  var animator = new ParticleAnimator(animationSet);
  mesh.animator = animator;

}

アニメーションノードとして,とりあえず2つのオブジェクトをつくることにする。ひとつは,ParticleBillboardNodeオブジェクトで,パーティクルの角度をつねにカメラに向ける。もうひとつは,パーティクルアニメーションが始まるときの速度を定めるParticleVelocityNodeだ。第1引数のモードに定数ParticlePropertiesMode.GLOBALを与えると,アニメーションのプロパティへの働きがグローバルになる。

new ParticleVelocityNode(モード, 速度ベクトル)

そして,アニメーションノードのオブジェクトは,ParticleAnimationSet.addAnimation()メソッドでParticleAnimationSetオブジェクトに加える。

ParticleAnimationSetオブジェクト.addAnimation(アニメーションノード)

アニメーションノードのオブジェクトは,つぎのようにパーティクルをつくる関数(createParticles())の中で配列(animations)に納めた。その配列をParticleAnimationSetオブジェクトをつくる関数(getParticleAnimationSet())に渡すと,オブジェクトにParticleAnimationSet.addAnimation()メソッドでアニメーションノードすべてが加えられる。

var Vector3D = require("awayjs-core/lib/geom/Vector3D");

var ParticlePropertiesMode = require("awayjs-renderergl/lib/animators/data/ParticlePropertiesMode");
var ParticleBillboardNode = require("awayjs-renderergl/lib/animators/nodes/ParticleBillboardNode");
var ParticleVelocityNode = require("awayjs-renderergl/lib/animators/nodes/ParticleVelocityNode");

function createParticles(numFires, numParticles, radius, y, scene) {
  var GLOBAL = ParticlePropertiesMode.GLOBAL;

  var animations = [
    new ParticleBillboardNode(),
    new ParticleVelocityNode(GLOBAL, new Vector3D(0, 80, 0))
  ];
  var animationSet = getParticleAnimationSet(animations, initParticle);

}

function getParticleAnimationSet(animations, initParticleFunc) {
  var animationSet = new ParticleAnimationSet(true, true);
  var count = animations.length;
  for (var i = 0; i < count; i++) {
    animationSet.addAnimation(animations[i]);
  }

  return animationSet;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書