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

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

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

LoaderEvent.RESOURCE_COMPLETEイベントで素材が正しく読み込まれる

ひとつよい知らせがある。第2回「物体にテクスチャを貼って回す」3次元空間でボールを回すで,LoaderEvent.RESOURCE_COMPLETEイベントのリスナー関数(onResourceComplete())が呼び出されてLoaderEvent.assetsプロパティの参照がとれても,その配列は空のときがある」と述べた。このたびのビルドで,問題は解消した。したがって,リスナー関数はつぎのようにすっきりと書き直せる。

function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  // if (assets.length > 0) {
  var material = sphere.material;
  material.texture = assets[0];
  view.render();
  /* } else {
    var AssetLibrary = away.library.AssetLibrary;
    var RESOURCE_COMPLETE = away.events.LoaderEvent.RESOURCE_COMPLETE;
    AssetLibrary.removeEventListener(RESOURCE_COMPLETE, onResourceComplete);
    AssetLibrary.addEventListener(RESOURCE_COMPLETE, onResourceComplete);
    AssetLibrary.load(new away.net.URLRequest(eventObject.url));
  } */
}

第2回コード2を新たなライブラリで動くように書き直したのが,つぎのコード1だ。script要素に読込むライブラリのJSファイルを差替え,require()関数でクラスの参照を得た。Away3Dの処理の組立ては変わっていない。ただ,LoaderEvent.RESOURCE_COMPLETEイベントの問題がなくなったので,リスナー関数は素直に定めた。jsdo.itのコードは,初めにサンプル1として掲げた。

コード1 球体にテクスチャを貼って3次元空間で回す

<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>
<script>
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");
var view;
var sphere;
var imageDiffuse = "assets/beachball_diffuse.jpg";
var timer;
function initialize() {
  var directionalLight = createDirectionalLight(0.25, 0xFFFFFF);
  view = createView(240, 180, 0x0);
  sphere = createSphere(300, 32, 24, directionalLight);
  view.scene.addChild(sphere);
  AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  AssetLibrary.load(new URLRequest(imageDiffuse));
  timer = new RequestAnimationFrame(rotate);
  timer.start();
  view.render();
  view.render();
}
function createView(width, height, backgroundColor) {
  var defaultRenderer = new DefaultRenderer();
  var view = new View(defaultRenderer);
  view.width = width;
  view.height = height;
  view.backgroundColor = backgroundColor;
  return view;
}
function createSphere(radius, segmentsH, segmentsV, light) {
  var material = new TriangleMethodMaterial();
  var sphere = new PrimitiveSpherePrefab(radius, segmentsH, segmentsV)
  .getNewObject();
  sphere.material = material;
  material.lightPicker = new StaticLightPicker([light]);
  return sphere;
}
function createDirectionalLight(ambient, color) {
  var light = new DirectionalLight();
  light.ambient = ambient;
  light.color = color;
  return light;
}
function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  var material = sphere.material;
  material.texture = assets[0];
  view.render();
}
function rotate(timeStamp) {
  sphere.rotationX = (sphere.rotationX + 1) % 360;
  sphere.rotationY = (sphere.rotationY + 1) % 360;
  view.render();
}
</script>

前回予告してあったテクスチャつきの床を加えることと,ドラッグによりカメラの視界を移すインタラクションは,今回のコード1をもとにして次回仕上げる。

著者プロフィール

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

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(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)

コメントの記入