THREE-中动画保存JSON的转化动画的问题

问题： 使用线程保存动画JSON数据

1.使用worker进行保存时，变量必须可复制。可以使用  AnimationClip   toJSON  转换字符串 方法。
注意：
1.将一个AnimationClip 对象直接通过JSON.stringify( )转换成json对象 后再用 
  json对象重建AnimationClip是重建不了的    
2.正确做法是 通过THREE.AnimationClip.toJSON( '动画剪辑对象' )生成 json对象;
加载json 再使用 THREE.AnimationClip.parse (  JSON.parse ( json ) )转换得到AnimationClip对象；

用到的对象:

动画混合器(AnimationMixer)
来自 <http://jsrun.net/t/fNpKp> 

动画剪辑（AnimationClip）
来自 <http://jsrun.net/t/WNpKp> 

动画动作(AnimationAction)
来自 <http://jsrun.net/t/bNpKp> 

//实现代码
		/** 加载模型动画
	     * @param animations: 动画数据
	     * @param obj: 模型数据
	     */
	    animation(animations, obj) {
	      let animationList = []; // 保存 动画数据
	      if (animations && animations.length) {
	        const mixer = new THREE.AnimationMixer(obj);
	        for (let i = 0; i < animations.length; i++) {
	          const animation = animations[i];
	          // There's .3333 seconds junk at the tail of the Monster animation that
	          // keeps it from looping cleanly. Clip it at 3 seconds
	          //animation.duration = 3;
	          // 保存动画 ACtion
	          this.animationAction.push(mixer.clipAction(animation)) 
	          animationList.push(THREE.AnimationClip.toJSON(animation));
	        }
	        this.animationMixer = mixer;
	      }
	      return animationList;
	    },
	
		 /**加载数据库动画动画
	     * @param animations: 动画数据
	     * @param obj: 模型数据
	     */
	    loaderAnimations(animations, obj) {
	      if (animations && animations.length) {
	        animations = new THREE.AnimationLoader().parse(animations); //转换json  返回AnimationClip 对象
	        const mixer = new THREE.AnimationMixer(obj);
	        for (let i = 0; i < animations.length; i++) {
	          //  animations[i]   THREE.AnimationClip.parse(animations[i])
	          const animation = animations[i];
	          // There's .3333 seconds junk at the tail of the Monster animation that
	          // keeps it from looping cleanly. Clip it at 3 seconds
	          //animation.duration = 3;
	          // 保存动画 ACtion
	          this.animationAction.push(mixer.clipAction(animation))  
	        }
	        this.animationMixer = mixer;
	      }
    },

在3D模型中：

1.动画属性是数组，里面是 AnimationClip  对象
可以是使用  
  .toJSON ( clip : AnimationClip ) : Object
  接收一个动画剪辑为参数并返回一个JSON对象.
2. 再使用 THREE.AnimationLoader() 解析 json 动画数据
3. 返回AnimationClip 对象 的数组  
4. 在使用  THREE.AnimationMixer(obj) 对象 的 clipAction 方法得到  animationAction
5. animationAction 对象 可以对动画进行播放 操作

按参考资料

• threejs 动画转json和json转动画
  来自 https://blog.csdn.net/github_38108899/article/details/100143290

• AnimationClip toJSON 转换字符串
  来自 https://threejs.org/docs/api/zh/animation/AnimationClip.html

• 动画动作(AnimationAction)
  来自 http://jsrun.net/t/bNpKp

时间：2020-12-31