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

第6回 スカイボックスの中に置いたドーナッツ型をカメラで追う

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

前回の第5回「スカイボックスで3次元空間に背景をつくる」は,3次元空間にスカイボックスで背景を定めて,その中をカメラで水平に見回した。今回は,真ん中にドーナッツ型を加えて背景を映し込むとともに,カメラの向きをインタラクティブに回り込ませる。お題のAway 3D TypeScriptサイトの作例Skybox and environment mappingに仕上げたい。

スカイボックスの中にドーナッツ型を置く

まずは,スカイボックスの中にドーナッツ型を置く。ドーナッツ型のつくり方は,すでに第1回「Away3D TypeScriptで基本的な3次元の形状をつくる」球体以外の基本的なかたちをつくるですでに説明した。PrimitiveTorusPrefabクラスでひながたをつくり,そこからPrefabBase.getNewObject()メソッドでドーナッツ型のMeshオブジェクトを得ればよい。

第5回コード23次元空間に定めたスカイボックスの中で水平にカメラを回すに手を加えていく。ドーナッツ型をつくる関数(createTorus())はつぎのように定め,初期設定の関数(initialize())から呼び出す。なお,今回のお題ではテクスチャをあてないので,TriangleMethodMaterial()コンストラクタに引数は渡していない。また,光源(MaterialBase.lightPickerプロパティ)も与えない。

var PrimitiveTorusPrefab = require("awayjs-display/lib/prefabs/PrimitiveTorusPrefab");
var TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");

var torus;

function initialize() {

  torus = createTorus(150, 60, 40, 20);
  view.scene.addChild(torus);

}

function createTorus(radius, tubeRadius, segmentsR, segmentsT) {
  var material = new TriangleMethodMaterial();
  var torus = new PrimitiveTorusPrefab(radius, tubeRadius, segmentsR, segmentsT)
  .getNewObject();
  torus.material = material;
  material.color = 0x111199;
  return torus;
}

ドーナッツ型のカラーMaterialBase.colorプロパティ)は確認用に暗い青(0x111199)を定めた。確かめてみると,スカイボックスの中に青いドーナッツ型が表れる。しかし,カメラが動いて画角から見切れてしまう図1)。これは,カメラが自分の居場所を中心にして回っているからだ。

図1 カメラが回るとドーナッツ型が見切れる

図1 カメラが回るとドーナッツ型が見切れる 図1 カメラが回るとドーナッツ型が見切れる

ドーナッツを真ん中に据えて,回り込むようにカメラを動かすにはどうしたらよいか。ちょっとしたパズルのような工夫をする。まず,カメラをドーナッツ型の中心である原点に置く。つぎにカメラを回転してから,とるべき間合いの分だけ後ろに下がればよい。

原点の座標(0, 0, 0)は,Vector3Dオブジェクトでつぎのように変数(zeroVector3D)にとっておく。引数なしのデフォルト値が原点だ。また,原点からカメラまでの距離も変数(cameraZ)に定めた。カメラの位置はDisplayObject.transformプロパティから得たTransformオブジェクトで操作する。位置座標を定めるのはTransform.positionプロパティ,後ろに下がるにはTransform.moveBackward()メソッドを用いる。

var Vector3D = require("awayjs-core/lib/geom/Vector3D");

var zeroVector3D = new Vector3D();
var cameraZ = -600;

function render(timeStamp) {

  var transform = camera.transform;
  transform.position = zeroVector3D;
  camera.rotationY += 0.5;
  transform.moveBackward(-cameraZ); 

}

これで,ドーナッツ型を画面の真ん中に捉えつつ,カメラが回り込むように動く。だが,カメラの初期設定は加えておこう。その関数(setupCamera())を以下のように定めて,初期設定の関数(initialize())から呼び出す。DisplayObject.lookAt()メソッドメソッドでカメラの向きが定まる。デフォルトは原点なので,念のため加えた。また,PerspectiveProjection.fieldOfViewプロパティは,視野角を定める図2)。デフォルトは60度なので,少し広角に拡げたことになる※1)。

図2 視野角と焦点距離

図2 視野角と焦点距離

var PerspectiveProjection = require("awayjs-core/lib/projections/PerspectiveProjection");
var cameraZ = -600;

function initialize() {

  setupCamera(view.camera, cameraZ, 90);

}

function setupCamera(camera, z, fieldOfView) {
  camera.z = z;
  camera.lookAt(zeroVector3D);
  camera.projection = new PerspectiveProjection(fieldOfView);
}

視野角を拡げたので,前掲図1より広い範囲が映る。その真ん中にドーナッツ型を捉えてカメラが回るようになった。なお,ドーナッツ型もx軸とy軸で回してみた図3)。ここまでのスクリプトはコード1にまとめたとおりだ。

図3 広がった視野角の中でドーナッツ型とそれを捉えるカメラが回る

図3 広がった視野角の中でドーナッツ型とそれを捉えるカメラが回る

コード1 スカイボックスの真ん中にドーナッツ型を捉えてカメラが回る

var LoaderEvent = require("awayjs-core/lib/events/LoaderEvent");
var Vector3D = require("awayjs-core/lib/geom/Vector3D");
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 PerspectiveProjection = require("awayjs-core/lib/projections/PerspectiveProjection");
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 PrimitiveTorusPrefab = require("awayjs-display/lib/prefabs/PrimitiveTorusPrefab");
var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
var TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");
var view;
var torus;
var timer;
var baseUrl = "assets/skybox/";
var imageSkybox = "snow_texture.cube";
var zeroVector3D = new Vector3D();
var cameraZ = -600;
var centerX = 200;
var centerY = 150;
function initialize() {
  view = createView(centerX * 2, centerY * 2, 0xFFFF00);
  torus = createTorus(150, 60, 40, 20);
  setupCamera(view.camera, cameraZ, 90);
  view.scene.addChild(torus);
  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 createTorus(radius, tubeRadius, segmentsR, segmentsT) {
  var material = new TriangleMethodMaterial();
  var torus = new PrimitiveTorusPrefab(radius, tubeRadius, segmentsR, segmentsT)
  .getNewObject();
  torus.material = material;
  material.color = 0x111199;
  return torus;
}
function setupCamera(camera, z, fieldOfView) {
  camera.z = z;
  camera.lookAt(zeroVector3D);
  camera.projection = new PerspectiveProjection(fieldOfView);
}
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;
  var transform = camera.transform;
  torus.rotationX += 2;
  torus.rotationY += 1;
  transform.position = zeroVector3D;
  camera.rotationY += 0.5;
  transform.moveBackward(-cameraZ);
  view.render();
}
※1
カメラの広角レンズは文字どおり視野角が広く,同じ距離でも広い範囲が撮影できる。他方,視野角の狭い望遠レンズは,写せる範囲が狭まるものの,遠くのものを近寄せる。
さらに,視野角は遠近感にも影響を及ぼす。ふたつのものの奥行きの距離は,レンズが広角になるほど,離れて見える。これを,遠近感の「誇張効果」という。逆に,視野角の狭い望遠レンズでは,肉眼よりも距離が近づいて見える。一眼レフカメラでは,撮影する範囲や距離だけでなく,このような遠近感の効果も考えてレンズを選ぶ(「背景と遠近感参照)。なお,遠近法については遠近法が投影された座標を求めるをご覧いただきたい。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入