HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第20回 立方体のワイヤーフレームを水平に回す

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

第15回からこれまで,3次元表現のお題をふたつ仕上げた。3次元座標や透視投影にも慣れ,簡単なクラスの扱いもわかってきたことだろう。そこでもうひとつ,3次元空間のインタラクティブなお題に取り組みたい。立方体を,マウスポインタの位置に応じて水平および垂直に回してみる。今回を含めて,3回ほどでつくるつもりのサンプルが,つぎのjsdo.itのコードだ。

立方体の頂点をワイヤーフレームで結ぶ

今回書くコードは,ワイヤーフレームの立方体を,マウスポインタの水平座標に応じてy軸で回すところまでになる。ワイヤーフレームの星形をy軸で回すというのが,ひとつ目のお題だった。そのでき上がりとなる第17回コード2冒頭に3次元座標のクラスと透視投影のメソッドを定義したy軸で星形が回るアニメーションを書き替えていくことにする(再掲第17回図1)。ご参考までに,このjsdo.itのサンプルも以下に添えた。

第17回図1 星形の3次元座標がy軸で水平に回って透視投影される(再掲)

第17回図1 星形の3次元座標がy軸で水平に回って透視投影される 第17回図1 星形の3次元座標がy軸で水平に回って透視投影される

第17回コード2では,y軸で回した3次元の頂点座標は,透視投影したうえで,2次元の頂点を直線で結んだ。描くかたちは,星形にはかぎられない。そこで,座標を立方体の8頂点に差し替えてみよう。原点(0, 0, 0)は立方体の真ん中に置く。すると,一辺の半分の長さ(halfEdge)を決めれば,立方体の8頂点座標は定まる図1)。

図1 立方体の原点を中心に置くと一辺の半分の長さで8頂点座標が決められる

図1 立方体の原点を中心に置くと一辺の半分の長さで8頂点座標が決められる

一辺の半分の長さから8頂点座標(Point3Dオブジェクト)の配列を返す関数(createCubePoints())はつぎのように定めて,第17回コード2の星形座標の関数(createStarPoints())と差し替える。なお,回り始める角速度(angle)は0にして,初めは止まった状態とした。

var points;
var angle = 0;    // Math.PI / 36;

function initialize() {

  // points = createStarPoints(5, 65, 25);
  points = createCubePoints(50);

}

/*
function createStarPoints(numVertices, longRadius, shortRadius) {

}
*/
function createCubePoints(halfEdge) {
  var cubePoints = [
    new Point3D(-halfEdge, -halfEdge, -halfEdge),
    new Point3D(halfEdge,  -halfEdge, -halfEdge),
    new Point3D(halfEdge, halfEdge, -halfEdge),
    new Point3D(-halfEdge, halfEdge, -halfEdge),
    new Point3D(-halfEdge, -halfEdge, halfEdge),
    new Point3D(halfEdge, -halfEdge, halfEdge),
    new Point3D(halfEdge, halfEdge, halfEdge),
    new Point3D(-halfEdge, halfEdge, halfEdge)
  ];
  return cubePoints;
}

この書替えだけで,まがりなりにもワイヤーフレームのアニメーションとしては動く。もっとも,頂点はひと筆書きで結ばれてしまうため,6面の立方体には見えない図2)。したがって,つぎは面ごとに分けて描くにはどうしたらよいかだ。

図2 立方体の8頂点がひと筆書きで結ばれたアニメーションになる

図2 立方体の8頂点がひと筆書きで結ばれたアニメーションになる 図2 立方体の8頂点がひと筆書きで結ばれたアニメーションになる

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入