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

第20回　2つの光源のアニメーションとカメラのパン・チルト

Away3D TypeScript, Away3D, アニメーション, 点光源

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

前回の第19回「4つのビットマップをパーティクルにしてアニメーションさせる」では，4つに増やしたロゴでパーティクルをつくり，最新の2015年10月9日付ライブラリに対応させた（第19回サンプル1「Away3D 15/10/09: Exploding logos using particles」)。いよいよ本稿が最終回で，お題の仕上げにかかる。

点光源の数と色を変える

まず，点光源（PointLightオブジェクト）の数は2つに増やし，それぞれに異なる色を与える。点光源をつくる関数（createPointLight()）には，第1引数に色（color）⁠，第2引数に環境光の強さ（ambient）⁠，そして第5引数（specular）には反射の強さを渡していた（再掲第17回表1参照）⁠。環境光はデフォルト値が白（0xFFFFFF）なので，色は反射光に表れる。確かめたいときは，つぎのように環境光の値を1より下げ，反射の強さは大きくするとわかりやすい（図1）⁠。

function createLights() {
  // light = createPointLight(0xFFFFFF, 1, 600, 100, 2);
  light = createPointLight(0x00FF00, 0.5, 600, 100, 10);
  return new StaticLightPicker([light]);
}

function createPointLight(color, ambient, fallOff, radius, specular) {

}

図1　環境光は下げて反射を強めると点光源の色の違いがわかる

図1　環境光は下げて反射を強めると点光源の色の違いがわかる

第17回表1　LightBaseクラスのプロパティ（再掲）

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

PointLightオブジェクトとその色は，つぎのように緑（0x00FF00）と青（0x0000FF）の2つにした（greenLightとblueLight）⁠。環境光は一方（greenLight）で1を与えれば足りるため，他方（blueLight）は0にして反射のみ加えた。2つの点光源の色で陰影のような効果を与えるつもりだ。

// var light;
var greenLight;
var blueLight;

function createLights() {
  // light = createPointLight(0xFFFFFF, 1, 600, 100, 2);
  greenLight = createPointLight(0x00FF00, 1, 600, 100, 2);
  blueLight = createPointLight(0x0000FF, 0, 600, 100, 2);
  // return new StaticLightPicker([light]);
  return new StaticLightPicker([greenLight, blueLight]);
}

2つの点光源をアニメーションさせる

点光源はせっかく2つつくったのだから，互いに位置をずらし，水平に回すことにしよう。中心から距離rで角度θの2次元平面座標はつぎの図2のように（r cosθ, r sinθ）となる（第7回「立方体を中心に三角関数でカメラを回す」参照）⁠。3次元空間で水平に回すということは，xz平面で位置を動かせばよい。

図2　距離rで角度θの2次元平面における座標

図2　距離rで角度θの2次元平面における座標

アニメーションを描画する関数（render()）に，2つの点光源（greenLightとblueLight）の回転をつぎのように定めた。角度をもつ変数（angle）に1度（π/180ラジアン）ずつ加え，xz平面で2つのオブジェクト（greenLightとgreenLight）の位置（lightXとlightZ）を決めている。それぞれのxz座標が正負逆なので，原点（0, 0, 0）を中心とした反対側に位置することになる。つまり，3次元空間の中で回りながらパーティクルを両端から照らすということだ。

var angle = 0;

function render(deltaTime) {
  var radius = 600;

  cameraController.panAngle += 0.2;

  angle += Math.PI / 180;
  var lightX = Math.sin(angle) * radius;
  var lightZ = Math.cos(angle) * radius;
  greenLight.x = lightX;
  greenLight.z = lightZ;
  blueLight.x = -lightX;
  blueLight.z = -lightZ;
  view.render();
}

Away3D TypeScript, Away3D, アニメーション, 点光源

著者プロフィール

野中文雄（のなかふみお）

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

URL：http://www.FumioNonaka.com/

著書