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>
<body>
   <div id="container">
     <div class="app">
        <div class="title">ICE 8: Camera Orientation and Perspective</div>
        <div class="setting">
          <div class="control">
            <ul>
              <li>Camera settings</li>
              <li><span class="red-font">X</span><span id="x_crd">=&nbsp;0.5</span></li>
              <li><input type="range" id="xt" min="-1" max="1" step="0.01" value="0.5"></li>
              <li><span class="green-font">Y</span><span id="y_crd">=&nbsp;0.5</span></li>
              <li><input type="range" id="yt" min="-1" max="1" step="0.01" value="0.5"></li>
              <li><span class="blue-font">Z</span><span id="z_crd">=&nbsp;0.5</span></li>
              <li><input type="range" id="zt" min="-1" max="1" step="0.01" value="0.5"></li>
              <li><span>FoV</span><span id="fovy">=&nbsp;45</span></li>
              <li><input type="range" id="fov" min="10" max="100" step="1" value="45"></li>
              <li><button id="reset">reset</button></li>
            </ul>
          </div> <!-- end control -->
          <div class="cube">
            <canvas id="webgl-canvas">
            Oops, your browser doesn't support the HTML5 canvas!
            </canvas>
          </div> <!-- end cube -->
        </div> <!-- end setting -->
     </div> <!-- end app -->
  </div> <!-- end containter -->
  
  
  <script id="vertex-shader" type="x-shader/x-vertex">
  
    // highp: float 16-bits of precision.
    // mediump: float 10-bits of precision.
    // lowp: float 8-bits of precision.
  
    precision mediump float;
    attribute vec4 vertex;
    
    // ----------------------------------------------
    // Task 1A: put code below.
    // ----------------------------------------------
		uniform mat4 V;
		uniform mat4 P;

    
    //...

CSS

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

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

.title
{
  margin: auto;
  padding: 10px;
  border: 1px solid black;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: white;
  background-color: rgb( 112, 128, 144 );
}

.setting
{
  margin: auto;
  padding: 0px 0px 0px 0px;
  border: 1px solid black;
  display: flex;
}

.control
{
  padding: 10px;
  font-family: Arial, sans-serif;
  height: 100%;
  width: 100%;
}

.cube 
{
  margin: auto;
  background-position: right;
  background-size: contain;
  border: 1px solid black;
}

#webgl-canvas 
{
   /*background-image: url( "https://i.ibb.co/tmkcJMr/space.jpg" );
   background-repeat: no-repeat; */
   width: 600px;
   height: 600px;
}

ul
{
    margin: 0px;
    padding: 10px 5px 0px 0px;
    list-style-type: none;
}

li
{
  padding: 5px 1px 10px 10px;
}

.red-font
{
  color: red;
}

.blue-font
{
  color: blue;
}

.green-font
{
  color: green;
}

#x_crd
{
  padding-left: 10px;
  color: red;
}

#y_crd
{
  padding-left: 10px;
  color: green;
}

#z_crd
{
  padding-left: 10px;
  color: blue;
}

#fovy
{
  padding-left: 10px;
}

#reset
{
  width: 75px;
  height: 35px;
}

JavaScript

console.clear();

// ----------------------------------------------
// variables used in the program
// ----------------------------------------------

let webgl_context = null;
let attr_vertex = null;
let uniform__color = null;
let uniform_view = null;
let uniform_perspective = null;
let vertex_data = [];
let canvas = null;
let program = null;
let count = 2;
let size = 3;
let axis_index = 0;
let xt = 0.5;
let yt = 0.5;
let zt = 0.5;
let fov = 45;

let at = vec3(0.0,0.0,0.0);
let up = vec3(0.0,1.0,0.0);

// ----------------------------------------------
// Cube and axes data
// ----------------------------------------------


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

// Triangle vertices
let V = [
    [-0.1, -0.1, 0.1],
    [0.1, -0.1, 0.1],
    [0.1,  0.1, 0.1],
    [-0.1,  0.1, 0.1],
    [-0.1, -0.1, -0.1],
    [-0.1,  0.1, -0.1],
    [ 0.1,  0.1, -0.1],
    [ 0.1, -0.1, -0.1],
    [-0.1,  0.1, -0.1],
    [-0.1,  0.1, 0.1],
    [0.1,  0.1, 0.1],
    [0.1,  0.1, -0.1],
    [-0.1, -0.1, -0.1],
    [0.1, -0.1, -0.1],
    [0.1, -0.1,  0.1],
    [-0.1, -0.1, 0.1],
    [0.1, -0.1, -0.1],
    [0.1,  0.1, -0.1],
    [0.1,  0.1, 0.1],
    [0.1, -0.1, 0.1],
    [-0.1, -0.1, -0.1],
    [-0.1, -0.1, 0.1],
    [-0.1,  0.1, 0.1],
    [-0.1,  0.1, -0.1]
  ];
  
  // Triangle faces
  let F = [ 
    [0,  1,  2], //   front (triangle)
    [0,  2,  3], //   front (triangle)
    [4,  5,  6], //   back  (triangle)  
    [4,  6,  7], //   back  (triangle)
    [8,  9,  10], //  top (triangle)  
    [8,  10, 11], //  top (triangle)
    [12, 13, 14], //  bottom  (triangle)   
    [12, 14, 15], //  bottom  (triangle)
    [16, 17, 18], //  right (triangle) 
    [16, 18, 19], //  right (triangle)
    [20, 21, 22], //  left  (triangle)
    [20, 22, 23]  //  left  (triangle)
  ];  


// ----------------------------------------------
// Event listeners
//...