3D Camera Model

Displays 3D data with perspective. The camera position and internal settings can easily be adjusted.

HTML

<body>
		<canvas id="myCanvas" width="600" height="480">
		</canvas>
	</body>

CSS

#myCanvas {
  disply: block;
  margin: 0 auto;
  border: 1px solid #000;
}

JavaScript

var width = 600,
    height = 480;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


// Camera
var Gx = 0,
    Gy = 0,
    Gz = 0,

    RotX = 0,
    RotY = 0,
    RotZ = 0,

    Cx = 0,
    Cy = 0,
    Cz = 5,

    f = 0.1,
    Px = 0.06,
    Py = 0.048,
    offsetX = width / 2,
    offsetY = height / 2,
    skew = 0,

    offset = [],
    N = [],
    P = [],
    C = [],
    Rx = [],
    Ry = [],
    Rz = [],
    G = [];

var pix = 12;

// 3D DATA
var verts =
    [
      [
        [ -1 ],
        [ -1 ],
        [ -1 ],
        [ 1 ]
      ],
      [
        [ 1 ],
        [ -1 ],
        [ -1 ],
        [ 1 ]
      ],
      [
        [ -1 ],
        [ 1 ],
        [ -1 ],
        [ 1 ]
      ],
      [
        [ 1 ],
        [ 1 ],
        [ -1 ],
        [ 1 ]
      ],
      [
        [ -1 ],
        [ -1 ],
        [ 1 ],
        [ 1 ]
      ],
      [
        [ 1 ],
        [ -1 ],
        [ 1 ],
        [ 1 ]
      ],
      [
        [ -1 ],
        [ 1 ],
        [ 1 ],
        [ 1 ]
      ],
      [
        [ 1 ],
        [ 1 ],
        [ 1 ],
        [ 1 ]
      ]
    ];

var edges =
    [
      [ 
        [ 0 ], 
        [ 1 ] 
      ],
      [ 
        [ 0 ], 
        [ 2 ] 
      ],
      [ 
        [ 2 ], 
        [ 3 ] 
      ],
      [ 
        [ 1 ], 
        [ 3 ] 
      ],
      [ 
        [ 0 ], 
        [ 4 ] 
      ],
      [ 
        [ 1 ], 
        [ 5 ] 
      ],
      [ 
        [ 2 ], 
        [ 6 ] 
      ],
      [ 
        [ 3 ], 
        [ 7 ] 
      ],
      [ 
        [ 4 ], 
        [ 5 ] 
      ],
      [ 
        [ 4 ], 
        [ 6 ] 
      ],
      [ 
        [ 6 ], 
        [ 7 ] 
      ],
      [ 
        [ 5 ], 
        [ 7 ] 
      ]
    ];

function cameraModel(data) {
  var result = [];
  for (var i = 0; i < data.length; i++) {
    result[i] = multiplyMatrix (G ,data[i]);
    result[i] = multiplyMatrix (Rz ,result[i]);
    result[i] = multiplyMatrix (Ry ,result[i]);
    result[i] =...