Design an interactive Viewer using WebGL in javascript. Using all of these code snippets:

$1.$The render function

function render$()$

$\{$

gl$.$clear$($gl$.$COLOR$\_$BUFFER$\_$BIT $|$ gl$.$DEPTH$\_$BUFFER$\_$BIT$)$;

eye $=$ vec$3($radius $*$ Math.sin$($theta$)*$ Math.cos$($phi$),$

radius $*$ Math.sin$($theta$)*$ Math.sin$($phi$),$

radius $*$ Math.cos$($theta$))$;

modelViewMatrix $=$ lookAt$($eye$,$ at$,$ up$)$;

projectionMatrix $=$ ortho$($left$,$ right, bottom, ytop, near, far$)$;

gl$.$uniformMatrix$4$fv$($modelViewMatrixLoc$,$ false, flatten$($modelViewMatrix$))$;

gl$.$uniformMatrix$4$fv$($projectionMatrixLoc$,$ false, flatten$($projectionMatrix$))$;

gl$.$drawArrays$($gl$.$TRIANGLES, $0,$ numVertices$)$;

requestAnimFrame$($render$)$;

$\}$

$2.$ The fixed values:

const at $=$ vec$3(0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0)$; const up $=$ vec$3(0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0)$

$3.$ The vertex shader:

attribute vec$4$ vPosition; attribute vec$4$ vColor; varying vec$4$ fcolor;

uniform mat$4$ modelViewMatrix; uniform mat$4$ projectionMatrix;

void main$()\{$

fcolor $=$ vColor; gl$\_$Position $=$ projectionMatrix $*$ modelViewMatrix $*$ vPosition;

$\}$

$4.$ The fragment shader:

varying vec$4$ color;

void main$()$

$\{$

gl$\_$FragColor $=$ fcolor;

$\}$

$5.$ To control near and far distances: