Save animations along Scene.

editor/js/Editor.js

@@ -105,7 +105,6 @@ function Editor() {
 
 	this.materialsRefCounter = new Map(); // tracks how often is a material used by a 3D object
 
-	this.animations = {};
 	this.mixer = new THREE.AnimationMixer( this.scene );
 
 	this.selected = null;
@@ -125,6 +124,14 @@ Editor.prototype = {
 		this.scene.uuid = scene.uuid;
 		this.scene.name = scene.name;
 
+		this.scene.animations.clear();
+
+		for ( const [ object, animations ] of scene.animations ) {
+
+			this.scene.animations.set( object, new Set( animations ) );
+
+		}
+
 		this.scene.background = ( scene.background !== null ) ? scene.background.clone() : null;
 
 		if ( scene.fog !== null ) this.scene.fog = scene.fog.clone();
@@ -359,9 +366,19 @@ Editor.prototype = {
 
 	addAnimations: function ( object, animations ) {
 
-		if ( animations.length > 0 ) {
+		for ( var animation of animations ) {
 
-			this.animations[ object.uuid ] = animations;
+			this.scene.addAnimation( object, animation );
+
+		}
+
+	},
+
+	removeAnimations: function ( object, animations ) {
+
+		for ( var animation of animations ) {
+
+			this.scene.removeAnimation( object, animation );
 
 		}
 
@@ -634,7 +651,6 @@ Editor.prototype = {
 
 		this.materialsRefCounter.clear();
 
-		this.animations = {};
 		this.mixer.stopAllAction();
 
 		this.deselect();
@@ -664,50 +680,10 @@ Editor.prototype = {
 
 		} );
 
-		// animations
-
-		var animationsJSON = json.animations;
-
-		for ( var i = 0; i < animationsJSON.length; i ++ ) {
-
-			var objectJSON = animationsJSON[ i ];
-			var animations = [];
-
-			for ( var j = 0; j < objectJSON.animations.length; j ++ ) {
-
-				animations.push( THREE.AnimationClip.parse( objectJSON.animations[ j ] ) );
-
-			}
-
-			this.animations[ objectJSON.uuid ] = animations;
-
-		}
-
 	},
 
 	toJSON: function () {
 
-		// animations
-
-		var animations = this.animations;
-		var animationsJSON = [];
-
-		for ( var entry in animations ) {
-
-			var objectAnimations = animations[ entry ];
-			var objectJSON = { uuid: entry, animations: [] };
-
-			for ( var i = 0; i < objectAnimations.length; i ++ ) {
-
-				var objectAnimation = objectAnimations[ i ];
-				objectJSON.animations.push( THREE.AnimationClip.toJSON( objectAnimation ) );
-
-			}
-
-			animationsJSON.push( objectJSON );
-
-		}
-
 		// scripts clean up
 
 		var scene = this.scene;
@@ -741,8 +717,7 @@ Editor.prototype = {
 			camera: this.camera.toJSON(),
 			scene: this.scene.toJSON(),
 			scripts: this.scripts,
-			history: this.history.toJSON(),
-			animations: animationsJSON
+			history: this.history.toJSON()
 
 		};
 

editor/js/Loader.js

@@ -169,7 +169,7 @@ function Loader( editor ) {
 
 					collada.scene.name = filename;
 
-					editor.addAnimations( collada.scene, collada.animations );
+					editor.execute( new AddAnimationsCommand( editor, collada.scene, collada.animations ) );
 					editor.execute( new AddObjectCommand( editor, collada.scene ) );
 
 				}, false );
@@ -210,8 +210,7 @@ function Loader( editor ) {
 					var loader = new FBXLoader( manager );
 					var object = loader.parse( contents );
 
-					editor.addAnimations( object, object.animations );
-					editor.execute( new AddObjectCommand( editor, object ) );
+					editor.execute( new AddObjectCommand( editor, object, object.animations ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -234,8 +233,7 @@ function Loader( editor ) {
 						var scene = result.scene;
 						scene.name = filename;
 
-						editor.addAnimations( scene, result.animations );
-						editor.execute( new AddObjectCommand( editor, scene ) );
+						editor.execute( new AddObjectCommand( editor, scene, result.animations ) );
 
 					} );
 
@@ -271,8 +269,7 @@ function Loader( editor ) {
 						var scene = result.scene;
 						scene.name = filename;
 
-						editor.addAnimations( scene, result.animations );
-						editor.execute( new AddObjectCommand( editor, scene ) );
+						editor.execute( new AddObjectCommand( editor, scene, result.animations ) );
 
 					} );
 
@@ -370,8 +367,7 @@ function Loader( editor ) {
 					mesh.mixer = new THREE.AnimationMixer( mesh );
 					mesh.name = filename;
 
-					editor.addAnimations( mesh, geometry.animations );
-					editor.execute( new AddObjectCommand( editor, mesh ) );
+					editor.execute( new AddObjectCommand( editor, mesh, geometry.animations ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -682,8 +678,7 @@ function Loader( editor ) {
 
 						var scene = result.scene;
 
-						editor.addAnimations( scene, result.animations );
-						editor.execute( new AddObjectCommand( editor, scene ) );
+						editor.execute( new AddObjectCommand( editor, scene, result.animations ) );
 
 					} );
 
@@ -700,8 +695,7 @@ function Loader( editor ) {
 
 						var scene = result.scene;
 
-						editor.addAnimations( scene, result.animations );
-						editor.execute( new AddObjectCommand( editor, scene ) );
+						editor.execute( new AddObjectCommand( editor, scene, result.animations ) );
 
 					} );
 

editor/js/Sidebar.Animation.js

@@ -10,7 +10,7 @@ function SidebarAnimation( editor ) {
 
 	signals.objectSelected.add( function ( object ) {
 
-		var animations = editor.animations[ object !== null ? object.uuid : '' ];
+		var animations = editor.scene.getAnimations( object );
 
 		if ( animations !== undefined ) {
 
@@ -42,7 +42,7 @@ function SidebarAnimation( editor ) {
 
 	signals.objectRemoved.add( function ( object ) {
 
-		var animations = editor.animations[ object !== null ? object.uuid : '' ];
+		var animations = editor.scene.getAnimations( object );
 
 		if ( animations !== undefined ) {
 

editor/js/commands/AddObjectCommand.js

@@ -4,9 +4,10 @@ import * as THREE from '../../../build/three.module.js';
 /**
  * @param editor Editor
  * @param object THREE.Object3D
+ * @param animations [THREE.AnimationClip]
  * @constructor
  */
-function AddObjectCommand( editor, object ) {
+function AddObjectCommand( editor, object, animations = [] ) {
 
 	Command.call( this, editor );
 
@@ -19,20 +20,24 @@ function AddObjectCommand( editor, object ) {
 
 	}
 
+	this.animations = animations;
+
 }
 
 AddObjectCommand.prototype = {
 
 	execute: function () {
 
 		this.editor.addObject( this.object );
+		this.editor.addAnimations( this.object, this.animations );
 		this.editor.select( this.object );
 
 	},
 
 	undo: function () {
 
 		this.editor.removeObject( this.object );
+		this.editor.removeAnimations( this.object, this.animations );
 		this.editor.deselect();
 
 	},
@@ -42,6 +47,14 @@ AddObjectCommand.prototype = {
 		var output = Command.prototype.toJSON.call( this );
 		output.object = this.object.toJSON();
 
+		output.animations = [];
+
+		for ( var animation of this.animations ) {
+
+			output.animations.push( animation.toJSON() );
+
+		}
+
 		return output;
 
 	},
@@ -59,6 +72,14 @@ AddObjectCommand.prototype = {
 
 		}
 
+		this.animations = [];
+
+		for ( var animation of json.animations ) {
+
+			this.animations.push( THREE.AnimationClip.parse( animation ) );
+
+		}
+
 	}
 
 };

editor/js/commands/SetSceneCommand.js

@@ -23,10 +23,14 @@ function SetSceneCommand( editor, scene ) {
 		this.cmdArray.push( new SetValueCommand( this.editor, this.editor.scene, 'name', scene.name ) );
 		this.cmdArray.push( new SetValueCommand( this.editor, this.editor.scene, 'userData', JSON.parse( JSON.stringify( scene.userData ) ) ) );
 
+		this.editor.scene.animations.clear();
+
 		while ( scene.children.length > 0 ) {
 
 			var child = scene.children.pop();
-			this.cmdArray.push( new AddObjectCommand( this.editor, child ) );
+			var animations = scene.getAnimations( child );
+
+			this.cmdArray.push( new AddObjectCommand( this.editor, child, animations ) );
 
 		}
 
@@ -76,6 +80,7 @@ SetSceneCommand.prototype = {
 			cmds.push( this.cmdArray[ i ].toJSON() );
 
 		}
+
 		output.cmds = cmds;
 
 		return output;

examples/webgl_animation_skinning_blending.html

@@ -120,6 +120,16 @@
 
 					const animations = gltf.animations;
 
+					scene.addAnimation( model, animations[ 0 ] );
+					scene.addAnimation( model, animations[ 1 ] );
+					scene.addAnimation( model, animations[ 2 ] );
+					scene.addAnimation( model, animations[ 3 ] );
+
+					const string = JSON.stringify( scene.toJSON() );
+					const object = new THREE.ObjectLoader().parse( JSON.parse( string ) );
+
+					console.log( object );
+
 					mixer = new THREE.AnimationMixer( model );
 
 					idleAction = mixer.clipAction( animations[ 0 ] );

src/animation/AnimationClip.js

@@ -118,7 +118,10 @@ Object.assign( AnimationClip, {
 
 		}
 
-		return new AnimationClip( json.name, json.duration, tracks, json.blendMode );
+		const clip = new AnimationClip( json.name, json.duration, tracks, json.blendMode );
+		clip.uuid = json.uuid;
+
+		return clip;
 
 	},
 
@@ -460,6 +463,12 @@ Object.assign( AnimationClip.prototype, {
 
 		return new AnimationClip( this.name, this.duration, tracks, this.blendMode );
 
+	},
+
+	toJSON: function () {
+
+		return AnimationClip.toJSON( this );
+
 	}
 
 } );