JSFiddle - React, Tailwind, and code Playground

by kyekk

HTML

<script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
<script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brent-munsell/graphics/models/project2.js"></script>
<body>
   <div id="container">
     <div class="app">
        <div class="title">Flight Simulator</div>
         <div class="labels">
            <span class="yaw">Yaw</span>
            <span class="pitch">Pitch</span>
            <span class="roll">Roll</span>
        </div> <!-- end label -->
        <div class="planes">
            <canvas id="xz"></canvas>
            <canvas id="yz"></canvas>
            <canvas id="xy"></canvas>
        </div> <!-- end mission -->
        <div class="sim">
            <canvas id="xyz"></canvas>
            <div class="control">
              <ul>
                <li><button type="button" id="roll-left"></button></li>
                <li><button type="button" id="pitch-up"></button></li>
                <li><button type="button" id="roll-right"></button></li>
              </ul>
              <ul>
                <li><button type="button" id="yaw-left"></button></li>
                <li><button type="button" id="reset"></button></li>
                <li><button type="button" id="yaw-right"></button></li>
              </ul>
              <ul>
                <li><button type="button" class="blank"></button></li>
                <li><button type="button" id="pitch-down"></button></li>
                <li><button type="button" class="blank"></button></li>
              </ul>
            </div> <!-- end control -->
        </div> <!-- end sim -->
     </div> <!-- end app -->
  </div> <!-- end containter -->
  
  
  <script id="vertex-shader" type="x-shader/x-vertex">

  precision mediump float;
  attribute vec4 vertex;
  uniform vec4 props;
  uniform float z_translation;
  

  void main() {
                      
      float s_x = sin( props[0] );
      float c_x = cos(...

CSS

#container
{
  margin: auto;
  padding: 1px;
  width: 605px;
  height: 605px;
}

.app
{
  margin: auto;
  padding: 0px;
}

.title
{
  margin: auto;
  padding: 10px;
  border: 1px solid black;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: black;
  background-image: url( "https://i.ibb.co/QCM6V8C/brush-metal.jpg" );
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.planes
{
  margin: auto;
  display: flex;
  height: 200px;
  width: 605px;
}

.labels
{
  margin: auto;
  display: flex;
  height: 20px;
  width: 605px;
}

.yaw {
  width: 200px;
  height: 25px;
  font-family: Arial, sans-serif;
  background-color: green;
  color: white;
  border: 1px solid black;
  text-align: center;
}

.pitch {
  width: 200px;
  height: 25px;
  font-family: Arial, sans-serif;
  background-color: red;
  color: white;
  border: 1px solid black;
  text-align: center;
}

.roll {
  width: 200px;
  height: 25px;
  font-family: Arial, sans-serif;
  background-color: blue;
  color: white;
  border: 1px solid black;
  text-align: center;
}

.sim
{
  margin: auto;
  display: flex;
  height: 380px;
  width: 605px;
}

.control
{
  margin: auto;
  border: 2px solid black;
  height: 100%;
  width: 100%;
  background-image: url( "https://i.ibb.co/QCM6V8C/brush-metal.jpg" );
  background-repeat: no-repeat;
  background-size: cover;
}

#xz 
{
   background-image: url( "https://i.ibb.co/NZ4Cf7m/sky3.webp" );
   background-repeat: no-repeat;
   background-size: cover;
   width: 200px;
   height: 200px;
   border: 1px solid black;
}

#yz 
{
  background-image: url( "https://i.ibb.co/NZ4Cf7m/sky3.webp" );
   background-repeat: no-repeat;
   background-size: cover;
   width: 200px;
   height: 200px;
   border: 1px solid black;
}

#xy 
{
   background-image: url( "https://i.ibb.co/NZ4Cf7m/sky3.webp" );
   background-repeat: no-repeat;
   background-size: cover;
   width: 200px;
   height: 200px;
   border: 1px solid black;
}

#xyz 
{
   background-image:...

JavaScript

console.clear();

// ----------------------------------------------
// Axis data (do not modify)
// ----------------------------------------------

let A = [
    [0.0, 0.0, 0.0],
    [1.0, 0.0, 0.0],
    [0.0, 0.0, 0.0],
    [0.0, 1.0, 0.0],
    [0.0, 0.0, 0.0],
    [0.0, 0.0, 1.0]
];

// ----------------------------------------------
// end axis data
// ----------------------------------------------

// ----------------------------------------------
// Simuation control (do not modify)
// ----------------------------------------------

let xang = 0;
let yang = 0;
let zang = 0;
let rot = 0;
let axisRotation = null;
let rot_inc = 10;

function startRotation(rotationFunc) {
    if (axisRotation !== null) clearInterval(axisRotation);
    axisRotation = setInterval(rotationFunc, 100);
}

function stopRotation() {
    clearInterval(axisRotation);
    axisRotation = null;
}

document.addEventListener('mouseup', stopRotation);

document.addEventListener('mousedown', function (event) {
    switch ( event.target.id ) {
        case "pitch-up":
            startRotation(() => { xang = ( xang + rot_inc ) % 360; });
            break;
        case "pitch-down":
            startRotation(() => { xang = ( xang - rot_inc ) % 360; });
            break;
        case "roll-left":
            startRotation(() => { zang = ( zang + rot_inc ) % 360; });
            break;
        case "roll-right":
            startRotation(() => { zang = ( zang - rot_inc ) % 360; });
            break;
        case "yaw-left":
            startRotation(() => { yang = ( yang + rot_inc ) % 360; });
            break;
        case "yaw-right":
            startRotation(() => { yang = ( yang - rot_inc ) % 360; });
            break;
        case "reset":
            xang = yang = zang = 0; 
            break;
        default:
            stopRotation();
    }
});

// ----------------------------------------------
// End simuation control
// ----------------------------------------------
let...