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

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

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

前回の第19回4つのビットマップをパーティクルにしてアニメーションさせるでは,4つに増やしたロゴでパーティクルをつくり,最新の2015年10月9日付ライブラリに対応させた第19回サンプル1Away3D 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();
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入