| function TCameraElement(data,parentContainer,globalData,comp, placeholder){ |
| this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder); |
| this.pe = PropertyFactory.getProp(this,data.pe,0,0,this.dynamicProperties); |
| if(data.ks.p.s){ |
| this.px = PropertyFactory.getProp(this,data.ks.p.x,1,0,this.dynamicProperties); |
| this.py = PropertyFactory.getProp(this,data.ks.p.y,1,0,this.dynamicProperties); |
| this.pz = PropertyFactory.getProp(this,data.ks.p.z,1,0,this.dynamicProperties); |
| }else{ |
| this.p = PropertyFactory.getProp(this,data.ks.p,1,0,this.dynamicProperties); |
| } |
| if(data.ks.a){ |
| this.a = PropertyFactory.getProp(this,data.ks.a,1,0,this.dynamicProperties); |
| } |
| if(data.ks.or.k.length && data.ks.or.k[0].to){ |
| var i,len = data.ks.or.k.length; |
| for(i=0;i<len;i+=1){ |
| data.ks.or.k[i].to = null; |
| data.ks.or.k[i].ti = null; |
| } |
| } |
| this.or = PropertyFactory.getProp(this,data.ks.or,1,degToRads,this.dynamicProperties); |
| this.or.sh = true; |
| this.rx = PropertyFactory.getProp(this,data.ks.rx,0,degToRads,this.dynamicProperties); |
| this.ry = PropertyFactory.getProp(this,data.ks.ry,0,degToRads,this.dynamicProperties); |
| this.rz = PropertyFactory.getProp(this,data.ks.rz,0,degToRads,this.dynamicProperties); |
| this.mat = new Matrix(); |
| |
| var vFOV = 2 * Math.atan( globalData.compSize.h / ( 2 * 1111 ) ); |
| vFOV = vFOV * 180 / Math.PI; |
| //console.log('vFOV:', vFOV) |
| var camera = new THREE.PerspectiveCamera( vFOV, globalData.compSize.w / globalData.compSize.h, 1, 10000 ); |
| camera.matrixAutoUpdate = false; |
| /*camera.position.x = 0; |
| camera.position.y = 0;*/ |
| //camera.position.z = 1111; |
| this.threeCamera = camera; |
| } |
| createElement(TBaseElement, TCameraElement); |
| |
| TCameraElement.prototype.setup = function() { |
| var i, len = this.comp.threeDElements.length, comp; |
| for(i=0;i<len;i+=1){ |
| //[perspectiveElem,container] |
| comp = this.comp.threeDElements[i]; |
| comp.perspectiveElem.style.perspective = comp.perspectiveElem.style.webkitPerspective = this.pe.v+'px'; |
| comp.container.style.transformOrigin = comp.container.style.mozTransformOrigin = comp.container.style.webkitTransformOrigin = "0px 0px 0px"; |
| comp.perspectiveElem.style.transform = comp.perspectiveElem.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)'; |
| } |
| }; |
| |
| TCameraElement.prototype.createElements = function(){ |
| }; |
| |
| TCameraElement.prototype.hide = function(){ |
| }; |
| |
| TCameraElement.prototype.renderFrame = function(){ |
| var mdf = this.firstFrame; |
| var i, len; |
| if(this.hierarchy){ |
| len = this.hierarchy.length; |
| for(i=0;i<len;i+=1){ |
| mdf = this.hierarchy[i].finalTransform.mProp.mdf ? true : mdf; |
| } |
| } |
| if(mdf || (this.p && this.p.mdf) || (this.px && (this.px.mdf || this.py.mdf || this.pz.mdf)) || this.rx.mdf || this.ry.mdf || this.rz.mdf || this.or.mdf || (this.a && this.a.mdf)) { |
| this.mat.reset(); |
| //this.mat.translate(-this.globalData.compSize.w/2,-this.globalData.compSize.h/2,0); |
| |
| if(this.p){ |
| this.mat.translate(this.p.v[0],-this.p.v[1],this.p.v[2]); |
| }else{ |
| this.mat.translate(this.px.v,-this.py.v,this.pz.v); |
| } |
| if(this.a){ |
| var diffVector = [this.p.v[0]-this.a.v[0],this.p.v[1]-this.a.v[1],this.p.v[2]-this.a.v[2]]; |
| var mag = Math.sqrt(Math.pow(diffVector[0],2)+Math.pow(diffVector[1],2)+Math.pow(diffVector[2],2)); |
| //var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v)); |
| var lookDir = [diffVector[0]/mag,diffVector[1]/mag,diffVector[2]/mag]; |
| var lookLengthOnXZ = Math.sqrt( lookDir[2]*lookDir[2] + lookDir[0]*lookDir[0] ); |
| var m_rotationX = (Math.atan2( lookDir[1], lookLengthOnXZ )); |
| var m_rotationY = (Math.atan2( lookDir[0], -lookDir[2])); |
| this.mat.rotateY(m_rotationY).rotateX(-m_rotationX); |
| |
| } |
| this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v); |
| this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]); |
| if(this.hierarchy){ |
| var mat; |
| len = this.hierarchy.length; |
| for(i=0;i<len;i+=1){ |
| mat = this.hierarchy[i].finalTransform.mProp.iv.props; |
| this.mat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],-mat[12],-mat[13],mat[14],mat[15]); |
| } |
| } |
| } |
| var mat = this.mat.props; |
| //console.log(this.globalData.compSize.w); |
| //console.log(mat); |
| /*this.threeCamera.matrix.set(mat[0],mat[1],mat[2],mat[3] |
| ,mat[4],mat[5],mat[6],mat[7] |
| ,mat[8],mat[9],mat[10],mat[11] |
| ,mat[12],mat[13],mat[14],mat[15]); |
| this.threeCamera.updateMatrixWorld( true );*/ |
| /*this.threeCamera.matrix.set(1,0,0,_count |
| ,0,1,0,0 |
| ,0,0,1, 1111 |
| ,0,0,0, 1);*/ |
| //console.log('mat:', mat); |
| this.threeCamera.matrix.set(mat[0],mat[4],mat[8],mat[12] |
| ,mat[1],mat[5],mat[9],mat[13] |
| ,mat[2],mat[6],mat[10], -mat[14] |
| ,mat[3],mat[7],mat[11], mat[15]); |
| this.threeCamera.updateMatrixWorld( true ); |
| this.firstFrame = false; |
| }; |
| |
| TCameraElement.prototype.destroy = function(){ |
| }; |