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

第4回 床の追加とカメラのパン・チルト

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

コントローラでカメラをパンやチルトさせる

3次元の見せ方はオブジェクトそのものを動かすだけでなく,カメラの位置や向きで視界を変えることによっても表せる。そうしたカメラワークに用いるのがコントローラだ。HoverControllerオブジェクトは,カメラをパンやチルトできる。HoverController()コンストラクタの引数にはカメラのオブジェクトを与える。

new HoverController(カメラ)

HoverControllerクラスのプロパティは,つぎの表1に掲げた。そして,プロパティHoverController.panAngleHoverController.tiltAngleでパンあるいはチルトを定めると,カメラは直ちにその角度に切り替わるのではなく,ステップ(デフォルトは8)に分けてトゥイーンされる。

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

HoverControllerクラスのプロパティプロパティの値
distanceカメラと撮影対象との距離で,デフォルト値は1000
panAngleカメラがy軸を中心に回る度数の角度で,デフォルト値は0
tiltAngleカメラの仰角を示す度数で,デフォルト値は90
maxTiltAngle
minTiltAngle
チルトできる角度の範囲の最大度数(デフォルト値90)と最小度数(デフォルト値-90)

HoverControllerクラスでコントローラのオブジェクトをつくる関数(setupCameraController())は,つぎのように定める。引数にはカメラオブジェクトのほか,表1のHoverControllerクラスのプロパティに定める値も加えた。

setupCameraController(カメラ, 距離, チルト最小度数, チルト最大度数, パン度数, チルト度数)

カメラのコントローラ(cameraController)をつくる関数(setupCameraController())は,つぎのように初期設定の関数(initialize())から呼び出した。新たにつくられるHoverControllerオブジェクトに,引数の5つのプロパティ値を与えて返す。

var HoverController = require("awayjs-display/lib/controllers/HoverController");

var cameraController;

function initialize() {

  cameraController = setupCameraController(view.camera, 1000, 0, 90, 45, 20);

}

function setupCameraController(camera, distance, minTiltAngle, maxTiltAngle, panAngle, tiltAngle) {
  var cameraController = new HoverController(camera);
  cameraController.distance = distance;
  cameraController.minTiltAngle = minTiltAngle;
  cameraController.maxTiltAngle = maxTiltAngle;
  cameraController.panAngle = panAngle;
  cameraController.tiltAngle = tiltAngle;
  return cameraController;
}

前述のとおり,HoverControllerオブジェクトでパンやチルトをするとトゥイーンアニメーションで表される。そこで,球体も回すのは止め,カメラワークだけを確かめられるようにしよう。したがって,RequestAnimationFrame()コンストラクタに与える引数のコールバックは,View.render()メソッドのみ呼出す。また,関数名(render())もそれに合わせて変えた。

function initialize() {

  // timer = new RequestAnimationFrame(rotate);
  timer = new RequestAnimationFrame(render);

}

// function rotate(timeStamp) {
function render(eventObject) {
  // sphere.rotationX = (sphere.rotationX + 1) % 360;
  // sphere.rotationY = (sphere.rotationY + 1) % 360;
  view.render();
}

これで,HoverControllerオブジェクトによりカメラにパンとチルトが与えられた。しかも,定められた角度にトゥイーンアニメーションする図3)⁠ここまでをまとめたのが,以下のコード2だ。

図3 コントローラに定めたカメラのパンやチルトにトゥイーンアニメーションする

図3 コントローラに定めたカメラのパンやチルトにトゥイーンアニメーションする 図3 コントローラに定めたカメラのパンやチルトにトゥイーンアニメーションする

コード2 HoverControllerクラスでカメラをパンおよびチルトする

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 PrimitivePlanePrefab = require("awayjs-display/lib/prefabs/PrimitivePlanePrefab");
var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
var TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");
var HoverController = require("awayjs-display/lib/controllers/HoverController");
var view;
var sphere;
var plane;
var cameraController;
var timer;
var imageDiffuse = "assets/beachball_diffuse.jpg";
var planeDiffuse = "assets/floor_diffuse.jpg";
function initialize() {
  var directionalLight = createDirectionalLight(0.25, 0xFFFFFF);
  view = createView(240, 180, 0x0);
  var scene = view.scene;
  sphere = createSphere(300, 32, 24, directionalLight);
  plane = createPlane(800, 800, directionalLight, -300);
  scene.addChild(sphere);
  scene.addChild(plane);
  cameraController = setupCameraController(view.camera, 1000, 0, 90, 45, 20);  //
  AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  AssetLibrary.load(new URLRequest(imageDiffuse));
  AssetLibrary.load(new URLRequest(planeDiffuse));
  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 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 createPlane(width, height, light, y) {
  var material = new TriangleMethodMaterial();
  var plane = new PrimitivePlanePrefab(width, height).getNewObject();
  plane.material = material;
  material.lightPicker = new StaticLightPicker([light]);
  plane.y = y;
  return plane;
}
function createDirectionalLight(ambient, color) {
  var light = new DirectionalLight();
  light.ambient = ambient;
  light.color = color;
  return light;
}
function setupCameraController(camera, distance, minTiltAngle, maxTiltAngle, panAngle, tiltAngle) {
  var cameraController = new HoverController(camera);
  cameraController.distance = distance;
  cameraController.minTiltAngle = minTiltAngle;
  cameraController.maxTiltAngle = maxTiltAngle;
  cameraController.panAngle = panAngle;
  cameraController.tiltAngle = tiltAngle;
  return cameraController;
}
function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  var material;
  var count = assets.length;
  var url = eventObject.url;
  for (var i = 0; i < count; i++) {
    var asset = assets[i];
    switch (url) {
      case (imageDiffuse):
        material = sphere.material;
        material.texture = asset;
        break;
      case (planeDiffuse):
        material = plane.material;
        material.texture = asset;
        break;
    }
  }
}
function render(timeStamp) {
  view.render();
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書