js模拟3D场景效果代码打包

要在二维空间模拟出三维的效果，就需要把三维的坐标转换成二维坐标。一个最基本依据是：东西越远，看到大小就越小，坐标越往消失点靠拢。
　　透视公式：
　　 scale = fl / (fl + z);
　　 scale是大小的比例值，0.0到1.0之间，fl是观察点到成像面的距离，通常这个值是固定，z就是物件的三维空间中的z轴。
　　在写这些代码之前，我喜欢用面向对象来描述我写的这些东西，比如我需要一个场景，场景是个空间，空间内是可以容纳各种物件的，物件是个对象，物件是是x,y,z三个维度的，场景可以插入任意多的物件，物件就会以它的坐标值，显示在场景的特定位置，由场景来负责物件的显示位置。
　　一些demo，请使用鼠标移动及滚轮来控制。
效果1

伪3d透视效果

html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;}
#box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;}
#debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}

void function(window){
var document = window.document;
var debug = document.getElementById('debug');
function ObjtoStr(obj){
var arr = [];
for(var i in obj){
if(isNaN(obj[i])) continue;
arr.push(i + ':' + obj[i]);
}
return arr.join('; ');
}
function getElementOffset(element){
var left = 0, top = 0;
do{
left += element.offsetLeft;
top += element.offsetTop;
}while(element = element.offsetParent);
return {
left:left,
top:top
};
}
function getMouseOffset(event){
return {
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft),
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop)
};
}
function addEventListener(element,type,fun){
if(element.addEventListener){
element.addEventListener(type,function(event){
fun(event);
},false);
}else{
element.attachEvent('on'+type,function(){
fun(window.event);
});
}
}
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
/**
* WH类，高宽
*/
function WH(w,h){
this.w = w;
this.h = h;
}
WH.prototype = {
clone:function(){
return new WH(this.w,this.h);
}
};
/**
* xyz坐标类
*
*/
function XYZ(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
XYZ.prototype = {
clone:function(){
return new XYZ(this.x,this.y,this.z);
}
};
/**
* 场景类
*/
function Scene(options){
//属性
//dom
this.element = null;
//场景距离
this.fl = 500;
this.wh = null;
//基准z轴
this.baseZ = 0;
//中心消失点坐标
this.cX = 0;
this.cY = 0;
//中心消失点便宜
this.cXl = 0;
this.cYl = 0;
//偏移系数
this.ce = 1;
this.ThingList = [];
this.setOption(options);
this.init();
}
Scene.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'element':
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i];
break;
}
}
},
init:function(){
if(!this.element) throw new Error(90,'not box');
this.wh = new WH(this.element.clientWidth,this.element.clientHeight);
this.bindEvent();
},
addThing:function(/* Thing */ thing){
this.ThingList.push(thing);
this.calcPosition(thing);
this.element.appendChild(thing.getElement(this));
},
//计算位置及大小
calcPosition:function(/*Thing*/ thing){
this.cX = this.element.clientWidth/2;
this.cY = this.element.clientHeight/2;
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ);
if(scale 0 ? 'DOMMouseScroll' : 'mousewheel';
addEventListener(this.element,mousewheel,function(event){
self.onMouseWheel(event);
});
},
//在场景内移动事件
onMouseMove:function(event){
//场景的页面坐标
var po = getElementOffset(this.element);
//鼠标光标的页面坐标
var ev = getMouseOffset(event);
//场景内坐标
var x = ev.x-po.left;
var y = ev.y-po.top;
//中间消失点的坐标偏移差
this.cXl = (this.element.clientWidth/2 - x) * this.ce;
this.cYl = (this.element.clientHeight/2 - y) * this.ce;
this.reDraw();
},
onMouseWheel:function(event){
var code = event.wheelDelta || -event.detail;
if(code > 0){
this.baseZ -= 200;
}else{
this.baseZ += 200;
}
this.reDraw();
},
reDraw:function(){
for(var i=0 ; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

效果2

伪3d透视效果

html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;}
#box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;}
#debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}

void function(window){
var document = window.document;
var debug = document.getElementById('debug');
function ObjtoStr(obj){
var arr = [];
for(var i in obj){
if(isNaN(obj[i])) continue;
arr.push(i + ':' + obj[i]);
}
return arr.join('; ');
}
function getElementOffset(element){
var left = 0, top = 0;
do{
left += element.offsetLeft;
top += element.offsetTop;
}while(element = element.offsetParent);
return {
left:left,
top:top
};
}
function getMouseOffset(event){
return {
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft),
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop)
};
}
function addEventListener(element,type,fun){
if(element.addEventListener){
element.addEventListener(type,function(event){
fun(event);
},false);
}else{
element.attachEvent('on'+type,function(){
fun(window.event);
});
}
}
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
/**
* WH类，高宽
*/
function WH(w,h){
this.w = w;
this.h = h;
}
WH.prototype = {
clone:function(){
return new WH(this.w,this.h);
}
};
/**
* xyz坐标类
*
*/
function XYZ(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
XYZ.prototype = {
clone:function(){
return new XYZ(this.x,this.y,this.z);
}
};
/**
* 场景类
*/
function Scene(options){
//属性
//dom
this.element = null;
//场景距离
this.fl = 500;
this.wh = null;
//基准z轴
this.baseZ = 0;
//中心消失点坐标
this.cX = 0;
this.cY = 0;
//中心消失点便宜
this.cXl = 0;
this.cYl = 0;
//偏移系数
this.ce = 5;
this.ThingList = [];
this.setOption(options);
this.init();
}
Scene.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'element':
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i];
break;
}
}
},
init:function(){
if(!this.element) throw new Error(90,'not box');
this.wh = new WH(this.element.clientWidth,this.element.clientHeight);
this.bindEvent();
},
addThing:function(/* Thing */ thing){
this.ThingList.push(thing);
this.calcPosition(thing);
this.element.appendChild(thing.getElement(this));
},
//计算位置及大小
calcPosition:function(/*Thing*/ thing){
this.cX = this.element.clientWidth/2;
this.cY = this.element.clientHeight/2;
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ);
if(scale 0 ? 'DOMMouseScroll' : 'mousewheel';
addEventListener(this.element,mousewheel,function(event){
self.onMouseWheel(event);
});
},
//在场景内移动事件
onMouseMove:function(event){
//场景的页面坐标
var po = getElementOffset(this.element);
//鼠标光标的页面坐标
var ev = getMouseOffset(event);
//场景内坐标
var x = ev.x-po.left;
var y = ev.y-po.top;
//中间消失点的坐标偏移差
this.cXl = (this.element.clientWidth/2 - x) * this.ce;
this.cYl = (this.element.clientHeight/2 - y) * this.ce;
this.reDraw();
},
onMouseWheel:function(event){
var code = event.wheelDelta || -event.detail;
if(code > 0){
this.baseZ -= 200;
}else{
this.baseZ += 200;
}
this.reDraw();
},
reDraw:function(){
for(var i=0 ; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

效果3

伪3d透视效果

html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;}
#box{ background:#fff; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;}
#debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}

void function(window){
/**
* by Od 2011/12/25
*/
var document = window.document;
var debug = document.getElementById('debug');
function ObjtoStr(obj){
var arr = [];
for(var i in obj){
if(isNaN(obj[i])) continue;
arr.push(i + ':' + obj[i]);
}
return arr.join('; ');
}
function getElementOffset(element){
var left = 0, top = 0;
do{
left += element.offsetLeft;
top += element.offsetTop;
}while(element = element.offsetParent);
return {
left:left,
top:top
};
}
function getMouseOffset(event){
return {
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft),
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop)
};
}
function addEventListener(element,type,fun){
if(element.addEventListener){
element.addEventListener(type,function(event){
fun(event);
},false);
}else{
element.attachEvent('on'+type,function(){
fun(window.event);
});
}
}
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
/**
* WH类，高宽
*/
function WH(w,h){
this.w = w;
this.h = h;
}
WH.prototype = {
clone:function(){
return new WH(this.w,this.h);
}
};
/**
* xyz坐标类
*
*/
function XYZ(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
XYZ.prototype = {
clone:function(){
return new XYZ(this.x,this.y,this.z);
}
};
/**
* 场景类
*/
function Scene(options){
//属性
//dom
this.element = null;
//场景距离
this.fl = 500;
this.wh = null;
//基准z轴
this.baseZ = 0;
//中心消失点坐标
this.cX = 0;
this.cY = 0;
//中心消失点便宜
this.cXl = 0;
this.cYl = 0;
//偏移系数
this.ce = 1;
this.ThingList = [];
this.setOption(options);
this.init();
}
Scene.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'element':
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i];
break;
}
}
},
init:function(){
if(!this.element) throw new Error(90,'not box');
this.wh = new WH(this.element.clientWidth,this.element.clientHeight);
this.bindEvent();
},
addThing:function(/* Thing */ thing){
this.ThingList.push(thing);
this.calcPosition(thing);
this.element.appendChild(thing.getElement(this));
},
//计算位置及大小
calcPosition:function(/*Thing*/ thing){
this.cX = this.element.clientWidth/2;
this.cY = this.element.clientHeight/2;
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ);
if(scale 0 ? 'DOMMouseScroll' : 'mousewheel';
addEventListener(this.element,mousewheel,function(event){
self.onMouseWheel(event);
});
setInterval(function(){
self.onEnterFrame();
},40);
},
//在场景内移动事件
onMouseMove:function(event){
//场景的页面坐标
var po = getElementOffset(this.element);
//鼠标光标的页面坐标
var ev = getMouseOffset(event);
//场景内坐标
var x = ev.x-po.left;
var y = ev.y-po.top;
//中间消失点的坐标偏移差
this.cXl = (this.element.clientWidth/2 - x) * this.ce;
this.cYl = (this.element.clientHeight/2 - y) * this.ce;
this.reDraw();
},
onMouseWheel:function(event){
var code = event.wheelDelta || -event.detail;
if(code > 0){
this.baseZ -= 200;
}else{
this.baseZ += 200;
}
this.reDraw();
},
onEnterFrame:function(){
var thing;
for(var i=0; ithis.wh.h){
thing.xyz.y = 0;
}else{
thing.xyz.y += 20;
}
this.calcPosition(thing);
}
},
reDraw:function(){
for(var i=0 ; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

效果4

伪3d透视效果

html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;}
#box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;}
#debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}

void function(window){
var document = window.document;
var debug = document.getElementById('debug');
function ObjtoStr(obj){
var arr = [];
for(var i in obj){
if(isNaN(obj[i])) continue;
arr.push(i + ':' + obj[i]);
}
return arr.join('; ');
}
function getElementOffset(element){
var left = 0, top = 0;
do{
left += element.offsetLeft;
top += element.offsetTop;
}while(element = element.offsetParent);
return {
left:left,
top:top
};
}
function getMouseOffset(event){
return {
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft),
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop)
};
}
function addEventListener(element,type,fun){
if(element.addEventListener){
element.addEventListener(type,function(event){
fun(event);
},false);
}else{
element.attachEvent('on'+type,function(){
fun(window.event);
});
}
}
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
/**
* WH类，高宽
*/
function WH(w,h){
this.w = w;
this.h = h;
}
WH.prototype = {
clone:function(){
return new WH(this.w,this.h);
}
};
/**
* xyz坐标类
*
*/
function XYZ(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
XYZ.prototype = {
clone:function(){
return new XYZ(this.x,this.y,this.z);
}
};
/**
* 场景类
*/
function Scene(options){
//属性
//dom
this.element = null;
//场景距离
this.fl = 500;
this.wh = null;
//基准z轴
this.baseZ = 0;
//中心消失点坐标
this.cX = 0;
this.cY = 0;
//中心消失点便宜
this.cXl = 0;
this.cYl = 0;
//偏移系数
this.ce = 9;
this.ThingList = [];
this.setOption(options);
this.init();
}
Scene.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'element':
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i];
break;
}
}
},
init:function(){
if(!this.element) throw new Error(90,'not box');
this.wh = new WH(this.element.clientWidth,this.element.clientHeight);
this.bindEvent();
},
addThing:function(/* Thing */ thing){
this.ThingList.push(thing);
this.calcPosition(thing);
this.element.appendChild(thing.getElement(this));
},
//计算位置及大小
calcPosition:function(/*Thing*/ thing){
this.cX = this.element.clientWidth/2;
this.cY = this.element.clientHeight/2;
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ);
if(scale 0 ? 'DOMMouseScroll' : 'mousewheel';
addEventListener(this.element,mousewheel,function(event){
self.onMouseWheel(event);
});
},
//在场景内移动事件
onMouseMove:function(event){
//场景的页面坐标
var po = getElementOffset(this.element);
//鼠标光标的页面坐标
var ev = getMouseOffset(event);
//场景内坐标
var x = ev.x-po.left;
var y = ev.y-po.top;
//中间消失点的坐标偏移差
this.cXl = (this.element.clientWidth/2 - x) * this.ce;
this.cYl = (this.element.clientHeight/2 - y) * this.ce;
this.reDraw();
},
onMouseWheel:function(event){
var code = event.wheelDelta || -event.detail;
if(code > 0){
this.baseZ -= 200;
}else{
this.baseZ += 200;
}
this.reDraw();
},
reDraw:function(){
for(var i=0 ; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]