Euler Angles

by UAIbot

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UAIbot</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        font-size: 25px;
        text-align: center;
      }

    </style>
  </head>

  <body>
    <canvas id="scene" style='width:100%; height:400px; position:relative'></canvas>
    <p>α:
      <input type="range" min="-31415" max="31415" value="0" class="slider" id="alfa">
      β:
      <input type="range" min="-31415" max="31415" value="0" class="slider" id="beta">
      γ:
      <input type="range" min="-31415" max="31415" value="0" class="slider" id="gamma">
    </p>


    <script type="module" src="../js/dp_inv.js"></script>
  </body>

</html>

JavaScript

import * as UAIbot from 'https://cdn.jsdelivr.net/gh/UAIbot/UAIbotJS@v1.0.1/UAIbotJS/UAIbot.js';
import * as Utils from 'https://cdn.jsdelivr.net/gh/UAIbot/UAIbotJS@main/UAIbotJS/Utils.js';
import * as math from 'https://cdn.jsdelivr.net/npm/mathjs@11.6.0/+esm'

let alfa_slider = document.getElementById("alfa");
let beta_slider = document.getElementById("beta");
let gamma_slider = document.getElementById("gamma");

let alfa = 0;
let beta = 0;
let gamma = 0;

alfa_slider.oninput = function() {
  alfa = this.value/10000;
}

beta_slider.oninput = function() {
  beta = this.value/10000;
}

gamma_slider.oninput = function() {
  gamma = this.value/10000;
}

let sim = new UAIbot.Simulation();
let frame1 = new UAIbot.Frame(1);
let frame2 = new UAIbot.Frame(1);
let box = new UAIbot.Box(0.5, 0.5, 0.5, "red")

sim.add(frame1)
sim.add(frame2)
sim.add(box)


sim.setAnimationLoop(() => {
  let Rx = Utils.rotx(gamma);
  let Ry = Utils.roty(beta);
  let Rz = Utils.rotz(alfa);
	
  let Q = math.multiply(Rz, Ry, Rx);
  
  box.setHTM(Q)
  frame2.setHTM(Q)
  
  sim.render();
});