I have already created the button, but how do I alter this code to make these changes?

1. Change cube into a pyramid

2. Create button to Rotate shape on X Axis

3. Create button to Rotate shape on Y Axis

4. Create button to Rotate shape on Z Axis

5. Create button to stop Rotation of shape

HTML

zNear .01

min=".01" max="3" step="0.1" value="0.3" />

3

zFar 3

min="3" max="10" step="3.0" value="3" />

10

radius 0.05

min="0.05" max="10" step="0.1" value="4" />

10

theta -90

min="-90" max="90" step="5" value="0" />

90

phi -90

min="-90" max="90" step="5" value="0" />

90

fov 10

min="10" max="120" step="5" value="45" />

120

aspect 0.5

min="0.5" max="2" step="0.1" value="1" />

2

Oops ... your browser doesn't support the HTML5 canvas element

Javascript

var perspectiveExample2 = function() {

"use strict";

var canvas;

var gl;

var numPositions = 36;

var positionsArray = [];

var colorsArray = [];

var vertices = [

vec4(-0.5, -0.5, 1.5, 1.0),

vec4(-0.5, 0.5, 1.5, 1.0),

vec4(0.5, 0.5, 1.5, 1.0),

vec4(0.5, -0.5, 1.5, 1.0),

vec4(-0.5, -0.5, 0.5, 1.0),

vec4(-0.5, 0.5, 0.5, 1.0),

vec4(0.5, 0.5, 0.5, 1.0),

vec4( 0.5, -0.5, 0.5, 1.0)

];

var vertexColors = [

vec4(0.0, 0.0, 0.0, 1.0), // black

vec4(1.0, 0.0, 0.0, 1.0), // red

vec4(1.0, 1.0, 0.0, 1.0), // yellow

vec4(0.0, 1.0, 0.0, 1.0), // green

vec4(0.0, 0.0, 1.0, 1.0), // blue

vec4(1.0, 0.0, 1.0, 1.0), // magenta

vec4(0.0, 1.0, 1.0, 1.0), // cyan

vec4(1.0, 1.0, 1.0, 1.0), // white

];

var near = 0.3;

var far = 3.0;

var radius = 4.0;

var theta = 0.0;

var phi = 0.0;

var dr = 5.0 * Math.PI/180.0;

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

var aspect = 1.0; // 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);

function quad(a, b, c, d) {

positionsArray.push(vertices[a]);

colorsArray.push(vertexColors[a]);

positionsArray.push(vertices[b]);

colorsArray.push(vertexColors[a]);

positionsArray.push(vertices[c]);

colorsArray.push(vertexColors[a]);

positionsArray.push(vertices[a]);

colorsArray.push(vertexColors[a]);

positionsArray.push(vertices[c]);

colorsArray.push(vertexColors[a]);

positionsArray.push(vertices[d]);

colorsArray.push(vertexColors[a]);

}

function colorCube()

{

quad(1, 0, 3, 2);

quad(2, 3, 7, 6);

quad(3, 0, 4, 7);

quad(6, 5, 1, 2);

quad(4, 5, 6, 7);

quad(5, 4, 0, 1);

}

window.onload = function init() {

canvas = document.getElementById("gl-canvas");

gl = canvas.getContext('webgl2');

if (!gl) alert("WebGL 2.0 isn't available");

gl.viewport(0, 0, canvas.width, canvas.height);

aspect = canvas.width/canvas.height;

gl.clearColor(1.0, 1.0, 1.0, 1.0);

gl.enable(gl.DEPTH_TEST);

//

// Load shaders and initialize attribute buffers

//

var program = initShaders(gl, "vertex-shader", "fragment-shader");

gl.useProgram(program);

colorCube();

var cBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);

gl.bufferData(gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW);

var colorLoc = gl.getAttribLocation(program, "aColor");

gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(colorLoc);

var vBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);

gl.bufferData(gl.ARRAY_BUFFER, flatten(positionsArray), gl.STATIC_DRAW);

var positionLoc = gl.getAttribLocation( program, "aPosition");

gl.vertexAttribPointer(positionLoc, 4, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(positionLoc);

modelViewMatrixLoc = gl.getUniformLocation(program, "uModelViewMatrix");

projectionMatrixLoc = gl.getUniformLocation(program, "uProjectionMatrix");

// sliders for viewing parameters

document.getElementById("zFarSlider").onchange = function(event) {

far = event.target.value;

};

document.getElementById("zNearSlider").onchange = function(event) {

near = event.target.value;

};

document.getElementById("radiusSlider").onchange = function(event) {

radius = event.target.value;

};

document.getElementById("thetaSlider").onchange = function(event) {

theta = event.target.value* Math.PI/180.0;

};

document.getElementById("phiSlider").onchange = function(event) {

phi = event.target.value* Math.PI/180.0;

};

document.getElementById("aspectSlider").onchange = function(event) {

aspect = event.target.value;

};

document.getElementById("fovSlider").onchange = function(event) {

fovy = event.target.value;

};

render();

}

var render = function(){

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

eye = vec3(radius*Math.sin(theta)*Math.cos(phi),

radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));

modelViewMatrix = lookAt(eye, at, up);

projectionMatrix = perspective(fovy, aspect, near, far);

gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix));

gl.uniformMatrix4fv(projectionMatrixLoc, false, flatten(projectionMatrix));

gl.drawArrays(gl.TRIANGLES, 0, numPositions);

requestAnimationFrame(render);

}

}

perspectiveExample2();