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

第5回 スカイボックスで3次元空間に背景をつくる

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

3次元空間にスカイボックスを定める

いよいよスカイボックスをつくろう。クラスは文字どおりSkyboxで,コンストラクタの引数は素材の(MaterialBase)オブジェクトだ。そして,スカイボックスの素材は,AssetLibraryクラスで読込んだ素材データを,SkyboxMaterialクラスのコンストラクタに渡してつくる。この素材データはキューブマップと呼ばれる。なお,ふたつのクラスのコンストラクタについて,詳しくはAway3D 14/11/05: スカイボックスをつくるをご覧いただきたい。

new Skybox(素材オブジェクト)

new SkyboxMaterial(キューブマップ)

スカイボックスをつくる関数(setupSkybox())は,つぎのように定めた。LoaderEvent.RESOURCE_COMPLETEイベントのリスナー関数(onResourceComplete())が渡すキューブマップのデータ(cubeTexture)からSkyboxMaterialオブジェクトをつくる。そのオブジェクトを引数としてSkyboxインスタンス(skybox)をつくって,3次元空間に加えたScene.addChild()メソッド)。

var Skybox = require("awayjs-display/lib/entities/Skybox");
var SkyboxMaterial = require("awayjs-renderergl/lib/materials/SkyboxMaterial");

function setupSkybox(cubeTexture) {
  var skybox = new Skybox(new SkyboxMaterial(cubeTexture));
  view.scene.addChild(skybox);
}

これで3次元空間に,6面のテクスチャでつくられたスカイボックスが定められる図5)。もっともこのままでは,テクスチャがきれいにつながっているかどうか確かめられない。そこで,RequestAnimationFrameオブジェクトに定めたコールバック(render())で,以下のようにカメラをy軸で水平に回してみることにした。

図5 3次元空間にスカイボックスが定められた

図5 3次元空間にスカイボックスが定められた

function render(timeStamp) {
  var camera = view.camera;
  camera.rotationY += 0.5;
  view.render();
}

以上をまとめたのがつぎのコード2だ。3次元空間に定めたスカイボックスの中を,水平に回るカメラが映し出す。テクスチャは滑らかにつなぎ合わされていることが確かめられる。今回はテクスチャをひとつのフォルダにまとめて読込むという構成になったため,サンプルコードがjsdo.itに掲げられなかった。筆者のサイトにコード2のサンプルを上げておくので,そちらをご覧いただきたい。

コード2 3次元空間に定めたスカイボックスの中で水平にカメラを回す

var LoaderEvent = require("awayjs-core/lib/events/LoaderEvent");
var AssetLibrary = require("awayjs-core/lib/library/AssetLibrary");
var AssetLoaderContext = require("awayjs-core/lib/library/AssetLoaderContext");
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 Skybox = require("awayjs-display/lib/entities/Skybox");
var SkyboxMaterial = require("awayjs-renderergl/lib/materials/SkyboxMaterial");
var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
var view;
var timer;
var baseUrl = "assets/skybox/";
var imageSkybox = "snow_texture.cube";
var centerX = 200;
var centerY = 150;
function initialize() {
  view = createView(centerX * 2, centerY * 2, 0xFFFF00);
  AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  loadAssets(baseUrl, imageSkybox);
  timer = new RequestAnimationFrame(render);
  timer.start();
}
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 loadAssets(base, image) {
  var assetLoaderContext = new AssetLoaderContext();
  assetLoaderContext.dependencyBaseUrl = base;
  AssetLibrary.load(new URLRequest(base + image), assetLoaderContext);
}
function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  var count = assets.length;
  var url = eventObject.url;
  for (var i = 0; i < count; i++) {
    var asset = assets[i];
    switch (url) {
      case (baseUrl + imageSkybox):
        setupSkybox(asset);
        break;
    }
  }
}
function setupSkybox(cubeTexture) {
  var skybox = new Skybox(new SkyboxMaterial(cubeTexture));
  view.scene.addChild(skybox);
}
function render(timeStamp) {
  var camera = view.camera;
  camera.rotationY += 0.5;
  view.render();
}

次回は,3次元空間にドーナッツ型を加え,その表面に背景を映し出してみたい。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書