css3d.min.js

/*!
 * GIT: https://github.com/shrekshrek/css3d-engine
 **/

!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.C3D=i()}(this,function(){"use strict";function t(t){return Math.round(t)}function i(t){return Math.round(100*t)/100}function e(t){return t.replace(/\b(\w)|\s(\w)/g,function(t){return t.toUpperCase()})}function s(t){var i;switch(t.type){case"sprite":i=new n.Sprite(t.el?{el:t.el}:void 0);break;case"plane":i=new n.Plane(t.el?{el:t.el}:void 0);break;case"box":i=new n.Box(t.el?{el:t.el}:void 0);break;case"skybox":i=new n.Skybox(t.el?{el:t.el}:void 0)}if(void 0!=t.size&&i.size.apply(i,t.size),void 0!=t.position&&i.position.apply(i,t.position),void 0!=t.rotation&&i.rotation.apply(i,t.rotation),void 0!=t.scale&&i.scale.apply(i,t.scale),void 0!=t.origin&&i.origin.apply(i,t.origin),void 0!=t.visibility&&i.visibility.apply(i,t.visibility),void 0!=t.material&&i.material.apply(i,t.material),void 0!=t.filter&&i.filter.apply(i,t.filter),void 0!=t.name&&i.name.apply(i,[t.name]),void 0!=t.id&&i.id.apply(i,[t.id]),void 0!=t.class&&i.class.apply(i,[t.class]),i.update(),t.children)for(var e=0,r=t.children.length;e<r;e++){var h=t.children[e],o=s(h);i.addChild(o)}return i}var n={},r="";!function(){var t=document.createElement("div"),i=["Webkit","Moz","Ms","O"];for(var e in i)if(i[e]+"Transform"in t.style){r=i[e];break}}(),n.getRandomColor=function(){return"#"+("00000"+(16777216*Math.random()<<0).toString(16)).slice(-6)},n.rgb2hex=function(t,i,e){return(t<<16|i<<8|e).toString(16)},n.hex2rgb=function(t){var i=Math.floor("0x"+t);return[i>>16&255,i>>8&255,255&i]};var h=function(){this.initialize.apply(this,arguments)};Object.assign(h.prototype,{x:0,y:0,z:0,position:function(t,i,e){if(void 0==t)throw"position arguments is wrong!";return this.x=t,this.y=void 0==i?t:i,this.z=void 0==e?t:e,this},move:function(t,i,e){if(void 0==t)throw"move arguments is wrong!";return this.x+=t,this.y+=void 0==i?t:i,this.z+=void 0==e?t:e,this},rotationX:0,rotationY:0,rotationZ:0,rotation:function(t,i,e){if(void 0==t)throw"rotation arguments is wrong!";return this.rotationX=t,this.rotationY=void 0==i?t:i,this.rotationZ=void 0==e?t:e,this},rotate:function(t,i,e){if(void 0==t)throw"rotate arguments is wrong!";return this.rotationX+=t,this.rotationY+=void 0==i?t:i,this.rotationZ+=void 0==e?t:e,this},scaleX:1,scaleY:1,scaleZ:1,scale:function(t,i,e){if(void 0==t)throw"scale arguments is wrong!";return this.scaleX=t,this.scaleY=void 0==i?t:i,this.scaleZ=void 0==e?t:e,this},width:0,height:0,depth:0,size:function(t,i,e){if(void 0==t)throw"size arguments is wrong!";return this.width=t,this.height=void 0==i?t:i,this.depth=void 0==e?t:e,this},originX:0,originY:0,originZ:0,__orgO:{x:0,y:0,z:0},__orgT:{x:0,y:0,z:0},__orgF:{x:0,y:0,z:0},origin:function(t,i,e){if(void 0==t)throw"size arguments is wrong!";return this.originX=t,this.originY=void 0==i?t:i,this.originZ=void 0==e?t:e,this},__sort:["X","Y","Z"],sort:function(t,i,e){if(arguments.length>3)throw"sort arguments is wrong!";return this.__sort=[t,i,e],this},initialize:function(){this.x=0,this.y=0,this.z=0,this.rotationX=0,this.rotationY=0,this.rotationZ=0,this.scaleX=1,this.scaleY=1,this.scaleZ=1,this.width=0,this.height=0,this.depth=0,this.originX="50%",this.originY="50%",this.originZ="0px",this.__orgO={x:"50%",y:"50%",z:"0px"},this.__orgT={x:"-50%",y:"-50%",z:"0px"},this.__orgF={x:0,y:0,z:0},this.children=[]},parent:null,children:null,addChild:function(t){if(null!=t.parent&&t.parent.removeChild(t),""!=t.__name){if(void 0!==this[t.__name])throw t.__name+" already exist!";this[t.__name]=t}return this.children.push(t),t.parent=this,this},removeChild:function(t){for(var i=this.children.length-1;i>=0;i--)if(this.children[i]===t)return""!=t.__name&&delete this[t.__name],this.children.splice(i,1),t.parent=null,this;return this},removeAllChild:function(){for(var t=this.children.length-1;t>=0;t--){var i=this.children[t];""!=i.__name&&delete this[i.__name],i.parent=null}return this.children=[],this},remove:function(){return null!=this.parent&&this.parent.removeChild(this),this}});var o=function(){h.apply(this,arguments)};o.prototype=Object.assign(Object.create(h.prototype),{constructor:o,el:null,alpha:1,visible:!0,initialize:function(t){h.prototype.initialize.apply(this,[t]),this.__name="",this.__id="",this.__class="",this.alpha=1,this.visible=!0;var i;if(t&&t.el)switch(typeof t.el){case"string":i=document.createElement("div"),i.innerHTML=t.el;break;case"object":1===t.el.nodeType&&(i=t.el)}i||(i=document.createElement("div")),i.style.position="absolute",i.style[r+"Transform"]="translateZ(0px)",i.style[r+"TransformStyle"]="preserve-3d",this.el=i,i.le=this},__name:"",name:function(t){return this.__name=t,""==t?delete this.el.dataset.name:this.el.dataset.name=t,this},__id:"",id:function(t){return this.__id=t,this.el.id=t,this},__class:"",class:function(t){return this.__class=t,this.el.className=t,this},update:function(){return this.updateS(),this.updateM(),this.updateO(),this.updateT(),this.updateV(),this},updateS:function(){return this},updateM:function(){if(!this.__mat)return this;for(var t in this.__mat)switch(t){case"bothsides":this.el.style[r+"BackfaceVisibility"]=this.__mat[t]?"visible":"hidden";break;case"image":this.el.style["background"+e(t)]=""!==this.__mat[t]?"url("+this.__mat[t]+")":"";break;default:this.el.style["background"+e(t)]=this.__mat[t]}return this},updateO:function(){if("number"==typeof this.originX){var i=t(this.originX-this.__orgF.x);this.__orgO.x=i+"px",this.__orgT.x=-i+"px"}else this.__orgO.x=this.originX,this.__orgT.x="-"+this.originX;if("number"==typeof this.originY){var e=t(this.originY-this.__orgF.y);this.__orgO.y=e+"px",this.__orgT.y=-e+"px"}else this.__orgO.y=this.originY,this.__orgT.y="-"+this.originY;if("number"==typeof this.originZ){var s=t(this.originZ-this.__orgF.z);this.__orgO.z=s+"px",this.__orgT.z=-s+"px"}else this.__orgO.z=this.__orgT.z="0px";return this.el.style[r+"TransformOrigin"]=this.__orgO.x+" "+this.__orgO.y+" "+this.__orgO.z,this},updateT:function(){var t=this.__sort[0],e=this.__sort[1],s=this.__sort[2];return this.el.style[r+"Transform"]="translate3d("+this.__orgT.x+", "+this.__orgT.y+", "+this.__orgT.z+") translate3d("+i(this.x)+"px,"+i(this.y)+"px,"+i(this.z)+"px) rotate"+t+"("+i(this["rotation"+t])%360+"deg) rotate"+e+"("+i(this["rotation"+e])%360+"deg) rotate"+s+"("+i(this["rotation"+s])%360+"deg) scale3d("+i(this.scaleX)+", "+i(this.scaleY)+", "+i(this.scaleZ)+") ",this},updateV:function(){return this.el.style.opacity=this.alpha,this.el.style.display=this.visible?"block":"none",this},addChild:function(t){return h.prototype.addChild.apply(this,[t]),this.el&&t.el&&this.el.appendChild(t.el),this},removeChild:function(t){for(var i=this.children.length-1;i>=0;i--)if(this.children[i]===t)return""!=t.__name&&delete this[t.__name],this.children.splice(i,1),t.parent=null,this.el.removeChild(t.el),this;return this},removeAllChild:function(){for(var t=this.children.length-1;t>=0;t--){var i=this.children[t];""!=i.__name&&delete this[i.__name],i.parent=null,this.el.removeChild(i.el)}return this.children=[],this},on:function(t){if("object"==typeof t)for(var i in t)this.el.addEventListener(i,t[i],!1);else 2===arguments.length?this.el.addEventListener(arguments[0],arguments[1],!1):3===arguments.length&&this.el.addEventListener(arguments[0],arguments[1],arguments[2]);return this},off:function(t){if("object"==typeof t)for(var i in t)this.el.removeEventListener(i,t[i],!1);else 2===arguments.length&&this.el.removeEventListener(arguments[0],arguments[1],!1);return this},buttonMode:function(t){return this.el.style.cursor=t?"pointer":"auto",this},__mat:null,material:function(t){return this.__mat=t,this},visibility:function(t){return void 0!==t.visible&&(this.visible=t.visible),void 0!==t.alpha&&(this.alpha=t.alpha),this}});var a=function(){o.apply(this,arguments)};a.prototype=Object.assign(Object.create(o.prototype),{constructor:a,camera:null,fov:null,__rfix:null,__pfix:null,initialize:function(t){o.prototype.initialize.apply(this,[t]),t&&t.el||(this.el.style.top="0px",this.el.style.left="0px",this.el.style.width="0px",this.el.style.height="0px"),this.el.style[r+"Perspective"]="800px",this.el.style[r+"TransformStyle"]="flat",this.el.style[r+"Transform"]="",this.el.style.overflow="hidden",this.__rfix=new n.Sprite,this.el.appendChild(this.__rfix.el),this.__pfix=new n.Sprite,this.__rfix.el.appendChild(this.__pfix.el),this.setCamera(new n.Camera)},updateS:function(){return this.el.style.width=t(this.width)+"px",this.el.style.height=t(this.height)+"px",this},updateT:function(){return this.fov=t(.5/Math.tan(.5*this.camera.fov/180*Math.PI)*this.height),this.el.style[r+"Perspective"]=this.fov+"px",this.__rfix.position(t(this.width/2),t(this.height/2),this.fov).rotation(-this.camera.rotationX,-this.camera.rotationY,-this.camera.rotationZ).updateT(),this.__pfix.position(-this.camera.x,-this.camera.y,-this.camera.z).updateT(),this},addChild:function(t){return this.__pfix.addChild(t),this},removeChild:function(t){return this.__pfix.removeChild(t),this},removeAllChild:function(){return this.__pfix.removeAllChild(),this},setCamera:function(t){return this.camera&&(this.camera.stage=null),this.camera=t,this.camera.stage=this,this}});var l=function(){h.apply(this,arguments)};l.prototype=Object.assign(Object.create(h.prototype),{constructor:l,fov:null,stage:null,initialize:function(t){h.prototype.initialize.apply(this,[t]),this.fov=75},update:function(){return this.updateT(),this},updateS:function(){return this},updateM:function(){return this},updateT:function(){return this.stage&&this.stage.updateT(),this},updateV:function(){return this}});var p=function(){o.apply(this,arguments)};p.prototype=Object.assign(Object.create(o.prototype),{constructor:p,initialize:function(t){o.prototype.initialize.apply(this,[t])},update:function(){return o.prototype.update.apply(this),this.updateF(),this},updateS:function(){return this.el.style.width=t(this.width)+"px",this.el.style.height=t(this.height)+"px",this},updateF:function(){if(!this.__flt)return this;var t="";for(var i in this.__flt)t+=""!==this.__flt[i]?i+"("+this.__flt[i].join(",")+")":"";return""!==t&&(this.el.style[r+"Filter"]=t),this},__flt:null,filter:function(t){return this.__flt=t,this}});var u=function(){o.apply(this,arguments)};u.prototype=Object.assign(Object.create(o.prototype),{constructor:u,front:null,back:null,left:null,right:null,up:null,down:null,initialize:function(t){o.prototype.initialize.apply(this,[t]),this.front=new n.Plane,this.front.name="front",this.addChild(this.front),this.back=new n.Plane,this.back.name="back",this.addChild(this.back),this.left=new n.Plane,this.left.name="left",this.addChild(this.left),this.right=new n.Plane,this.right.name="right",this.addChild(this.right),this.up=new n.Plane,this.up.name="up",this.addChild(this.up),this.down=new n.Plane,this.down.name="down",this.addChild(this.down)},update:function(){return o.prototype.update.apply(this),this.updateF(),this},updateS:function(){var i=t(this.width),e=t(this.height),s=t(this.depth);return this.__orgF.x=this.width/2,this.__orgF.y=this.height/2,this.__orgF.z=this.depth/2,this.front.size(i,e,0).position(0,0,s/2).rotation(0,0,0).updateS().updateT(),this.back.size(i,e,0).position(0,0,-s/2).rotation(0,180,0).updateS().updateT(),this.left.size(s,e,0).position(-i/2,0,0).rotation(0,-90,0).updateS().updateT(),this.right.size(s,e,0).position(i/2,0,0).rotation(0,90,0).updateS().updateT(),this.up.size(i,s,0).position(0,-e/2,0).rotation(90,0,0).updateS().updateT(),this.down.size(i,s,0).position(0,e/2,0).rotation(-90,0,0).updateS().updateT(),this},updateM:function(){if(!this.__mat)return this;var t=!0;for(var i in this.__mat)switch(i){case"front":case"back":case"left":case"right":case"up":case"down":void 0==this.__mat[i].bothsides&&(this.__mat[i].bothsides=!1),this[i].material(this.__mat[i]).updateM(),t=!1}return t&&(void 0==this.__mat.bothsides&&(this.__mat.bothsides=!1),this.front.material(this.__mat).updateM(),this.back.material(this.__mat).updateM(),this.left.material(this.__mat).updateM(),this.right.material(this.__mat).updateM(),this.up.material(this.__mat).updateM(),this.down.material(this.__mat).updateM()),this},updateF:function(){return this.__flt?(this.front.filter(this.__flt).updateF(),this.back.filter(this.__flt).updateF(),this.left.filter(this.__flt).updateF(),this.right.filter(this.__flt).updateF(),this.up.filter(this.__flt).updateF(),this.down.filter(this.__flt).updateF(),this):this},__flt:null,filter:function(t){return this.__flt=t,this}});var d=function(){u.apply(this,arguments)};return d.prototype=Object.assign(Object.create(u.prototype),{constructor:d,updateS:function(){var i=t(this.width),e=t(this.height),s=t(this.depth);return this.__orgF.x=this.width/2,this.__orgF.y=this.height/2,this.__orgF.z=this.depth/2,this.front.size(i,e,0).position(0,0,-s/2).rotation(0,0,0).updateS().updateT(),this.back.size(i,e,0).position(0,0,s/2).rotation(0,180,0).updateS().updateT(),this.left.size(s,e,0).position(-i/2,0,0).rotation(0,90,0).updateS().updateT(),this.right.size(s,e,0).position(i/2,0,0).rotation(0,-90,0).updateS().updateT(),this.up.size(i,s,0).position(0,-e/2,0).rotation(-90,0,0).updateS().updateT(),this.down.size(i,s,0).position(0,e/2,0).rotation(90,0,0).updateS().updateT(),this}}),Object.assign(n,{Object:h,Sprite:o,Stage:a,Camera:l,Plane:p,Box:u,Skybox:d}),n.create=function(t){if("object"==typeof t){return s(t instanceof Array?{type:"sprite",children:t}:t)}throw"create arguments is wrong!"},n});