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

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

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

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

一辺の半分の長さから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⁠）⁠。したがって，つぎは面ごとに分けて描くにはどうしたらよいかだ。