再加上前一段时间一位同仁说：js玩3D能玩出什么呢？不过浪费时间而已...是的，我是同意这句话的，客户端的js的表现基本只能通过操作dom元素来实现。在document文档里面，你怎么去制造视井深度，哪怕是伪造也会有一堆困难，不攻自破。
所以，除了html5支持的canvas画布外，几乎是不可能通过一两个元素就构建出我们所想的视井深度的。哪怕是我们想建一个最简单的基于球体的模型，都不得不通过像素模拟的思想来实现。可是如果是像素模拟，可能吗？等于说需要成千上万个元素才能模拟一个稍微像样的球体模型。。。浏览器表示鸭梨很大很大，浏览器说如果要这样，你还是杀了我吧。
所以，js玩3d，或许真的是浪费时间。。。
可是，请允许我去稍微的浪费时间，因为我还是放不下数学的美丽。哪怕是简单的三角函数，二次函数，三次函数。。。
注：以下所有例子都较为耗资源。【纵使我不漂亮，可是我也尽力了】
其实这也只是自己闲暇时做的一点自娱自乐。基本没有任何实用性，因为仅仅是上面的那点图案，浏览器已经要承担每次变换500个元素的负担。IE8以下的js引擎就已经显得相当吃力了。
可是我依然把它放上来的原因是我不得不感叹数学的美丽，因为在我它没运行之前，我自己都完全想不到会如此美丽。因为我最开始只是想基于一个最简单的球模型玩一玩的。
【最开始的目的应该像下面的样子】
变化的效果大家可以自定义，修改调用的接口参数就好了。如：
BeautifullMath.init(500, function(r){
return r*r;
});
return r*r;
});
感兴趣的同学可以自行修改参数来看看不同的效果：比如：
BeautifullMath.init(500, function(r){
return Math.cos(r)*r;
});
return Math.cos(r)*r;
});
比如：
BeautifullMath.init(500, function(r){
return Math.sin(r)-r+r*Math.cos(r*r)+.1
});
return Math.sin(r)-r+r*Math.cos(r*r)+.1
});
最后可以留下源码：
代码
var BeautifullMath = function () {
var obj = [], xm = 0, ym = 0, axe = 0, aye = 0, parts = 500, scr, txe, tye, nw, nh;
var addEvent = function (o, e, f) {
window.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(e)})
}
var resize = function () {
nw = scr.offsetWidth * .5;
nh = scr.offsetHeight * .5;
}
var init = function (n, f) {
if(!!n) parts = n;
scr = document.getElementById('screen');
addEvent(document, 'mousemove', function(e){
e = e || window.event;
xm = e.clientX;
ym = e.clientY;
});
resize();
addEvent(window, 'resize', resize);
__init(f);
setInterval(run, 16);
}
var __init = function (f) {
for (var i=0; i<parts; i++) {
var o = {};
o.p = document.createElement('span');
scr.appendChild(o.p);
var r = i/parts, j, a, b;
j = i % (parts * .5);
a = Math.floor(j)/200+(Math.floor(j/2)%10)/5* Math.PI * 2;
b = Math.acos(-0.9+(j%4)*0.6);
r = !!f?f(r):r-r*r+.5;
var sbr = Math.sin(b) * r;
o.x = Math.sin(a) * sbr;
o.y = Math.cos(a) * sbr;
o.z = Math.cos(b) * r;
obj.push(o);
o.transform = function () {
var ax = .02 * txe,
ay = .02 * tye,
cx = Math.cos(ax),
sx = Math.sin(ax),
cy = Math.cos(ay),
sy = Math.sin(ay);
//rotation
var z = this.y * sx + this.z * cx;
this.y = this.y * cx + this.z * -sx;
this.z = this.x * -sy + z * cy;
this.x = this.x * cy + z * sy;
//3d
var scale = 1 / (1 + this.z),
x = this.x * scale * nh + nw - scale * 2,
y = this.y * scale * nh + nh - scale * 2;
//set style
var p = this.p.style;
if (x >= 0 && y >=0 && x < nw * 2 && y < nh * 2) {
var c = Math.round(256 + (-this.z * 256));
p.left = Math.round(x) + 'px';
p.top = Math.round(y) + 'px';
p.width = Math.round(scale * 2) + 'px';
p.height = Math.round(scale * 2) + 'px';
p.background = 'rgb('.concat((c),',',(c),',',(1024-c),')');
p.zIndex = 200 + Math.floor(-this.z * 100);
} else p.width = "0px";
}
}
}
//run function
var run = function () {
var se = 1 / nh;
txe = (ym - axe) * se;
tye = (xm - aye) * se;
axe += txe;
aye += tye;
/* ---- anim particles ---- */
for (var i = 0, o; o = obj[i]; i++) o.transform();
}
return {init:init}
}();
var obj = [], xm = 0, ym = 0, axe = 0, aye = 0, parts = 500, scr, txe, tye, nw, nh;
var addEvent = function (o, e, f) {
window.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(e)})
}
var resize = function () {
nw = scr.offsetWidth * .5;
nh = scr.offsetHeight * .5;
}
var init = function (n, f) {
if(!!n) parts = n;
scr = document.getElementById('screen');
addEvent(document, 'mousemove', function(e){
e = e || window.event;
xm = e.clientX;
ym = e.clientY;
});
resize();
addEvent(window, 'resize', resize);
__init(f);
setInterval(run, 16);
}
var __init = function (f) {
for (var i=0; i<parts; i++) {
var o = {};
o.p = document.createElement('span');
scr.appendChild(o.p);
var r = i/parts, j, a, b;
j = i % (parts * .5);
a = Math.floor(j)/200+(Math.floor(j/2)%10)/5* Math.PI * 2;
b = Math.acos(-0.9+(j%4)*0.6);
r = !!f?f(r):r-r*r+.5;
var sbr = Math.sin(b) * r;
o.x = Math.sin(a) * sbr;
o.y = Math.cos(a) * sbr;
o.z = Math.cos(b) * r;
obj.push(o);
o.transform = function () {
var ax = .02 * txe,
ay = .02 * tye,
cx = Math.cos(ax),
sx = Math.sin(ax),
cy = Math.cos(ay),
sy = Math.sin(ay);
//rotation
var z = this.y * sx + this.z * cx;
this.y = this.y * cx + this.z * -sx;
this.z = this.x * -sy + z * cy;
this.x = this.x * cy + z * sy;
//3d
var scale = 1 / (1 + this.z),
x = this.x * scale * nh + nw - scale * 2,
y = this.y * scale * nh + nh - scale * 2;
//set style
var p = this.p.style;
if (x >= 0 && y >=0 && x < nw * 2 && y < nh * 2) {
var c = Math.round(256 + (-this.z * 256));
p.left = Math.round(x) + 'px';
p.top = Math.round(y) + 'px';
p.width = Math.round(scale * 2) + 'px';
p.height = Math.round(scale * 2) + 'px';
p.background = 'rgb('.concat((c),',',(c),',',(1024-c),')');
p.zIndex = 200 + Math.floor(-this.z * 100);
} else p.width = "0px";
}
}
}
//run function
var run = function () {
var se = 1 / nh;
txe = (ym - axe) * se;
tye = (xm - aye) * se;
axe += txe;
aye += tye;
/* ---- anim particles ---- */
for (var i = 0, o; o = obj[i]; i++) o.transform();
}
return {init:init}
}();