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

第7回 回り込むカメラの真ん中にオブジェクトを捉える

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

今回からのお題は,3次元でインターフェイス風の動きをつくる。サンプル1は,マウスポインタの位置に応じて空間に浮かぶ箱が回り,それぞれの箱はロールオーバーとロールアウト,およびクリックに反応する。今回は箱の配置と回転までで,これから都合4回で仕上げるつもりだ。

サンプル1 Away3D 14/11/05: Dealing with the mouse interactions

3次元空間の真ん中に箱を置いて回す

まずは,3次元空間の真ん中に箱を置いて回す。JavaScriptコードの組立ては第3回コード1球体にテクスチャを貼って3次元空間で回すと同じで,球体が立方体に変わるだけだ。立方体はPrimitiveCubePrefabクラスでひながたをつくる(第1回の球体以外の基本的なかたちをつくるの項を参照)⁠PrimitiveCubePrefab()コンストラクタの基本となる引数は幅と高さおよび奥行きの3つで,後はデフォルト値が与えられている※1)⁠

new PrimitiveCubePrefab(幅, 高さ, 奥行き, 水平分割数, 垂直分割数, 奥行き分割数, 6面テクスチャ)

だが,今回は7つ目の引数を使いたい。これはテクスチャが6面の展開図で用意されているかどうかをブール値で示す。デフォルト値はtrueで展開図を使う。falseを渡すと,ひとつのテクスチャを1面分として,それを6面それぞれに貼ることになる。お題で使ったのは,公式サイトのawayjs-examplesからダウンロードできるtrinket_diffuse.jpg図1)⁠なお,引数の水平・垂直・奥行き分割数のデフォルト値は,それぞれ1が与えられている。

図1 立方体の各面に貼るテクスチャ

図1 立方体の各面に貼るテクスチャ

前述のとおり,第3回コード1と同じ組立てで,3次元空間に立方体を置いて回したのが後に掲げるコード1だ。おもな違いをつぎに抜出した。ひながたはPrimitiveCubePrefabクラスで定め,立方体をつくる関数(createCube())の引数はPrimitiveCubePrefab()コンストラクタに合わせた。テクスチャは6面それぞれに用いるよう,7番目の引数がfalseになっている。後は,変数や関数の名前を立方体(cube)に合わせて変えたくらいだ。

var PrimitiveCubePrefab = require("awayjs-display/lib/prefabs/PrimitiveCubePrefab");

var cube;
var imageDiffuse = "assets/trinket_diffuse.jpg";

function initialize() {

  cube = createCube(400, 400, 400, directionalLight);

}

function createCube(width, height, depth, light) {
  var material = new TriangleMethodMaterial();
  var cube = new PrimitiveCubePrefab(width, height, depth, 1, 1, 1, false)
  .getNewObject();
  cube.material = material;
  material.lightPicker = new StaticLightPicker([light]);
  return cube;
}

これで3次元空間の真ん中にテクスチャの貼られた立方体が置かれ,水平および垂直軸で回る図2)⁠箱を回したのは,とりあえずかたちやテクスチャを確かめるためだ。お題では箱は動かさずに,カメラのほうを回り込ませる。

図2 3次元空間の真ん中でテクスチャの貼られた箱が回る

図2 3次元空間の真ん中でテクスチャの貼られた箱が回る

コード1 3次元空間の真ん中に立方体を置いて水平および垂直に回す

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 PrimitiveCubePrefab = require("awayjs-display/lib/prefabs/PrimitiveCubePrefab");
var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
var TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");
var view;
var cube;
var imageDiffuse = "assets/trinket_diffuse.jpg";
var timer;
function initialize() {
  var directionalLight = createDirectionalLight(0.5, 0xFFFFFF);
  view = createView(240, 180, 0x0);
  cube = createCube(400, 400, 400, directionalLight);
  view.scene.addChild(cube);
  AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  AssetLibrary.load(new URLRequest(imageDiffuse));
  timer = new RequestAnimationFrame(rotate);
  timer.start();
  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 createCube(width, height, depth, light) {
  var material = new TriangleMethodMaterial();
  var cube = new PrimitiveCubePrefab(width, height, depth, 1, 1, 1, false)
  .getNewObject();
  cube.material = material;
  material.lightPicker = new StaticLightPicker([light]);
  return cube;
}
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 = cube.material;
  material.texture = assets[0];
  view.render();
}
function rotate(timeStamp) {
  cube.rotationX = (cube.rotationX + 1) % 360;
  cube.rotationY = (cube.rotationY + 1) % 360;
  view.render();
}
※1
厳密には,幅と高さおよび奥行きの引数も,デフォルト値がいずれも100に定められている。しかし,これらの値は与えるのが通常だろう。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入