您當前位置：首頁 > web前端 > jscript > JavaScript模擬3D場景、三維空間的幾個效果

JavaScript模擬3D場景、三維空間的幾個效果

來源：程序員人生發布時間：2014-05-05 16:39:09 閱讀次數：4140次

這幾個demo上星期平安夜做的，感覺效果不錯，就放在出來，分享給大家。

要在二維空間模擬出三維的效果，就需要把三維的坐標轉換成二維坐標。一個最基本依據是：東西越遠，看到大小就越小，坐標越往消失點靠攏。

透視公式：

scale = fl / (fl + z);

scale是大小的比例值，0.0到1.0之間，fl是觀察點到成像面的距離，通常這個值是固定，z就是物件的三維空間中的z軸。

在寫這些代碼之前，我喜歡用面向對象來描述我寫的這些東西，比如我需要一個場景，場景是個空間，空間內是可以容納各種物件的，物件是個對象，物件是是x,y,z三個維度的，場景可以插入任意多的物件，物件就會以它的坐標值，顯示在場景的特定位置，由場景來負責物件的顯示位置。

一些demo，請使用鼠標移動及滾輪來控制。

效果1：

<!doctype html><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;}#VeryHuo{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}</style></head><body><div id="box"></div><div id="VeryHuo"></div><script>void function(window){var document = window.document;var VeryHuo = document.getElementById('VeryHuo');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){//屬性//domthis.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){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);});},//在場景內移動事件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<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 = ['/uploads/allimg/1112/p16i7nbc3s3bt1dt3naj1p3r1u2e7.jpg','/uploads/allimg/1112/p16i7nbc3sverp2e1j9l8rddbv6.jpg','/uploads/allimg/1112/p16i7nbc3sr3a15f2hd6trl1v632.jpg','/uploads/allimg/1112/p16i7nbc3s4e02mb3j01susuve5.jpg','/uploads/allimg/1112/p16i7nbc3sq8lo6puh5su1m4d4.jpg','/uploads/allimg/1112/p16i7nbc3s15nd1nrf1r8018un7jv3.jpg','/uploads/allimg/1112/p16i7nbc3r2frhoe13gr1k6c11tp1.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 = ['/uploads/allimg/1112/p16i7ncbsv12991dii1fjbif4esn4.jpg','/uploads/allimg/1112/p16i7ncbsv1652hgn13us1ob410423.jpg','/uploads/allimg/1112/p16i7ncbsv15i55d0meuru3obr2.jpg','/uploads/allimg/1112/p16i7ncbsvq3o143n1gdamcn13i21.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>
提示：可修改后代碼再運行!

效果2：

<!doctype html><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;}#VeryHuo{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}</style></head><body><div id="box"></div><div id="VeryHuo"></div><script>void function(window){var document = window.document;var VeryHuo = document.getElementById('VeryHuo');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){//屬性//domthis.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){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);});},//在場景內移動事件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<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 = ['/uploads/allimg/1112/p16i7nbc3s3bt1dt3naj1p3r1u2e7.jpg','/uploads/allimg/1112/p16i7nbc3sverp2e1j9l8rddbv6.jpg','/uploads/allimg/1112/p16i7nbc3sr3a15f2hd6trl1v632.jpg','/uploads/allimg/1112/p16i7nbc3s4e02mb3j01susuve5.jpg','/uploads/allimg/1112/p16i7nbc3sq8lo6puh5su1m4d4.jpg','/uploads/allimg/1112/p16i7nbc3s15nd1nrf1r8018un7jv3.jpg','/uploads/allimg/1112/p16i7nbc3r2frhoe13gr1k6c11tp1.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 = ['/uploads/allimg/1112/p16i7ncbsv12991dii1fjbif4esn4.jpg','/uploads/allimg/1112/p16i7ncbsv1652hgn13us1ob410423.jpg','/uploads/allimg/1112/p16i7ncbsv15i55d0meuru3obr2.jpg','/uploads/allimg/1112/p16i7ncbsvq3o143n1gdamcn13i21.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>
提示：可修改后代碼再運行!

效果3：

<!doctype html><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;}#VeryHuo{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}</style></head><body><div id="box"></div><div id="VeryHuo"></div><script>void function(window){/*** by Od 2011/12/25*/var document = window.document;var VeryHuo = document.getElementById('VeryHuo');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){//屬性//domthis.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){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);},//在場景內移動事件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; 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 = ['/uploads/allimg/1112/p16i7nf1high41bbodrb18aboor8.gif','/uploads/allimg/1112/p16i7nf1hiaeu6am10m7192a4pj7.gif','/uploads/allimg/1112/p16i7nf1hi1te5gdb12p0mhp12lc6.gif','/uploads/allimg/1112/p16i7nf1hi1fa51km41ofeh1219p25.gif','/uploads/allimg/1112/p16i7nf1hiugi18uj1g5t1la4bd84.gif','/uploads/allimg/1112/p16i7nf1hi13fb1mjstfgo11pel3.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 = '/uploads/allimg/1112/p16i7nf1hijv3rtcqab1mbjr0g9.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>
提示：可修改后代碼再運行!

效果4：

<!doctype html><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;}#VeryHuo{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}</style></head><body><div id="box"></div><div id="VeryHuo"></div><script>void function(window){var document = window.document;var VeryHuo = document.getElementById('VeryHuo');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){//屬性//domthis.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){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);});},//在場景內移動事件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<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 = ['/uploads/allimg/1112/p16i7nbc3s3bt1dt3naj1p3r1u2e7.jpg','/uploads/allimg/1112/p16i7nbc3sverp2e1j9l8rddbv6.jpg','/uploads/allimg/1112/p16i7nbc3sr3a15f2hd6trl1v632.jpg','/uploads/allimg/1112/p16i7nbc3s4e02mb3j01susuve5.jpg','/uploads/allimg/1112/p16i7nbc3sq8lo6puh5su1m4d4.jpg','/uploads/allimg/1112/p16i7nbc3s15nd1nrf1r8018un7jv3.jpg','/uploads/allimg/1112/p16i7nbc3r2frhoe13gr1k6c11tp1.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 = ['/uploads/allimg/1112/p16i7ncbsv12991dii1fjbif4esn4.jpg','/uploads/allimg/1112/p16i7ncbsv1652hgn13us1ob410423.jpg','/uploads/allimg/1112/p16i7ncbsv15i55d0meuru3obr2.jpg','/uploads/allimg/1112/p16i7ncbsvq3o143n1gdamcn13i21.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>
提示：可修改后代碼再運行!

本文來源：博客園　作者：OD BLOG

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 jQuery學習――入門篇（附實例代碼）

下一篇 談談新手該如何做點擊網賺

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

JavaScript模擬3D場景、三維空間的幾個效果