JSFiddle - React, Tailwind, and code Playground

by asterix77

HTML

<!DOCTYPE html>
<html>

  <head>
    <script id="vertex-shader" type="x-shader/x-vertex">
attribute  vec4 vPosition;
attribute  vec4 vColor;
attribute  vec2 vTexCoord;

varying vec4 fColor;
varying vec2 fTexCoord;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main() 
{
    gl_Position = projectionMatrix*modelViewMatrix*vPosition;
    fColor = vColor;
    fTexCoord = vTexCoord;
} 
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;
varying  vec2 fTexCoord;

uniform sampler2D texture;

void
main()
{
    gl_FragColor = fColor * texture2D( texture, fTexCoord );
}
    </script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
  </head>

  <body>
    <canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<br />
Move: 
<button id = "Button3">Farther</button><span id="distance"></span>
<button id = "Button4">Closer</button>
<button id = "Button6">Up</button><span id="theta"></span>
<button id = "Button5">Down</button>
<button id = "Button8">Left</button><span id="phi"></span>
<button id = "Button7">Right</button>

<div>
<input type="checkbox" id="perspective" name="perspective"
         checked>
  <label for="perspective">Use perspective</label>
</div>

<img crossorigin="" id="texImage" src="https://i.imgur.com/A9s5vWS.png" hidden />

</body>
</html>

JavaScript

var gl;
var program;

var points = [];  // All vertices to be drawn (including duplicates)
var colors = [];  // Colors of all vertices to be drawn (including duplicates)
var texCoords = []; // Texture coordinates for each vertex

var near = 0.001;
var far = 1000.0;
var radius = 3.0;
var theta  = 60 * Math.PI/180;
var phi    = -150 * Math.PI/180;
var dr = 5.0 * Math.PI/180.0;

var  fovy = 45.0;  // Field-of-view in Y direction angle (in degrees)
var  aspect;       // Viewport aspect ratio

var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);

var usePerspective = true;

var texture;

var texCoordsBase = [
    vec2(1, 0),
		vec2(1, 1),
    vec2(0, 1),
    vec2(0, 0)
];

var vertices = [
    vec3( -0.5, -0.5,  0.5 ),
    vec3( -0.5,  0.5,  0.5),
    vec3(  0.5,  0.5,  0.5),
    vec3(  0.5, -0.5,  0.5),
    vec3( -0.5, -0.5, -0.5),
    vec3( -0.5,  0.5, -0.5),
    vec3(  0.5,  0.5, -0.5),
    vec3(  0.5, -0.5, -0.5)
];

var vertexColors = [
    vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
    vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
    vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
    vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
    vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
    vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
    vec4( 1.0, 1.0, 1.0, 1.0 ),  // white
    vec4( 1.0, 1.0, 1.0, 1.0 )   // white
];    


function makeCube( )
{
    makeCubeFace(3,2,1,0);
    makeCubeFace(2,3,7,6);
    makeCubeFace(0,4,7,3);
    makeCubeFace(5,1,2,6);
    makeCubeFace(4,5,6,7);
    makeCubeFace(5,4,0,1);
}

function makeCubeFace(a, b, c, d)
{
   var inds = [ a, b, c, a, c, d ];
   var texInds = [0, 1, 2, 0, 2, 3];
   for ( var i = 0; i < inds.length; ++i ) {
			points.push( vertices[inds[i]]);
      
      // Color by vertex
      //colors.push( vertexColors[inds[i]] );
            
      // Color by face
      colors.push(vertexColors[a]);
     
      // Texture
     ...