js模擬3D場(chǎng)景效果代碼打包_javascript技巧

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:01:53

js模擬3D場(chǎng)景效果代碼打包_javascript技巧

js模擬3D場(chǎng)景效果代碼打包_javascript技巧:要在二維空間模擬出三維的效果，就需要把三維的坐標(biāo)轉(zhuǎn)換成二維坐標(biāo)。一個(gè)最基本依據(jù)是：東西越遠(yuǎn)，看到大小就越小，坐標(biāo)越往消失點(diǎn)靠攏。透視公式： scale = fl / (fl + z); scale是大小的比例值，0.0到1.0之間，fl是觀察點(diǎn)到成像面的距離，通常這個(gè)值

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js模擬3D場(chǎng)景效果代碼打包_javascript技巧:要在二維空間模擬出三維的效果，就需要把三維的坐標(biāo)轉(zhuǎn)換成二維坐標(biāo)。一個(gè)最基本依據(jù)是：東西越遠(yuǎn)，看到大小就越小，坐標(biāo)越往消失點(diǎn)靠攏。透視公式： scale = fl / (fl + z); scale是大小的比例值，0.0到1.0之間，fl是觀察點(diǎn)到成像面的距離，通常這個(gè)值

要在二維空間模擬出三維的效果，就需要把三維的坐標(biāo)轉(zhuǎn)換成二維坐標(biāo)。一個(gè)最基本依據(jù)是：東西越遠(yuǎn)，看到大小就越小，坐標(biāo)越往消失點(diǎn)靠攏。
　　透視公式：
　　 scale = fl / (fl + z);
　　 scale是大小的比例值，0.0到1.0之間，fl是觀察點(diǎn)到成像面的距離，通常這個(gè)值是固定，z就是物件的三維空間中的z軸。
　　在寫這些代碼之前，我喜歡用面向?qū)ο髞砻枋鑫覍懙倪@些東西，比如我需要一個(gè)場(chǎng)景，場(chǎng)景是個(gè)空間，空間內(nèi)是可以容納各種物件的，物件是個(gè)對(duì)象，物件是是x,y,z三個(gè)維度的，場(chǎng)景可以插入任意多的物件，物件就會(huì)以它的坐標(biāo)值，顯示在場(chǎng)景的特定位置，由場(chǎng)景來負(fù)責(zé)物件的顯示位置。
　　一些demo，請(qǐng)使用鼠標(biāo)移動(dòng)及滾輪來控制。
效果1

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>偽3d透視效果</title> 
<style> 
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;} 
</style> 
</head> 
<body> 
 
 
 
<script> 
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坐標(biāo)類 
* 
*/ 
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); 
} 
}; 
/** 
* 場(chǎng)景類 
*/ 
function Scene(options){ 
//屬性 
//dom 
this.element = null; 
//場(chǎng)景距離 
this.fl = 500; 
this.wh = null; 
//基準(zhǔn)z軸 
this.baseZ = 0; 
//中心消失點(diǎn)坐標(biāo) 
this.cX = 0; 
this.cY = 0; 
//中心消失點(diǎn)便宜 
this.cXl = 0; 
this.cYl = 0; 
//偏移系數(shù) 
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)); 
}, 
//計(jì)算位置及大小 
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){ 
thing.element.style.display = 'none'; 
return ; 
}else{ 
thing.element.style.display = ''; 
} 
thing.element.style.width = thing.wh.w * scale + 'px'; 
thing.element.style.height = thing.wh.h * scale + 'px'; 
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; 
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; 
thing.element.style.zIndex = Math.round(scale*1000); 
if(thing.isOpacity){ 
thing.element.style.opacity = Math.min(scale*4.5,1); 
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; 
} 
}, 
bindEvent:function(){ 
var self = this; 
addEventListener(this.element,'mousemove',function(event){ 
self.onMouseMove(event); 
}); 
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; 
addEventListener(this.element,mousewheel,function(event){ 
self.onMouseWheel(event); 
}); 
}, 
//在場(chǎng)景內(nèi)移動(dòng)事件 
onMouseMove:function(event){ 
//場(chǎng)景的頁(yè)面坐標(biāo) 
var po = getElementOffset(this.element); 
//鼠標(biāo)光標(biāo)的頁(yè)面坐標(biāo) 
var ev = getMouseOffset(event); 
//場(chǎng)景內(nèi)坐標(biāo) 
var x = ev.x-po.left; 
var y = ev.y-po.top; 
//中間消失點(diǎn)的坐標(biāo)偏移差 
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<this.ThingList.length;i++){ 
this.calcPosition(this.ThingList[i]); 
} 
} 
}; 
/** 
* 物件抽象類 
*/ 
function Thing(options){ 
this.scene = null; 
this.wh = new WH(10,10); 
this.xyz = new XYZ(10,10,0); 
this.element = null; 
this.isOpacity = true; 
this.setOption(options); 
this.init(); 
} 
Thing.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'wh': 
case 'xyz': 
case 'isOpacity': 
this[i] = options[i]; 
break; 
default: 
break; 
} 
} 
}, 
init:function(){ 
this.element = this.draw(); 
this.element.style.position = 'absolute'; 
this.element.style.width = this.wh.w + 'px'; 
this.element.style.height = this.wh.h + 'px'; 
}, 
draw:function(){ 
throw new Error(998,'method do not realize!'); 
}, 
getElement:function(/*Scene*/ scene){ 
this.scene = scene; 
return this.element; 
} 
}; 
function Diam(options){ 
this.$supClass(options); 
} 
Diam.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
loadimg = img.cloneNode(true); 
loadimg.onload = function(){ 
self.wh = new WH(this.width,this.height); 
} 
img.src = [ 
'/upload/201201/20120105103758227.jpg', 
'/upload/201201/20120105103801969.jpg', 
'/upload/201201/20120105103801207.jpg', 
'/upload/201201/20120105103801956.jpg', 
'/upload/201201/20120105103801732.jpg', 
'/upload/201201/20120105103801346.jpg', 
'/upload/201201/20120105103801362.jpg' 
][Math.round(Math.random()*6)]; 
return img; 
} 
}; 
extend(Diam,Thing); 
function Sky(options){ 
this.$supClass(options); 
} 
Sky.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
img.src = [ 
'/upload/201201/20120105103801314.jpg', 
'/upload/201201/20120105103803325.jpg', 
'/upload/201201/20120105103803314.jpg', 
'/upload/201201/20120105103803146.jpg' 
][Math.round(Math.random()*3)]; 
return img; 
} 
}; 
extend(Sky,Thing); 
var scene = new Scene({ 
'element':'box' 
}); 
for(var i= 0 ; i < 50 ;i++){ 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(Math.random() * document.body.clientWidth,Math.random() *document.body.clientHeight,Math.random() *8000) 
})); 
} 
scene.addThing(new Sky({ 
wh:new WH(160000,120000), 
xyz:new XYZ(-80000,-60000,54000), 
isOpacity:false 
})); 
}(window); 
</ script></body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
效果2

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>偽3d透視效果</title> 
<style> 
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;} 
</style> 
</head> 
<body> 
 
 
 
<script> 
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坐標(biāo)類 
* 
*/ 
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); 
} 
}; 
/** 
* 場(chǎng)景類 
*/ 
function Scene(options){ 
//屬性 
//dom 
this.element = null; 
//場(chǎng)景距離 
this.fl = 500; 
this.wh = null; 
//基準(zhǔn)z軸 
this.baseZ = 0; 
//中心消失點(diǎn)坐標(biāo) 
this.cX = 0; 
this.cY = 0; 
//中心消失點(diǎn)便宜 
this.cXl = 0; 
this.cYl = 0; 
//偏移系數(shù) 
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)); 
}, 
//計(jì)算位置及大小 
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){ 
thing.element.style.display = 'none'; 
return ; 
}else{ 
thing.element.style.display = ''; 
} 
thing.element.style.width = thing.wh.w * scale + 'px'; 
thing.element.style.height = thing.wh.h * scale + 'px'; 
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; 
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; 
thing.element.style.zIndex = Math.round(scale*1000); 
if(thing.isOpacity){ 
thing.element.style.opacity = Math.min(scale*4.5,1); 
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; 
} 
}, 
bindEvent:function(){ 
var self = this; 
addEventListener(this.element,'mousemove',function(event){ 
self.onMouseMove(event); 
}); 
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; 
addEventListener(this.element,mousewheel,function(event){ 
self.onMouseWheel(event); 
}); 
}, 
//在場(chǎng)景內(nèi)移動(dòng)事件 
onMouseMove:function(event){ 
//場(chǎng)景的頁(yè)面坐標(biāo) 
var po = getElementOffset(this.element); 
//鼠標(biāo)光標(biāo)的頁(yè)面坐標(biāo) 
var ev = getMouseOffset(event); 
//場(chǎng)景內(nèi)坐標(biāo) 
var x = ev.x-po.left; 
var y = ev.y-po.top; 
//中間消失點(diǎn)的坐標(biāo)偏移差 
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<this.ThingList.length;i++){ 
this.calcPosition(this.ThingList[i]); 
} 
} 
}; 
/** 
* 物件抽象類 
*/ 
function Thing(options){ 
this.scene = null; 
this.wh = new WH(10,10); 
this.xyz = new XYZ(10,10,0); 
this.element = null; 
this.isOpacity = true; 
this.setOption(options); 
this.init(); 
} 
Thing.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'wh': 
case 'xyz': 
case 'isOpacity': 
this[i] = options[i]; 
break; 
default: 
break; 
} 
} 
}, 
init:function(){ 
this.element = this.draw(); 
this.element.style.position = 'absolute'; 
this.element.style.width = this.wh.w + 'px'; 
this.element.style.height = this.wh.h + 'px'; 
}, 
draw:function(){ 
throw new Error(998,'method do not realize!'); 
}, 
getElement:function(/*Scene*/ scene){ 
this.scene = scene; 
return this.element; 
} 
}; 
function Diam(options){ 
this.$supClass(options); 
} 
Diam.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
loadimg = img.cloneNode(true); 
loadimg.onload = function(){ 
self.wh = new WH(this.width,this.height); 
} 
img.src = [ 
'/upload/201201/20120105103758227.jpg', 
'/upload/201201/20120105103801969.jpg', 
'/upload/201201/20120105103801207.jpg', 
'/upload/201201/20120105103801956.jpg', 
'/upload/201201/20120105103801732.jpg', 
'/upload/201201/20120105103801346.jpg', 
'/upload/201201/20120105103801362.jpg' 
][Math.round(Math.random()*6)]; 
return img; 
} 
}; 
extend(Diam,Thing); 
function Sky(options){ 
this.$supClass(options); 
} 
Sky.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
img.src = [ 
'/upload/201201/20120105103801314.jpg', 
'/upload/201201/20120105103803325.jpg', 
'/upload/201201/20120105103803314.jpg', 
'/upload/201201/20120105103803146.jpg' 
][Math.round(Math.random()*3)]; 
return img; 
} 
}; 
extend(Sky,Thing); 
var scene = new Scene({ 
'element':'box' 
}); 
for(var i= 0,x,z ; i < 50 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i= 0,x,z ; i < 50 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
z = (Math.cos(Math.PI*2*(i/50)) * 1000)+3000; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,document.body.clientHeight/2+200,z) 
})); 
} 
scene.addThing(new Sky({ 
wh:new WH(160000,120000), 
xyz:new XYZ(-80000,-60000,54000), 
isOpacity:false 
})); 
}(window); 
</ script> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
效果3

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>偽3d透視效果</title> 
<style> 
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;} 
</style> 
</head> 
<body> 
 
 
 
<script> 
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坐標(biāo)類 
* 
*/ 
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); 
} 
}; 
/** 
* 場(chǎng)景類 
*/ 
function Scene(options){ 
//屬性 
//dom 
this.element = null; 
//場(chǎng)景距離 
this.fl = 500; 
this.wh = null; 
//基準(zhǔn)z軸 
this.baseZ = 0; 
//中心消失點(diǎn)坐標(biāo) 
this.cX = 0; 
this.cY = 0; 
//中心消失點(diǎn)便宜 
this.cXl = 0; 
this.cYl = 0; 
//偏移系數(shù) 
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)); 
}, 
//計(jì)算位置及大小 
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){ 
thing.element.style.display = 'none'; 
return ; 
}else{ 
thing.element.style.display = ''; 
} 
thing.element.style.width = thing.wh.w * scale + 'px'; 
thing.element.style.height = thing.wh.h * scale + 'px'; 
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; 
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; 
thing.element.style.zIndex = Math.round(scale*1000); 
thing.element.style.opacity = Math.min(scale*4.5,1); 
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; 
}, 
bindEvent:function(){ 
var self = this; 
addEventListener(this.element,'mousemove',function(event){ 
self.onMouseMove(event); 
}); 
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; 
addEventListener(this.element,mousewheel,function(event){ 
self.onMouseWheel(event); 
}); 
setInterval(function(){ 
self.onEnterFrame(); 
},40); 
}, 
//在場(chǎng)景內(nèi)移動(dòng)事件 
onMouseMove:function(event){ 
//場(chǎng)景的頁(yè)面坐標(biāo) 
var po = getElementOffset(this.element); 
//鼠標(biāo)光標(biāo)的頁(yè)面坐標(biāo) 
var ev = getMouseOffset(event); 
//場(chǎng)景內(nèi)坐標(biāo) 
var x = ev.x-po.left; 
var y = ev.y-po.top; 
//中間消失點(diǎn)的坐標(biāo)偏移差 
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; i<this.ThingList.length;i++){ 
thing = this.ThingList[i]; 
if(thing.isstatic) continue; 
if(thing.xyz.y+1 >this.wh.h){ 
thing.xyz.y = 0; 
}else{ 
thing.xyz.y += 20; 
} 
this.calcPosition(thing); 
} 
}, 
reDraw:function(){ 
for(var i=0 ; i<this.ThingList.length;i++){ 
this.calcPosition(this.ThingList[i]); 
} 
} 
}; 
/** 
* 物件抽象類 
*/ 
function Thing(options){ 
this.scene = null; 
this.wh = null; 
this.xyz = new XYZ(10,10,0); 
this.element = null; 
this.isstatic = false; 
this.setOption(options); 
this.init(); 
} 
Thing.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'wh': 
case 'xyz': 
case 'isstatic': 
this[i] = options[i]; 
break; 
default: 
break; 
} 
} 
}, 
init:function(){ 
this.element = this.draw(); 
this.element.style.position = 'absolute'; 
this.element.style.width = this.wh.w + 'px'; 
this.element.style.height = this.wh.h + 'px'; 
}, 
draw:function(){ 
throw new Error(998,'method do not realize!'); 
}, 
getElement:function(/*Scene*/ scene){ 
this.scene = scene; 
return this.element; 
} 
}; 
function Snowflake(options){ 
this.$supClass(options); 
} 
Snowflake.prototype = { 
draw:function(){ 
var img = document.createElement('img'),self = this; 
loadimg = img.cloneNode(true); 
loadimg.onload = function(){ 
//self.wh = new WH(this.width,this.height); 
} 
img.src = loadimg.src = [ 
'/upload/201201/20120105103804884.gif', 
'/upload/201201/20120105103804792.gif', 
'/upload/201201/20120105103804222.gif', 
'/upload/201201/20120105103804213.gif', 
'/upload/201201/20120105103804180.gif', 
'/upload/201201/20120105103804588.gif' 
][Math.round(Math.random()*5)]; 
return img; 
} 
}; 
extend(Snowflake,Thing); 
var scene = new Scene({ 
'element':'box' 
}); 
function tree(options){ 
this.$supClass(options); 
} 
tree.prototype = { 
draw:function(){ 
var img = document.createElement('img'),self = this; 
img.src = '/upload/201201/20120105103804497.gif'; 
return img; 
} 
}; 
extend(tree,Thing); 
for(var i= 0,x,z ; i < 100 ;i++){ 
scene.addThing(new Snowflake({ 
wh:new WH(50,50), 
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth),Math.round(Math.random()*document.body.clientHeight),Math.round(Math.random()*6000-1000)) 
})); 
} 
for(var i= 0,x,z ; i < 80 ;i++){ 
scene.addThing(new tree({ 
wh:new WH(500,800), 
isstatic:true, 
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth),Math.round(document.body.clientHeight),Math.round(Math.random()*6000-1000)) 
})); 
} 
for(var i= 0,x,z ; i < 80 ;i++){ 
scene.addThing(new tree({ 
wh:new WH(500,800), 
isstatic:true, 
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth*20),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+3000)) 
})); 
} 
for(var i= 0,x,z ; i < 80 ;i++){ 
scene.addThing(new tree({ 
wh:new WH(500,800), 
isstatic:true, 
xyz:new XYZ(Math.round(Math.random()*-document.body.clientWidth*20),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+3000)) 
})); 
} 
for(var i= 0,x,z ; i < 80 ;i++){ 
scene.addThing(new tree({ 
wh:new WH(500,800), 
isstatic:true, 
xyz:new XYZ(Math.round(Math.random()*-document.body.clientWidth*10),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+1000)) 
})); 
} 
}(window); 
</ script> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
效果4

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>偽3d透視效果</title> 
<style> 
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;} 
</style> 
</head> 
<body> 
 
 
 
<script> 
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坐標(biāo)類 
* 
*/ 
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); 
} 
}; 
/** 
* 場(chǎng)景類 
*/ 
function Scene(options){ 
//屬性 
//dom 
this.element = null; 
//場(chǎng)景距離 
this.fl = 500; 
this.wh = null; 
//基準(zhǔn)z軸 
this.baseZ = 0; 
//中心消失點(diǎn)坐標(biāo) 
this.cX = 0; 
this.cY = 0; 
//中心消失點(diǎn)便宜 
this.cXl = 0; 
this.cYl = 0; 
//偏移系數(shù) 
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)); 
}, 
//計(jì)算位置及大小 
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){ 
thing.element.style.display = 'none'; 
return ; 
}else{ 
thing.element.style.display = ''; 
} 
thing.element.style.width = thing.wh.w * scale + 'px'; 
thing.element.style.height = thing.wh.h * scale + 'px'; 
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px'; 
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px'; 
thing.element.style.zIndex = Math.round(scale*1000); 
if(thing.isOpacity){ 
thing.element.style.opacity = Math.min(scale*4.5,1); 
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')'; 
} 
}, 
bindEvent:function(){ 
var self = this; 
addEventListener(this.element,'mousemove',function(event){ 
self.onMouseMove(event); 
}); 
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel'; 
addEventListener(this.element,mousewheel,function(event){ 
self.onMouseWheel(event); 
}); 
}, 
//在場(chǎng)景內(nèi)移動(dòng)事件 
onMouseMove:function(event){ 
//場(chǎng)景的頁(yè)面坐標(biāo) 
var po = getElementOffset(this.element); 
//鼠標(biāo)光標(biāo)的頁(yè)面坐標(biāo) 
var ev = getMouseOffset(event); 
//場(chǎng)景內(nèi)坐標(biāo) 
var x = ev.x-po.left; 
var y = ev.y-po.top; 
//中間消失點(diǎn)的坐標(biāo)偏移差 
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<this.ThingList.length;i++){ 
this.calcPosition(this.ThingList[i]); 
} 
} 
}; 
/** 
* 物件抽象類 
*/ 
function Thing(options){ 
this.scene = null; 
this.wh = new WH(10,10); 
this.xyz = new XYZ(10,10,0); 
this.element = null; 
this.isstats = false; 
this.isOpacity = true; 
this.setOption(options); 
this.init(); 
} 
Thing.prototype = { 
setOption:function(options){ 
for(var i in options){ 
switch(i){ 
case 'wh': 
case 'xyz': 
case 'isOpacity': 
this[i] = options[i]; 
break; 
default: 
break; 
} 
} 
}, 
init:function(){ 
this.element = this.draw(); 
this.element.style.position = 'absolute'; 
this.element.style.width = this.wh.w + 'px'; 
this.element.style.height = this.wh.h + 'px'; 
}, 
draw:function(){ 
throw new Error(998,'method do not realize!'); 
}, 
getElement:function(/*Scene*/ scene){ 
this.scene = scene; 
return this.element; 
} 
}; 
function Diam(options){ 
this.$supClass(options); 
} 
Diam.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
loadimg = img.cloneNode(true); 
loadimg.onload = function(){ 
self.wh = new WH(this.width,this.height); 
} 
img.src = [ 
'/upload/201201/20120105103758227.jpg', 
'/upload/201201/20120105103801969.jpg', 
'/upload/201201/20120105103801207.jpg', 
'/upload/201201/20120105103801956.jpg', 
'/upload/201201/20120105103801732.jpg', 
'/upload/201201/20120105103801346.jpg', 
'/upload/201201/20120105103801362.jpg' 
][Math.round(Math.random()*6)]; 
return img; 
} 
}; 
extend(Diam,Thing); 
function Sky(options){ 
this.$supClass(options); 
} 
Sky.prototype = { 
draw:function(){ 
var img = document.createElement('img'); 
img.src = [ 
'/upload/201201/20120105103801314.jpg', 
'/upload/201201/20120105103803325.jpg', 
'/upload/201201/20120105103803314.jpg', 
'/upload/201201/20120105103803146.jpg' 
][Math.round(Math.random()*3)]; 
return img; 
} 
}; 
extend(Sky,Thing); 
var scene = new Scene({ 
'element':'box' 
}); 
for(var i= 20,x,z ; i < 40 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i=11,x,z ; i < 31 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+1680; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i=9,x,z ; i < 40 ;i++){ 
x = i*50 -890; 
y = i*60 + 200; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i=9,x,z ; i < 40 ;i++){ 
x = i*-50 +3090; 
y = i*60 + 200; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,3000) 
})); 
} 
for(var i= 20,x,z ; i < 40 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,5000) 
})); 
} 
for(var i=11,x,z ; i < 31 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+1680; 
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,5000) 
})); 
} 
for(var i=9,x,z ; i < 40 ;i++){ 
x = i*50 -890; 
y = i*60 + 200; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,5000) 
})); 
} 
for(var i=9,x,z ; i < 40 ;i++){ 
x = i*-50 +3090; 
y = i*60 + 200; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,y,5000) 
})); 
} 
scene.addThing(new Sky({ 
wh:new WH(160000,120000), 
xyz:new XYZ(-80000,-60000,54000), 
isOpacity:false 
})); 
/* 
for(var i= 0,x,z ; i < 50 ;i++){ 
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500; 
z = (Math.cos(Math.PI*2*(i/50)) * 1000)+3000; 
scene.addThing(new Diam({ 
wh:new WH(100,100), 
xyz:new XYZ(x,document.body.clientHeight/2+200,z) 
})); 
}*/ 
}(window); 
</ script></body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js模擬3D場(chǎng)景效果代碼打包_javascript技巧

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： js 代碼封裝

熱門焦點(diǎn)

js模擬3D場(chǎng)景效果代碼打包_javascript技巧

js模擬3D場(chǎng)景效果代碼打包_javascript技巧

js模擬3D場(chǎng)景效果代碼打包_javascript技巧

最新推薦

猜你喜歡

熱門推薦