JSFiddle - React, Tailwind, and code Playground

by lb18

HTML

<!-- cĂłdigo de interfaz adaptado de: http://www.dyn-web.com/tutorials/forms/examples/pizza.php -->
<script src="https://rawgit.com/mdn/webgl-examples/gh-pages/tutorial/gl-matrix.js"></script>
<form action="#" method="post" class="demoForm" id="pizzaForm">
    <fieldset>  
        <label><input type="radio" name="size" value="first" /> FirstPerson</label>
        <label><input type="radio" name="size" value="third" checked="checked" /> ThirdPerson</label>
        <label><input type="radio" name="size" value="long" /> LongShot</label>
        <input type="hidden" id="sz_tot" name="sz_tot" value="third" />
    </fieldset>
</form>
<canvas id="glcanvas" width="640" height="480"></canvas>
<script type="text/javascript">
    
    function getSizePrice(e) {
        this.form.elements['sz_tot'].value = this.value;        
        //console.log(seleccion);
    }
    
	var form = document.getElementById('pizzaForm');
  
    var sz = form.elements['size'];
    
    for (var i=0, len=sz.length; i<len; i++) {
        sz[i].onclick = getSizePrice;
    }  
</script>

CSS

canvas { width: 133vw; height: 100vh; display: block }

JavaScript

const esfera1litepos = [
0.000000,1.000000,-0.000000,
0.707107,0.707107,-0.000000,
0.000000,0.707107,-0.707107,
1.000000,0.000000,-0.000000,
0.707107,0.000000,-0.707107,
0.000000,0.000000,-1.000000,
-0.707107,0.707107,-0.000000,
-0.707107,0.000000,-0.707107,
-1.000000,0.000000,-0.000000,
0.000000,0.707107,0.707107,
-0.707107,0.000000,0.707107,
0.000000,0.000000,1.000000,
0.707107,0.000000,0.707107,
0.000000,-1.000000,-0.000000,
0.000000,-0.707107,-0.707107,
0.707107,-0.707107,-0.000000,
-0.707107,-0.707107,-0.000000,
0.000000,-0.707107,0.707107,
];

const esfera1liteind = [
0,1,2,
1,3,4,
1,4,2,
2,4,5,
0,2,6,
2,5,7,
2,7,6,
6,7,8,
0,6,9,
6,8,10,
6,10,9,
9,10,11,
0,9,1,
9,11,12,
9,12,1,
1,12,3,
13,14,15,
14,5,4,
14,4,15,
15,4,3,
13,16,14,
16,8,7,
16,7,14,
14,7,5,
13,17,16,
17,11,10,
17,10,16,
16,10,8,
13,15,17,
15,3,12,
15,12,17,
17,12,11,
];


const varilla1pos = [
6.000000,0.210847,-0.000000,
6.000000,0.105424,-0.182599,
-6.000000,0.105423,-0.182599,
-6.000000,0.210847,-0.000000,
6.000000,-0.105424,-0.182599,
-6.000000,-0.105424,-0.182599,
6.000000,-0.210847,0.000000,
-6.000000,-0.210848,0.000000,
6.000000,-0.105424,0.182599,
-6.000000,-0.105424,0.182599,
6.000000,0.105424,0.182599,
-6.000000,0.105423,0.182599,
];

const varilla1ind = [
0,1,2,
2,3,0,
1,4,5,
5,2,1,
4,6,7,
7,5,4,
6,8,9,
9,7,6,
8,10,11,
11,9,8,
10,0,3,
3,11,10,
];

const varilla2pos = [
4.500000,0.210847,-0.000000,
4.500000,0.105424,-0.182599,
-4.500000,0.105423,-0.182599,
-4.500000,0.210847,-0.000000,
4.500000,-0.105424,-0.182599,
-4.500000,-0.105424,-0.182599,
4.500000,-0.210847,0.000000,
-4.500000,-0.210848,0.000000,
4.500000,-0.105424,0.182599,
-4.500000,-0.105424,0.182599,
4.500000,0.105424,0.182599,
-4.500000,0.105423,0.182599,
];

const varilla2ind = [
0,1,2,
2,3,0,
1,4,5,
5,2,1,
4,6,7,
7,5,4,
6,8,9,
9,7,6,
8,10,11,
11,9,8,
10,0,3,
3,11,10,
];

const cuerda1pos =...