rotation Calculator

ブラウザ上で動作するJavaScriptによる回転座標計算機「rotation Calculator」を作ってみた。
x軸周り(ロール)、y軸周り(ピッチ)、z軸周り(ヨー)の3種類の回転軸に対応している。
回転前のx座標、y座標、z座標及び、回転する角度を入力し、回転軸を選ぶと、
それぞれの3行3列の回転行列を用いて、回転後のx座標、y座標、z座標が求められる。
但し、回転角は、孤度法([rad / ラジアン])ではなく、度数法([deg / °])で入力すること。


x0
y0
z0
回転角:θ [deg]
x軸周りに回転(ロール)
y軸周りに回転(ピッチ)
z軸周りに回転(ヨー)

x
y
z



ソースコード(旧版)

rotationcalculator.html

<form name="rotcalc">
<table border="5" frame="void" rules="none">
<tr>
<td align="right"><i>x</i><sub>0</sub>=</td>
<td align="left"><input type="text" name="posx0"></td>
</tr>
<tr>
<td align="right"><i>y</i><sub>0</sub>=</td>
<td align="left"><input type="text" name="posy0"></td>
</tr>
<tr>
<td align="right"><i>z</i><sub>0</sub>=</td>
<td align="left"><input type="text" name="posz0"></td>
</tr>
<tr>
<td align="right">回転角:<i>&theta;</i>=</td>
<td align="left"><input type="text" name="theta">[deg]</td>
</tr>
<tr>
<td align="right"><input type="radio" name="axis" value="roll"></td>
<td align="left"><i>x</i>軸周りに回転(ロール)</td>
</tr>
<tr>
<td align="right"><input type="radio" name="axis" value="pitch"></td>
<td align="left"><i>y</i>軸周りに回転(ピッチ)</td>
</tr>
<tr>
<td align="right"><input type="radio" name="axis" value="yaw"></td>
<td align="left"><i>z</i>軸周りに回転(ヨー)</td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" value="計算する" onClick="rotationcalculator()"></td>
</tr>
<tr>
<td align="center" colspan="2"><hr></td>
</tr>
<tr>
<td align="right"><i>x</i>=</td>
<td align="left"><input type="text" name="posx"></td>
</tr>
<tr>
<td align="right"><i>y</i>=</td>
<td align="left"><input type="text" name="posy"></td>
</tr>
<tr>
<td align="right"><i>z</i>=</td>
<td align="left"><input type="text" name="posz"></td>
</tr>
</table>
</form>

rotationcalculator.js

function rotationcalculator(){
  posx0=parseFloat(document.rotcalc.posx0.value);
  posy0=parseFloat(document.rotcalc.posy0.value);
  posz0=parseFloat(document.rotcalc.posz0.value);
  theta=parseFloat(document.rotcalc.theta.value);

  theta=theta*Math.PI/180
  // 度数法から孤度法への変換

  if(document.rotcalc.axis[0].checked == true){
    posx=posx0;
    posy=Math.cos(theta)*posy0-Math.sin(theta)*posz0;
    posz=Math.sin(theta)*posy0+Math.cos(theta)*posz0;
  }

  if(document.rotcalc.axis[1].checked == true){
    posx=Math.cos(theta)*posx0+Math.sin(theta)*posz0;
    posy=posy0;
    posz=-Math.sin(theta)*posx0+Math.cos(theta)*posz0;
  }

  if(document.rotcalc.axis[2].checked == true){
    posx=Math.cos(theta)*posx0-Math.sin(theta)*posy0;
    posy=Math.sin(theta)*posx0+Math.cos(theta)*posy0;
    posz=posz0;
  }

  posx=Math.round(1000*(posx))/1000;
  posy=Math.round(1000*(posy))/1000;
  posz=Math.round(1000*(posz))/1000;
  // 小数点以下第3位未満を四捨五入

  document.rotcalc.posx.value=parseFloat(""+posx);
  document.rotcalc.posy.value=parseFloat(""+posy);
  document.rotcalc.posz.value=parseFloat(""+posz);
}



Shadow Academy トップへ戻る

inserted by FC2 system