My complex scene button

by angelajimenez

HTML

<div class="opciones-camara">
  <center>
  <h4>Camera controls</h4>
  <input type="button" value="Lateral" id="btn1"/>
  <input type="button" value="Killer"id="btn2"/>
  <input type="button" value="Victim"id="btn3"/>
    
  </center>
</div>


<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-helper.js"></script>
<script src="https://webglfundamentals.org/webgl/lessons/resources/3d-math.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js" integrity="sha512-eV9ExyTa3b+YHr99IBTYpwk4wbgDMDlfW8uTxhywO8dWb810fGUSKDgHhEv1fAqmJT4jyYnt1iWWMW4FRxeQOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec4 aVertexColor;

uniform mat4 u_worldViewProjection;
varying lowp vec4 vColor;

void main() {
   gl_Position = u_worldViewProjection * a_position;
   vColor = aVertexColor;
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
varying lowp vec4 vColor;
void main() {
  gl_FragColor = vColor;
  }
</script>
<canvas id="c"></canvas>

CSS

body {
  margin: 0;
}

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

JavaScript

var m = ThreeDMath;
main();
function main() {


   				let isPlaying = true;

					let campos = [15*Math.cos(1), 2, 15];
          
          let target_ = [0, 2, 0];
    //Dibuja un cubo de lado uno centrado en (0,0,0) de color r, g, ,b
    function dibujarCubo(rgb) {

        let vertices = calcularverticesCubo();
        vertexBuffer(vertices);

        let colores = colorsCubo(rgb);
        colorBuffer(colores);


        let indices = indicesCubo();
        indexBuffer(indices);
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
    }

    function dibujarPiramide(rgb) {

        let vertices = calcularverticesPiramide();
        vertexBuffer(vertices);

        let colores = colorsPir(rgb);
        colorBuffer(colores);


        let indices = indicesStripPiramide();
        indexBuffer(indices);
        gl.drawElements(gl.TRIANGLE_STRIP, indices.length, gl.UNSIGNED_SHORT, 0);

    }

    function dibujarCilindro(divisiones, rgd) {

        let vertices = verticesCilindro(divisiones);
        vertexBuffer(vertices);
        let colors = coloresCyl(divisiones, rgd);
        colorBuffer(colors);

        let indicesCirculo1 = indicesCirculo(0, divisiones);
        indexBuffer(indicesCirculo1)
        gl.drawElements(gl.TRIANGLE_FAN, indicesCirculo1.length, gl.UNSIGNED_SHORT, 0);

        indicesCirculo1 = indicesCirculo(divisiones + 1, divisiones);
        indexBuffer(indicesCirculo1);
        gl.drawElements(gl.TRIANGLE_FAN, indicesCirculo1.length, gl.UNSIGNED_SHORT, 0);

				let indicesPar = indicesStrip(divisiones);
        indexBuffer(indicesPar)
        gl.drawElements(gl.TRIANGLE_STRIP, indicesPar.length, gl.UNSIGNED_SHORT, 0);


    }

    

    //Calcula los vertices de un cilindro con base en el origen de altura y radio 1
    function verticesCilindro(triangs) {

        const pi = Math.PI

        const vertices = [0, 0, 0];
        for (let i = 1; i <= triangs; i++) {
            let theta = i * 2 * pi / triangs;
         ...