Code
In Train Fever können Meshes mithilfe von Parametern im Raum gedreht, Skaliert und Positioniert werden. Dieses Tool richtet sich vor allem an Modder, um ihnen bei der Berechnung der entsprechenden Transformationsparameter zu helfen, sowie das allgemein Verständnis für die Transformation in Train Fever zu fördern. Es können Drehungen um die verschiedenen Achsen in Grad, sowie beliebige Skalierungen und Verschiebungen in den verschiedenen Raumrichtungen angeben. Das Tool berechnet die zugehörige Transformationsmatrix und liefert auch direkt den richtigen Text für das einbinden in .mdl-Dateien mit dazu.
Die zugrunde liegende Berechnung findet man z.B. hier: http://www.tm-mathe.de/Themen/html/canvas3Dtrans.html
<br><br>
<script>
function updateMatrix() {
var pi = Math.PI;
var c = Math.cos;
var s = Math.sin;
var round = Math.round;
var alpha = parseInt(document.getElementById("rot[z]").value) * pi / 180;
var beta = parseInt(document.getElementById("rot[y]").value) * pi / 180;
var gamma = parseInt(document.getElementById("rot[x]").value) * pi / 180;
var sc_x = parseInt(document.getElementById("sc[x]").value);
var sc_y = parseInt(document.getElementById("sc[y]").value);
var sc_z = parseInt(document.getElementById("sc[z]").value);
var pos_x = parseInt(document.getElementById("pos[x]").value);
var pos_y = parseInt(document.getElementById("pos[y]").value);
var pos_z = parseInt(document.getElementById("pos[z]").value);
var m = [];
for(var i = 1; i <= 4; i++)
m[i] = [];
m[1][1] = c(alpha) * c(beta) * sc_x;
m[1][2] = (c(alpha) * s(beta) * s(gamma) - s(alpha) * c(gamma)) * sc_y;
m[1][3] = (c(alpha) * s(beta) * c(gamma) + s(alpha) * s(gamma)) * sc_z;
m[1][4] = pos_x;
m[2][1] = s(alpha) * c(beta) * sc_x;
m[2][2] = (s(alpha) * s(beta) * s(gamma) + c(alpha) * c(gamma)) * sc_y;
m[2][3] = (s(alpha) * s(beta) * c(gamma) - c(alpha) * s(gamma)) * sc_z;
m[2][4] = pos_y;
m[3][1] = -s(beta) * sc_x;
m[3][2] = c(beta) * s(gamma) * sc_y;
m[3][3] = c(beta) * c(gamma) * sc_z;
m[3][4] = pos_z;
m[4][1] = 0;
m[4][2] = 0;
m[4][3] = 0;
m[4][4] = 1;
str = "transf = {";
for(var k = 1; k <= 4; k++) {
for(var i = 1; i <= 4; i++) {
if ((m[i][k].toFixed(3))%1==0)
m[i][k] = m[i][k].toFixed(0);
else
m[i][k] = m[i][k].toFixed(3);
console.log("m\[" + i + "\," + k + "\]")
document.getElementById("m\[" + i + "\," + k + "\]").innerHTML = m[i][k];
str += m[i][k] + ", ";
}
}
str += "},";
document.getElementById("transf").value = str;
}
//</script>
<FIELDSET>
<LEGEND>Transformation</LEGEND>
<form>
<table class='table'>
<tr>
<th colspan='2' style='width: 33%;'>Drehung in Grad:</th>
<th colspan='2' style='width: 33%;'>Skalierung:</th>
<th colspan='2' style='width: 34%;'>Position:</th>
</tr>
<tr>
<td style='width: 13%;'><label for='rot[x]'>X-Achse <img src='http://ftp.train-fever.net/transformation/X.png'></img></label></td>
<td style='width: 20%;'><input type='number' step='any' id='rot[x]' name='rot[x]' value='0' tabindex='1' autofocus='autofocus' style='text-align: left;' onchange='updateMatrix()'/></td>
<td style='width: 13%;'><label for='sc[x]'>X-Achse</label></td>
<td style='width: 20%;'><input type='number' step='any' id='sc[x]' name='sc[x]' value='1' tabindex='4' style='text-align: left;' onchange='updateMatrix()'/></td>
<td style='width: 13%;'><label for='pos[x]'>X-Achse</label></td>
<td style='width: 20%;'><input type='number' step='any' id='pos[x]' name='pos[x]' value='0' tabindex='7' style='text-align: left;' onchange='updateMatrix()'/></td>
</tr>
<tr>
<td><label for='rot[y]'>Y-Achse <img src='http://ftp.train-fever.net/transformation/Y.png'></img></label></td>
<td><input type='number' step='any' id='rot[y]' name='rot[y]' value='0' tabindex='2' style='text-align: left;' onchange='updateMatrix()'/></td>
<td><label for='sc[y]'>Y-Achse</label></td>
<td><input type='number' step='any' id='sc[y]' name='sc[y]' value='1' tabindex='5' style='text-align: left;' onchange='updateMatrix()'/></td>
<td><label for='pos[y]'>Y-Achse</label></td>
<td><input type='number' step='any' id='pos[y]' name='pos[y]' value='0' tabindex='8' style='text-align: left;' onchange='updateMatrix()'/></td>
</tr>
<tr>
<td><label for='rot[z]'>Z-Achse <img src='http://ftp.train-fever.net/transformation/Z.png'></img></label></td>
<td><input type='number' step='any' id='rot[z]' name='rot[z]' value='0' tabindex='3' style='text-align: left;' onchange='updateMatrix()'/></td>
<td><label for='sc[z]'>Z-Achse</label></td>
<td><input type='number' step='any' id='sc[z]' name='sc[z]' value='1' tabindex='6' style='text-align: left;' onchange='updateMatrix()'/></td>
<td><label for='pos[z]'>Z-Achse</label></td>
<td><input type='number' step='any' id='pos[z]' name='pos[z]' value='0' tabindex='9' style='text-align: left;' onchange='updateMatrix()'/></td>
</tr>
</table>
</form>
</FIELDSET>
<FIELDSET>
<LEGEND>Resultierende Transformations-Matrix</LEGEND>
<table class='matrix' style='width: 1%; max-width: 100%; min-width: 250px; background: rgba(255, 255, 255, .8); border-collapse: collapse; border-spacing: 0px; border: none; margin: 5px Auto; text-align: Center; '>
<tr>
<td rowspan='4' style='border-style: solid; border-color: #000; border-width: 1px 0px 1px 1px; padding: 5px;'></td>
<td id='m[1,1]'></td>
<td id='m[1,2]'></td>
<td id='m[1,3]'></td>
<td id='m[1,4]'></td>
<td rowspan='4' style='border-style: solid; border-color: #000; border-width: 1px 1px 1px 0px; padding: 5px;'></td>
</tr>
<tr>
<td id='m[2,1]' style='padding: 5px;'></td>
<td id='m[2,2]' style='padding: 5px;'></td>
<td id='m[2,3]' style='padding: 5px;'></td>
<td id='m[2,4]' style='padding: 5px;'></td>
</tr>
<tr>
<td id='m[3,1]' style='padding: 5px;'></td>
<td id='m[3,2]' style='padding: 5px;'></td>
<td id='m[3,3]' style='padding: 5px;'></td>
<td id='m[3,4]' style='padding: 5px;'></td>
</tr>
<tr>
<td id='m[4,1]' style='padding: 5px;'></td>
<td id='m[4,2]' style='padding: 5px;'></td>
<td id='m[4,3]' style='padding: 5px;'></td>
<td id='m[4,4]' style='padding: 5px;'></td>
</tr>
</table>
</FIELDSET>
<FIELDSET>
<LEGEND>Resultierender Transformation String für Train Fever</LEGEND>
<form style='width: 100%;'>
<table style='width: 100%;'>
<tr><td><input type='text' id='transf' value='' tabindex='10' style='width: 100%' readonly/></td></tr>
</table>
</form>
</FIELDSET>
<script>
updateMatrix()
//</script>
<div style='text-align: right; border-top: 0px solid grey; color: grey;'><a href='http://ftp.train-fever.net/transformation/'>http://ftp.train-fever.net/transformation</a></div>
Alles anzeigen