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

第3回 ライブラリとクラスの読込みが変わった

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

今回は予告と内容を変えて,緊急特番だ。前回第2回の記事が公開された翌日2014年11月5日付でAway3Dのビルドが改められた。ライブラリの名前も数も,さらにクラスの読込み方も変わった。勝手がわかってしまえばよいものの,初めは途方に暮れてもおかしくない。そこで今回は,第2回コード2球体にテクスチャを貼って3次元空間で回すを,新しいビルドで動くように書き直す。でき上がりは,つぎのサンプル1だ。

サンプル1 Away3D 14/11/05: Rotating a texture mapped sphere in the 3D space

Away3Dのライブラリが変わった

まず,ライブラリはつぎの5つを使う。前回まで用いていた2014年8月26日付ビルドでは3ライブラリだった図1上)。新たなライブラリは,名前の頭が「awayjs-」で揃ったのはわかりやすくてよい。JavaScript(JS)ファイルだけでなく,それぞれのmapも与えられているため,同じ場所に入れておこう図1下)。

  1. awayjs-core
  2. awayjs-display
  3. awayjs-renderergl
  4. awayjs-stagegl
  5. awayjs-methodmaterials

図1 Away3Dで用いるライブラリのファイル

図1 Away3Dで用いるライブラリのファイル

2014年8月26日付

図1 Away3Dで用いるライブラリのファイル

2014年11月5日付

なお,ライブラリはGitHubのAwayJSからダウンロードする。Away3D TypeScriptサイト「Source Files」の欄には,本稿執筆時ではこれまでのまま,3つのライブラリと作例(「GitHub: Examples」)のリンクしかない図2)。

図2 Away3D TypeScriptサイトの「Source Files」の欄

図2 Away3D TypeScriptサイトの「Source Files」の欄

そして,script要素で読込むライブラリを,これまでの3つから,新たな5つのJSファイルに書き替える。ライブラリ名から「next」が除かれたのは,そろそろ正規リリースが近いのかと期待される。何より,こういう大きな変更はそろそろ終わりにしてほしい。

<!--
<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 src="lib/awayjs-core.min.js"></script>
<script src="lib/awayjs-display.min.js"></script>
<script src="lib/awayjs-renderergl.min.js"></script>
<script src="lib/awayjs-stagegl.min.js"></script>
<script src="lib/awayjs-methodmaterials.min.js"></script>

require()関数でクラスを読込む

これまでAway3Dのクラスは「away」から始まる長い名前空間を添えて参照した。新たなライブラリでは,require()関数でクラスの参照を得る。それを変数に与えて用いるというやり方だ。変数名はクラスと同じにするとわかりやすい。

var 変数 = require(クラスのパス)
var LoaderEvent = require("awayjs-core/lib/events/LoaderEvent");
var AssetLibrary = require("awayjs-core/lib/library/AssetLibrary");
var URLRequest = require("awayjs-core/lib/net/URLRequest");
var RequestAnimationFrame = require("awayjs-core/lib/utils/RequestAnimationFrame");
var View = require("awayjs-display/lib/containers/View");
var DirectionalLight = require("awayjs-display/lib/entities/DirectionalLight");
var StaticLightPicker = require("awayjs-display/lib/materials/lightpickers/StaticLightPicker");
var PrimitiveSpherePrefab = require("awayjs-display/lib/prefabs/PrimitiveSpherePrefab");
var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
var TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");

新たなライブラリでは,「away」から始まる名前空間でクラスを参照することができない。けれど,require()関数でクラスと同じ名前の変数に参照を与えたので,名前空間は取り去ってしまえばよい。たとえば,第2回コード2の初期設定の関数(initialize())は,つぎのように書き替える。AssetLibraryクラスは名前空間から参照しない。あらかじめrequire()関数でクラス名の変数(AssetLibrary)に納めてあるので,直にクラス名を書く。

function initialize() {

  // var AssetLibrary = away.library.AssetLibrary;

  // AssetLibrary.addEventListener(away.events.LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  // AssetLibrary.load(new away.net.URLRequest(imageDiffuse));
  AssetLibrary.load(new URLRequest(imageDiffuse));
  // timer = new away.utils.RequestAnimationFrame(rotate);
  timer = new RequestAnimationFrame(rotate);

}

あとは,残りのコードの名前空間の記述を,変数に定めた直のクラス名にひたすら書き直すだけだ。これでとにかくコードは動く。第2回コード2と同じく,ビーチボールのテクスチャを貼った球体が回る図3)。

図3 ビーチボールのテクスチャを貼った球体が回る

図3 ビーチボールのテクスチャを貼った球体が回る

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

  • ビルドできない

    FlashDevelopで今までaway3dTypeScriptをいじっていましたが、最近になってライブラリの変わったことを知り作り直そうと考えていました。が、うまくいかない時にこの記事を見つけて万歳となるところが、「Accessors are only available when targeting ECMAScript 5 and higher.」となりビルドできませんでした。

    Commented : #1  三木 研二 (2014/12/27, 22:06)

コメントの記入