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

第1回 Away3D TypeScriptで基本的な3次元の形状をつくる

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

DirectionalLightクラスで平行光源を定める

第2に,光源を定める。3次元空間をつくっても,光がなければ何も見えない。神と同じく光りあれと,光をつくらなければならないのだ。3次元表現で使われる光源はいくつかある。その中でも基本となるのは平行光源⁠directional light)だ。太陽の光のように同じ向き(平行)に進み,距離によって強さが変わらない図3右上)⁠

図3 3次元表現で使われる光源の種類

図3 3次元表現で使われる光源の種類

Tcpp's fileより引用

平行光源は,DirectionalLight()コンストラクタで定める。引数はなくて構わない。この光で,後からつくる物体の表面を照らす。

new away.entities.DirectionalLight()

もっとも,太陽光だけでは,月のように光の当たっていない部分は暗闇になってしまう。地球上では環境光ambient lightがあることで,陰にも光が及ぶ。そこで,DirectionalLightオブジェクトをつくって返す関数(createDirectionalLight())は,環境光の強さとその光の色を引数に与えてつぎのように定める。

createDirectionalLight(環境光の強さ, 光の色)

DirectionalLightクラスは,LightBaseを継承する表2)⁠そして,DirectionalLightオブジェクトのLightBase.ambientプロパティに強さの数値を与えれば,環境光が加わる。また,LightBase.colorプロパティで光の色を定める。さらに,DirectionalLight.directionプロパティには,Vector3Dオブジェクトの3次元ベクトルで光源の位置を与える。

表2 DirectionalLightおよびLightBaseクラスに備わる基本的なプロパティ

DirectionalLightオブジェクトのプロパティプロパティの値
ambient環境光の強さを示す0以上1以下の数値。デフォルト値は0。
color光のカラー値。デフォルト値は白(0xFFFFFF)⁠
direction光源の位置を示す3次元ベクトルのVector3Dオブジェクト。デフォルト値は(0, -1, 1)。

DirectionalLightオブジェクトをつくる関数(createDirectionalLight())は,インスタンスをつくった後,LightBase.ambientおよびLightBase.colorプロパティに引数値を与えて返した。DirectionalLight.directionプロパティはデフォルト値のまま用いる。

function initialize() {
  var directionalLight = createDirectionalLight(0.25, 0x00FFFF);

}

function createDirectionalLight(ambient, color) {
  var light = new away.entities.DirectionalLight();

  light.ambient = ambient;
  light.color = color;
  return light;
}

PrimitiveSpherePrefabクラスから球体のオブジェクトをつくって3次元空間に加える

舞台と照明が整ったので,ようやく第3の,役者となる物体のインスタンスを登場させる。そのためには,まずPrefabBaseのサブクラスから物体のひながた(プレハブ)をつくる。そして,そのひながたの参照に対してPrefabBase.getNewObject()メソッドを呼び出すと,物体のDisplayObjectインスタンスが得られる。

今回は球体をつくるので,ひながたにはPrimitiveSpherePrefabクラスを用いる。コンストラクタの引数は,球の半径,および曲面の滑らかさを決める水平と垂直の分割数だ。デフォルト値は,半径が50,分割数は水平16で垂直12だ。続けて,PrefabBase.getNewObject()メソッドは引数なしに呼び出せる。

new away.prefabs.PrimitiveSpherePrefab(半径, 水平分割数, 垂直分割数)
.getNewObject()

ひながたからPrefabBase.getNewObject()メソッドでつくる物体は,DisplayObjectのサブクラスのMeshオブジェクトだ。その表面素材となるテクスチャをMesh.materialプロパティに定める。今回は,DefaultMaterialManager.getDefaultTexture()で得られるデフォルトのテクスチャを使った。また,表面素材にはそれを照らす光源を,MaterialBase.lightPickerプロパティにStaticLightPickerオブジェクトで与える。StaticLightPicker()コンストラクタに渡す引数は,光源の配列だ。

new away.materials.StaticLightPicker(光源の配列)

球体のMeshオブジェクトをつくって返す関数(createSphere())は,以下のように定めた。引数は球の半径(radius)⁠および水平と垂直の分割数(segmentsHとsegmentsV)⁠そして素材を照らす光源(light)だ。この関数を初期設定の関数(initialize())から呼出した。返される球体のMeshオブジェクトは,View.sceneプロパティで得られる3次元空間のSceneオブジェクト(前掲表1Scene.addChild()メソッドで加える。

var view;
var sphere;
function initialize() {
  var directionalLight = createDirectionalLight(0.25, 0x00FFFF);
  view = createView(240, 180, 0x0);
  sphere = createSphere(300, 32, 24, directionalLight);
  view.scene.addChild(sphere);

}

function createSphere(radius, segmentsH, segmentsV, light) {
  var defaultTexture = away.materials.DefaultMaterialManager.getDefaultTexture();
  var material = new away.materials.TriangleMethodMaterial(defaultTexture);
  var sphere = new away.prefabs.PrimitiveSpherePrefab(radius, segmentsH, segmentsV)
  .getNewObject();
  sphere.material = material;
  material.lightPicker = new away.materials.StaticLightPicker([light]);
  return sphere;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入