HTML5绘制一个3D立方体,HTML5/Canvas交互式3D立方体

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

'use strict';

var CSIZE = 500 /* canvas size */ ,

OFF = .5 * CSIZE /* canvas origin offset */ ,

VPOINT = 2 * CSIZE /* vanishing point */ ,

_c = document.querySelector('canvas'),

ct = _c.getContext('2d'),

/* controls */

_frm = document.querySelector('form'),

_btn = document.querySelector('button'),

_auto = document.getElementById('auto'),

_err = document.querySelector('.err');

var s3d = undefined /* 3D shape */ ,

hue = 5 /* hue for 3D shape faces */ ,

rot = [1, 0, 1] /* default rotate axis */ ,

ang = .005 * Math.PI /* default unit rotation */ ,

rID = null /* request ID */ ,

drag = false /* drag status */ ,

sol = false /* status on lock */ ,

/* coords when starting drag */

x0 = null,

y0 = null;

var Point = function Point() {

var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];

var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];

var z = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];

var c = [] /* natural set of coords */ ,

/*

* coords flattened to plane,

* taking perspective into account

*/

p = [];

this.setCoords = function(x, y, z) {

var f = z / VPOINT + 1;

c = [x, y, z];

p = [f * x, f * y, z];

};

this.getCoords = function() {

var f = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];

return f ? c : p;

};

this.setCoords(x, y, z);

};

var Polygon = function Polygon(v) {

var n = v.length /* number of poly vertices */ ,

o = [0, 0, 0] /* central point of poly */ ;

/* recompute central point coordinates */

this.refreshO = function() {

o = [0, 0, 0];

var _loop = function _loop(i) {

o = o.map(function(c, j) {

return c + v[i].getCoords()[j];

});

};

for (var i