#目標
- JavaScriptのcanvasで、テンキーを押したときに立方体を回転させてみる。
#下準備
まず、次のコードを保存しておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3D</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
</script>
</body>
</html>
以下、この<script></script>内にJavaScriptのコードを書いていきます。
#描画関数の作成
##canvasを扱う準備
次の関数を書きます。
function draw(){ // 描画
const ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 400, 400); // 初期化
}
このコードのctx.clearRect(0, 0, 400, 400);で、画面を消去しています。
これで、JavaScriptのcanvasを扱う準備ができました。
##座標を記録
次に、頂点の座標を変数coordに、面の情報をfacesに記録します。
const coord = [ // 座標
[-100, -100, -100],
[ 100, -100, -100],
[-100, 100, -100],
[ 100, 100, -100],
[-100, -100, 100],
[ 100, -100, 100],
[-100, 100, 100],
[ 100, 100, 100]
];
const faces = [ // 面
[0,1,3,2],[5,4,6,7],
[0,1,5,4],[3,2,6,7],
[0,2,6,4],[3,1,5,7]
];
座標は、[x座標, y座標, z座標]という形で記録します。
面の座標は、頂点の番号です。
##回転のための準備
回転させた後の座標を返す関数を作成しておきます。
let ang = Date.now()/810;
let ang2 = Date.now()/1081;
function rotat(x, y, z){ // 角度の分だけ回転
[x, y] = [x*Math.cos(ang1) - y*Math.sin(ang1), x*Math.sin(ang1) + y*Math.cos(ang1)];
[y, z] = [y*Math.cos(ang2) - z*Math.sin(ang2), y*Math.sin(ang2) + z*Math.cos(ang2)];
return [x,y,z];
}
ここで、ang1はz軸を軸として回転する角度で、ang2はx軸を軸として回転する角度です。
このとき、回転されているかを確認するため、暫定的に回転角度を時間によって変化するようにしておきます。
##描画開始
関数draw内に描画させる関数を作成しておきます。
function draw(){ // 描画
const ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 400, 400); // 初期化
for(let i in faces){ // 面の描画
let rtteds = []; //回転後の座標を記録する配列
for(let j of faces[i]){
rtteds.push(rotat(...coord[j])) // 回転後の座標
}
ctx.beginPath(); //描画開始
ctx.fillStyle = ["#333","#fff","#0f0","#f0f","#9ff","#ff9"][i];
ctx.moveTo(200+rtteds[0][0], 200+rtteds[0][2]);
for(let j of rtteds){
ctx.lineTo(200+j[0], 200+j[2]);
}
ctx.fill();
}
}
###実行結果
実際に実行してみると、不自然なことに気づきます。
シアンの面が表示されないのです。
これを解消するために、y座標が遠い順に描画するようにします。
そのために、遠さを調べる関数を用意します。
function rem(ary){ // 遠さを調べる関数
return ary.map(a=>rotat(...coord[a])[1]).reduce((a,b)=>a+b)/ary.length;
}
この関数は[1,2,4,3]のように、座標の番号が与えられたときに、それぞれの回転後のy座標の平均を返します。
それで、draw()を以下のように書き換えます。
function draw(){ // 描画
const ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 400, 400); // 初期化
let sorted = faces.map((a,i)=>[a,i]).sort((a,b)=>rem(a[0])-rem(b[0])); // facesをsortしたもの
for(let i of sorted){ // 面の描画
let rtteds = []; //回転後の座標を記録する配列
for(let j of i[0]){
rtteds.push(rotat(...coord[j])) // 回転後の座標
}
ctx.beginPath(); //描画開始
ctx.fillStyle = ["#a05","#a00","#a50","#aa0","#5a0","#0a0"][i[1]];
ctx.moveTo(200 + rtteds[0][0], 200 - rtteds[0][2]);
for(let j of rtteds){
ctx.lineTo(200 + j[0], 200 - j[2]);
}
ctx.fill();
}
}
これで実行すると、遠い順に描画されるようになりました。
#キーでの移動
キーで移動させるには、次のプログラムを使います。
let ang1 = 0;
let ang2 = 0;
document.body.onkeydown = e =>{
switch(e.keyCode){
case 37:
ang1-=0.1; // 左
break;
case 38:
ang2-=0.1; // 上
break;
case 39:
ang1+=0.1; // 右
break;
case 40:
ang2+=0.1; // 下
break;
}
};
#完成
そうして、完成したのがこちらです。
3d test