/** * @author alteredq / http://alteredqualia.com/ */ /* ///MorphAnimMesh對象,終究的網格對象,和Mesh對象不同的是,這個對象是專門針對變形動畫的,增加了許多角色變形動畫的內容.有高人把圖形學建模比作是制作燈籠,先用Geometry創建燈籠的框架, /// 然后將材質material貼在框架上,最后構成的整體燈籠,就是Mesh對象.下面看1下Mesh對象的用法和具體實現. /// 用法:var geometry = new THREE.Geometry(1,1,1); //創建geometry對象(燈籠的框架), /// //有1下可選對象BoxGeometry,CircleGeometry,CubeGeometry,CylinderGeometry,DodecahedronGeometry,ExtrudeGeometry,IcosahedronGeometry, /// //LatheGeometry,OctahedronGeometry,ParametricGeometry,PlaneGeometry,PolyhedronGeometry,RingGeometry,ShapeGeometry,SphereGeometry, /// //TetrahedronGeometry,TextGeometry,TorusGeometry,TorusKnotGeometry,TubeGeometry /// var material = new THREE.Material({color: 0xffff00}); //創建材質對象(燈籠的表面) /// //有以下可選對象LineBasicMaterial,LineDashedMaterial,Material,MeshBasicMaterial,MeshDepthMaterial,MeshFaceMaterial, /// //MeshLambertMaterial,MeshNormalMaterial,MeshPhongMaterial,PointCloudMaterial,RawShaderMaterial,ShaderMaterial, /// //SpriteCanvasMaterial,SpriteMaterial /// var mesh = new THREE.MorphAnimMesh(geometry, material); //創建mesh(燈籠)對象,并將geometry對象(燈籠的框架)和material對象(燈籠的表面)傳遞給mesh(燈籠)對象 /// mesh.duration = 5000; /// scene.add(mesh); //將mesh(燈籠)添加到場景中. /// var delta = clock.getDelta(); /// function render (){ /// mesh.updateAnimation(1000 * delta); //在渲染器里設置動畫跟新的頻率. /// } */ ///<summary>MorphAnimMesh</summary> ///<param name ="geometry" type="THREE.Geometry">Geometry對象(燈籠的框架)</param> ///<param name ="material" type="THREE.Material">Material對象(材質對象)</param> ///<returns type="MorphAnimMesh">返回MorphAnimMesh對象</returns> THREE.MorphAnimMesh = function ( geometry, material ) { THREE.Mesh.call( this, geometry, material ); //調用Mesh對象的call方法,將本來屬于Mesh的方法交給當前對象MorphAniMesh來使用. // API this.duration = 1000; // milliseconds //周期,單位毫秒,默許初始化為1000毫秒,每幀間隔時長. this.mirroredLoop = false; //鏡像循環,看下面的算法,應當是播放完后,回放動畫, this.time = 0; //動畫時長 // internals this.lastKeyframe = 0; //最后關鍵幀 this.currentKeyframe = 0; //當前關鍵幀 this.direction = 1; //方向,應當指的是時間軸的方向 this.directionBackwards = false; //時間軸是不是是返方向,默許為false this.setFrameRange( 0, this.geometry.morphTargets.length - 1 ); //創建關鍵幀動畫時間軸,從morphTargets數組創建. }; /************************************************* ****下面是MorphAnimMesh對象的方法屬性定義,繼承自Mesh **************************************************/ THREE.MorphAnimMesh.prototype = Object.create( THREE.Mesh.prototype ); /* ///setFrameRange方法將創建關鍵幀動畫時間軸,從morphTargets數組創建 */ ///<summary>setFrameRange</summary> ///<param name ="start" type="int">morphTargets元素的索引,用來指定關鍵幀動畫的開始</param> ///<param name ="end" type="int">morphTargets元素的索引,用來指定關鍵幀動畫的結束</param> ///<returns type="MorphAnimMesh">包括關鍵幀動畫的MorphAnimMesh對象.</returns> THREE.MorphAnimMesh.prototype.setFrameRange = function ( start, end ) { this.startKeyframe = start; //開始幀等于參數start this.endKeyframe = end; //結束幀等于參數end this.length = this.endKeyframe - this.startKeyframe + 1; //動畫長度等于開始幀到結束幀 }; /* ///setDirectionForward方法設置關鍵幀動畫正放. */ ///<summary>setDirectionForward</summary> THREE.MorphAnimMesh.prototype.setDirectionForward = function () { this.direction = 1; // this.directionBackwards = false; }; /* ///setDirectionForward方法設置關鍵幀動畫倒放. */ ///<summary>setDirectionForward</summary> THREE.MorphAnimMesh.prototype.setDirectionBackward = function () { this.direction = - 1; this.directionBackwards = true; }; /* ///setDirectionForward方法從morphTagets數組中解析關鍵幀動畫 */ ///<summary>setDirectionForward</summary> THREE.MorphAnimMesh.prototype.parseAnimations = function () { var geometry = this.geometry; if ( ! geometry.animations ) geometry.animations = {}; var firstAnimation, animations = geometry.animations; var pattern = /([a-z]+)_?(d+)/; for ( var i = 0, il = geometry.morphTargets.length; i < il; i ++ ) { var morph = geometry.morphTargets[ i ]; //取得單個變形動畫關鍵幀 var parts = morph.name.match( pattern ); // if ( parts && parts.length > 1 ) { var label = parts[ 1 ]; // var num = parts[ 2 ]; if ( ! animations[ label ] ) animations[ label ] = { start: Infinity, end: - Infinity }; var animation = animations[ label ]; if ( i < animation.start ) animation.start = i; if ( i > animation.end ) animation.end = i; if ( ! firstAnimation ) firstAnimation = label; } } geometry.firstAnimation = firstAnimation; //第1個動畫. }; /* ///setAnimationLabel方法從morphTagets數組中設置關鍵幀動畫標簽,可以將morphTargets數組中,分成幾段動畫,分別寄存. */ ///<summary>setAnimationLabel</summary> ///<param name ="label" type="string">動畫標簽名</param> ///<param name ="start" type="int">morphTargets元素的索引,用來指定關鍵幀動畫的開始</param> ///<param name ="end" type="int">morphTargets元素的索引,用來指定關鍵幀動畫的結束</param> ///<returns type="MorphAnimMesh">返回帶有動畫標簽的MorphAnimMesh對象.</returns> THREE.MorphAnimMesh.prototype.setAnimationLabel = function ( label, start, end ) { if ( ! this.geometry.animations ) this.geometry.animations = {}; this.geometry.animations[ label ] = { start: start, end: end }; }; /* ///playAnimation方法根據動畫的標簽名(參數lab)依照指定的速度(參數fps)播放動畫 */ ///<summary>playAnimation</summary> ///<param name ="label" type="string">動畫標簽名</param> ///<param name ="fps" type="int">多少幀/秒</param> THREE.MorphAnimMesh.prototype.playAnimation = function ( label, fps ) { var animation = this.geometry.animations[ label ]; if ( animation ) { this.setFrameRange( animation.start, animation.end ); this.duration = 1000 * ( ( animation.end - animation.start ) / fps ); this.time = 0; } else { console.warn( 'animation[' + label + '] undefined' ); } }; /* ///updateAnimation方法根據當前時鐘頻率生成補間動畫. */ ///<summary>updateAnimation</summary> ///<param name ="delta" type="string">時鐘頻率</param> THREE.MorphAnimMesh.prototype.updateAnimation = function ( delta ) { var frameTime = this.duration / this.length; this.time += this.direction * delta; if ( this.mirroredLoop ) { if ( this.time > this.duration || this.time < 0 ) { this.direction *= - 1; if ( this.time > this.duration ) { this.time = this.duration; this.directionBackwards = true; } if ( this.time < 0 ) { this.time = 0; this.directionBackwards = false; } } } else { this.time = this.time % this.duration; if ( this.time < 0 ) this.time += this.duration; } var keyframe = this.startKeyframe + THREE.Math.clamp( Math.floor( this.time / frameTime ), 0, this.length - 1 ); if ( keyframe !== this.currentKeyframe ) { this.morphTargetInfluences[ this.lastKeyframe ] = 0; this.morphTargetInfluences[ this.currentKeyframe ] = 1; this.morphTargetInfluences[ keyframe ] = 0; this.lastKeyframe = this.currentKeyframe; this.currentKeyframe = keyframe; } var mix = ( this.time % frameTime ) / frameTime; if ( this.directionBackwards ) { mix = 1 - mix; } this.morphTargetInfluences[ this.currentKeyframe ] = mix; this.morphTargetInfluences[ this.lastKeyframe ] = 1 - mix; }; /* ///updateAnimation方法根據變形幅度t將morphTaInfluences[a]設置為1-t,morphTaInfluences[b]設置為5. */ ///<summary>updateAnimation</summary> ///<param name ="a" type="int">節點a</param> ///<param name ="b" type="int">節點b</param> ///<param name ="t" type="float">變形幅度</param> THREE.MorphAnimMesh.prototype.interpolateTargets = function ( a, b, t ) { var influences = this.morphTargetInfluences; for ( var i = 0, l = influences.length; i < l; i ++ ) { influences[ i ] = 0; } if ( a > ⑴ ) influences[ a ] = 1 - t; if ( b > ⑴ ) influences[ b ] = t; }; /*clone方法 ///clone方法克隆1個MorphAnimMesh帶有變形動畫的網格對象. */ ///<summary>clone</summary> ///<param name ="object" type="MorphAnimMesh">接收克隆的MorphAnimMesh對象</param> ///<param name ="recursive" type="boolean">是不是對子對象逐一進行克隆</param> ///<returns type="Ray">返回MorphAnimMesh帶有變形動畫的網格對象.</returns> THREE.MorphAnimMesh.prototype.clone = function ( object ) { if ( object === undefined ) object = new THREE.MorphAnimMesh( this.geometry, this.material ); object.duration = this.duration; object.mirroredLoop = this.mirroredLoop; object.time = this.time; object.lastKeyframe = this.lastKeyframe; object.currentKeyframe = this.currentKeyframe; object.direction = this.direction; object.directionBackwards = this.directionBackwards; THREE.Mesh.prototype.clone.call( this, object ); //繼承Mesh的clone方法 return object; //返回MorphAnimMesh帶有變形動畫網格對象. };