css3d.min.js

/*!
 * VERSION: 0.8.2
 * DATE: 2016-09-13
 * GIT: https://github.com/shrekshrek/css3d-engine
 * @author: Shrek.wang
 **/

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