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

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

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

Away3Dはオープンソースのリアルタイム3Dエンジンだ。もともとはFlashプラットフォーム向けに開発された。そのAway3Dエンジンが「Away3D TypeScript」というJavaScriptライブラリに移植されはじめている。現在アルファリリースが公開されている。本連載では,このAway3D TypeScriptによる3次元表現を解説していきたい。

その初めてのお題は,つぎのサンプル1のような床に置いたボールだ※1)⁠ドラッグすると,カメラ位置を回すことができる。今回を含めた都合3回で仕上げたい。

サンプル1 Away3D 14/08/26 : Panning and tilting the camera in the 3D space

※1
Away3D TypeScriptのライブラリには,バージョンおよびビルド番号がはっきりと書かれていない。そのため,サンプルのタイトルには,使ったビルドの日本時間日付を添えている。本稿執筆時の最新ビルドは2014年8月26日付だ(後掲図2参照)⁠

Away3D TypeScriptライブラリを使う

まずは,ライブラリのダウンロードと読込みから説明しよう。Away3D TypeScriptのサイトには,作例やソースファイルのリンクなどがある。最新のライブラリは,⁠Source Files」の欄に示された「GitHub: AwayJS Core TypeScript」「GitHub: StageGL Core TypeScript」および「GitHub: StageGL Extentions」の3つのリンクからダウンロードすすればよい図1)⁠また,サンプルコードとして「GitHub: StageGL Examples」も掲げられている。

図1 Away3D TypeScriptライブラリのソースファイル

図1 Away3D TypeScriptライブラリのソースファイル

サンプルコードなどAway3D TypeScriptを試してみるには,ソースファイルの3つのリンクからダウンロードしたファイルの中の3つのライブラリ「awayjs-core.next.min.js」「stagegl-core.next.min.js」および「stagegl-extensions.next.min.js」を使う図2)⁠これらのJavaScript(JS)ファイルを,これから書くコードのライブラリ用に定めたフォルダ(本連載では「lib」とする)に配置する。

図2 Away3Dで使う3つのライブラリのJSファイル

図2 Away3Dで使う3つのライブラリのJSファイル

HTMLドキュメントには,まずscript要素にAway3Dの3つのJSファイルawayjs-core.next.min.jsとstagegl-core.next.min.jsおよびstagegl-extensions.next.min.jsを読み込む。つぎに,JavaScriptコードには初めに呼び出す関数(initialize())を設け,body要素のonload属性にその呼出しを加える。これで準備が整った。Away3Dのコードを書いていこう。

<script src="lib/awayjs-core.next.min.js"></script>
<script src="lib/stagegl-core.next.min.js"></script>
<script src="lib/stagegl-extensions.next.min.js"></script>
<script>
function initialize() {
  // 初期設定
}
</script>
<body onload="initialize();">

Away3Dの3次元表現で用意しなければならないのは,つぎの3つだ。第1に,舞台となる3次元空間をつくる。第2に,その舞台に照明を備える。そして第3に,役者となる物体を舞台に登場させる。項を改めて,順に説明しよう。

Away3Dで用意しなければならないもの
  1. 舞台:Viewオブジェクトで3次元空間の表示領域を定める
  2. 照明:光源のオブジェクトで3次元空間を照らす
  3. 役者:物体のひながたからインスタンスをつくって3次元空間に加える

Viewクラスで3次元空間の表示領域を定める

第1につくらなければならないのは,3次元空間の表示領域を定めるViewオブジェクトだ。3次元の座標空間や,それを表示領域に映すカメラもオブジェクトの中にもつ。View()コンストラクタの引数はレンダラだ。ここでは,DefaultRendererオブジェクトを渡すことにする。

new away.containers.View(new away.render.DefaultRenderer())

Viewオブジェクトには,プロパティで設定が加えられる表1)⁠もっとも,プロパティの数は多いものの,ほとんどはデフォルト値が定められている。今回は,ごく基本的なプロパティのみ定めることにしよう。

表1 Viewクラスに備わる基本的なプロパティ

Viewクラスのプロパティプロパティの値
width
height
表示される領域の幅と高さ。
backgroundColor画面の背景色。デフォルト値は黒(0x000000)⁠
camera表示領域を描くために用いられるCamera3Dオブジェクト。
scene表示領域を描くもととなる3次元空間のSceneオブジェクト。

Viewオブジェクトをつくって返す関数(createView())は新たに設ける。引数には,表示領域の幅と高さ,および背景色を渡す。

createView(幅, 高さ, 背景色)

関数(createView())の中身は,つぎの抜書きのように定めた。そして,初期設定の関数(initialize())から呼び出す。できあがりのJavaScriptは,後にコード1としてまとめてある。

var view;

function initialize() {

  view = createView(240, 180, 0x0);

}
function createView(width, height, backgroundColor) {
  var defaultRenderer = new away.render.DefaultRenderer();
  var view = new away.containers.View(defaultRenderer);
  view.width = width;
  view.height = height;
  view.backgroundColor = backgroundColor;
  return view;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入