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/toutatis.js"></script>
<body>
   <div id="container">
     <div class="app">
        <div class="title">ICE 9: Lighting and Shading</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>Light position</li>
              <li><span class="red-font">X</span><span id="lx_crd">=&nbsp;1.0</span></li>
              <li><input type="range" id="lxt" min="-1" max="1" step="0.01" value="1.0"></li>
              <li><span class="green-font">Y</span><span id="ly_crd">=&nbsp;1.0</span></li>
              <li><input type="range" id="lyt" min="-1" max="1" step="0.01" value="1.0"></li>
              <li><span class="blue-font">Z</span><span id="lz_crd">=&nbsp;1.0</span></li>
              <li><input type="range" id="lzt" min="-1" max="1" step="0.01" value="1.0"></li>
              <li><button id="reset">reset</button></li>
            </ul>
          </div> <!-- end control -->
          <div class="rock">
            <canvas id="webgl-canvas">
            Oops, your...

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%;
}

.rock 
{
  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 attr_normal = null;
let uniform__color = null;
let uniform_view = null;
let uniform_perspective = null;
let uniform_light = null;
let vertex_data = [];
let normal_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 lxt = 1.0;
let lyt = 1.0;
let lzt = 1.0;

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.3, 0.0, 0.0],
  [0.0, 0.0, 0.0],
  [0.0, 0.3, 0.0],
  [0.0, 0.0, 0.0],
  [0.0, 0.0, 0.3]
];


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

document.getElementById("zt").addEventListener( "click", function(e) {
  zt = document.getElementById("zt").value;
  document.getElementById("z_crd").innerHTML="= " + zt;
  draw();
} );

document.getElementById("xt").addEventListener( "click", function(e) {
  xt = document.getElementById("xt").value;
  document.getElementById("x_crd").innerHTML="= " + xt;
  draw();
} );

document.getElementById("yt").addEventListener( "click", function(e) {
  yt = document.getElementById("yt").value;
  document.getElementById("y_crd").innerHTML="= " + yt;
  draw();
});
document.getElementById("fov").addEventListener( "click", function(e) {
  fov = document.getElementById("fov").value;
  document.getElementById("fovy").innerHTML="= " + fov;
  draw();
} );

document.getElementById("lzt").addEventListener( "click", function(e) {
  lzt = document.getElementById("lzt").value;
  document.getElementById("lz_crd").innerHTML="= " + lzt;
  draw();
} );

document.getElementById("lxt").addEventListener(...