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