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/finalproj.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brent-munsell/graphics/models/finalproj.js"></script>
<body>
    <div id="container">
        <div class="app">
            <div class="title">Final Project: Satellite orbiting Mars</div>
            <div class="setting">
                <div class="control">
                  <ul>
                        <li>Satellite settings</li>
                        <li><span>Orbit speed</span><span id="os_crd">=&nbsp;3</span></li>
                        <li><input type="range" id="os" min="0" max="10" step="0.1" value="3"></li>
                        <li><span>Orbit distance</span><span id="od_crd">=&nbsp;0.65</span></li>
                        <li><input type="range" id="od" min="0.5" max="1.5" step="0.05" value="0.65"></li>
                        <li><span>Orbit angle</span><span id="oa_crd">=&nbsp;45</span></li>
                        <li><input type="range" id="oa" min="0" max="180" step="1" value="45"></li>
                        <li><button id="reset_ss">reset</button></li>
                    
                    </ul> 
                </div> <!-- end control -->
                <div class="rock">
                    <canvas id="webgl-canvas">
                        Oops, your browser doesn't support the HTML5 canvas!
                    </canvas>
                </div> <!-- end rock -->
                <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...

CSS

#container
{
  margin: auto;
  padding: 1px;
  width: 1000px;
  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%;
}

.camera-light-position
{
  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;
}

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

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

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

#fovy
{
  padding-left: 10px;
}

#os_crd
{
  padding-left: 10px;
}

#od_crd
{
  padding-left: 10px;
}

#oa_crd
{
  padding-left: 10px;
}

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

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


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

JavaScript

console.clear();


// ----------------------------------------------
// create variables used in your program
// ----------------------------------------------
let webgl_context = null;
let attr_vertex = null;
let attr_normal = null;
let uniform_color = null;
let uniform_view = null;
let uniform_props = null;
let uniform_perspective = null;
let uniform_light = null;
let uniform_trans = null;
let uniform_eye = null;
let vertex_data = [];
let normal_data = [];
let canvas = null;
let program = null;
let count = 2;
let size = 3;
let axis_index = 0;
let mars_y_rot = 0;
let mgs_y_rot = 0;


// ----------------------------------------------
// camera parameters
// ----------------------------------------------
let xt = 0.5;
let yt = 0.5;
let zt = 0.5;
let fov = 45;


// ----------------------------------------------
// light parameters
// ----------------------------------------------
let lxt = 1.0;
let lyt = 1.0;
let lzt = 1.0;


// ----------------------------------------------
// orbit dynamic parameters
// ----------------------------------------------
let orbit_speed = 0;
let orbit_speed_crd = 3;
let orbit_radius_crd = 0.65;
let orbit_angle_crd = 45;


// ----------------------------------------------
// camera orientation parameters
// ----------------------------------------------
let at = vec3(0.0, 0.0, 0.0);
let up = vec3(0.0, 1.0, 0.0);


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


// listener for the orbit speed slider
document.getElementById("os").addEventListener("input", function(e) {
  orbit_speed_crd = parseFloat(document.getElementById("os").value);
  document.getElementById("os_crd").innerHTML = " = " + orbit_speed_crd;
});


// listener for the orbit distance slider
document.getElementById("od").addEventListener("input", function(e) {
  orbit_radius_crd = parseFloat(e.target.value);
  document.getElementById("od_crd").innerHTML = " = " + orbit_radius_crd;
});


// listener...