JavaScript模拟3D场景、三维空间的几个效果

发布时间：2018-10-04 12:10 所属栏目：25 来源：站长网

导读：这几个demo上星期平安夜做的，感觉效果不错，就放在出来，分享给大家。要在二维空间模拟出三维的效果，就需要把三维的坐标转换成二维坐标。一个最基本依据是：东西越远，看到大小就越小，坐标越往消失点靠拢。透视公式： scale = fl / (fl + z); scale

这几个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){ //属性 //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){ 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('<b>Firefox</b>') > 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>
提示：可修改后代码再运行!

（编辑：ASP站长网）