js模拟3D场景效果

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 277 次

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

　　这几个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;}  #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;}  </style>  </head>  <body>  <div id="box">  </div>  <div id="debug"></div>    <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坐标类                     *                      */                    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('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</body>  </html>

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。