SkinnedMesh support on Editor

editor/js/Loader.js

@@ -470,10 +470,24 @@ var Loader = function ( editor ) {
 
 				var mesh;
 
-				if ( geometry.animation && geometry.animation.hierarchy ) {
+				if ( geometry.bones !== undefined ) {
 
 					mesh = new THREE.SkinnedMesh( geometry, material );
 
+					if ( mesh.material instanceof THREE.MultiMaterial ) {
+
+						for ( var i = 0; i < mesh.material.materials.length; i++ ) {
+
+							mesh.material.materials[ i ].skinning = true;
+
+						}
+
+					} else {
+
+						mesh.material.skinning = true;
+
+					}
+
 				} else {
 
 					mesh = new THREE.Mesh( geometry, material );

editor/js/Viewport.js

@@ -47,12 +47,19 @@ var Viewport = function ( editor ) {
 
 			selectionBox.update( object );
 
-			if ( editor.helpers[ object.id ] !== undefined ) {
+			function updateHelper ( object ) {
 
-				editor.helpers[ object.id ].update();
+				if ( editor.helpers[ object.id ] !== undefined ) {
+
+					editor.helpers[ object.id ].update();
+
+				}
 
 			}
 
+			updateHelper( object );
+			object.traverseAncestors( updateHelper );
+
 			signals.refreshSidebarObject3D.dispatch( object );
 
 		}

src/core/Geometry.js

@@ -1043,6 +1043,51 @@ THREE.Geometry.prototype = {
 
 		}
 
+		var bones = [];
+		var skinIndices = [];
+		var skinWeights = [];
+		var influencesPerVertex = 0;
+
+		if ( this.bones !== undefined ) {
+
+			for ( var i = 0; i < this.bones.length; i ++ ) {
+
+				bones.push( this.bones[ i ] );
+
+			}
+
+		}
+
+		for ( var i = 0; i < this.skinIndices.length; i ++ ) {
+
+			var array = this.skinIndices[ i ].toArray();
+
+			for ( var j = 0; j < array.length; j ++ ) {
+
+				skinIndices.push( array[ j ] );
+
+			}
+
+		}
+
+		for ( var i = 0; i < this.skinWeights.length; i ++ ) {
+
+			var array = this.skinWeights[ i ].toArray();
+
+			for ( var j = 0; j < array.length; j ++ ) {
+
+				skinWeights.push( array[ j ] );
+
+			}
+
+		}
+
+		if ( this.skinIndices.length > 0 ) {
+
+			influencesPerVertex = this.skinIndices[ 0 ].toArray().length;
+
+		}
+
 		function setBit( value, position, enabled ) {
 
 			return enabled ? value | ( 1 << position ) : value & ( ~ ( 1 << position ) );
@@ -1107,6 +1152,10 @@ THREE.Geometry.prototype = {
 		if ( colors.length > 0 ) data.data.colors = colors;
 		if ( uvs.length > 0 ) data.data.uvs = [ uvs ]; // temporal backward compatibility
 		data.data.faces = faces;
+		if ( bones.length > 0 ) data.data.bones = bones;
+		if ( skinIndices.length > 0 ) data.data.skinIndices = skinIndices;
+		if ( skinWeights.length > 0 ) data.data.skinWeights = skinWeights;
+		if ( influencesPerVertex > 0 ) data.data.influencesPerVertex = influencesPerVertex;
 
 		return data;
 

src/loaders/MaterialLoader.js

@@ -73,6 +73,7 @@ THREE.MaterialLoader.prototype = {
 		if ( json.colorWrite !== undefined ) material.colorWrite = json.colorWrite;
 		if ( json.wireframe !== undefined ) material.wireframe = json.wireframe;
 		if ( json.wireframeLinewidth !== undefined ) material.wireframeLinewidth = json.wireframeLinewidth;
+		if ( json.skinning !== undefined ) material.skinning = json.skinning;
 
 		// for PointsMaterial
 		if ( json.size !== undefined ) material.size = json.size;

src/loaders/ObjectLoader.js

@@ -506,6 +506,7 @@ THREE.ObjectLoader.prototype = {
 					break;
 
 				case 'Mesh':
+				case 'SkinnedMesh':
 
 					var geometry = getGeometry( data.geometry );
 					var material = getMaterial( data.material );
@@ -553,6 +554,12 @@ THREE.ObjectLoader.prototype = {
 
 					break;
 
+				case 'Bone':
+
+					object = new THREE.Bone();
+
+					break;
+
 				default:
 
 					object = new THREE.Object3D();
@@ -610,6 +617,94 @@ THREE.ObjectLoader.prototype = {
 
 			}
 
+			/*
+			 * Now SkinnedMesh could have two bone sets in its children,
+			 * one is made from geometry.bones in SkinnedMesh constroctor
+			 * and another one is made from data.children in this method.
+			 * These two bone sets correspond to the same bones.
+			 * The former would represent a default stand pose while
+			 * the latter would represent a pose updated by skinning.
+			 * To let SkinnedMesh be updated pose, here this logic copies
+			 * the latter one to the former one then removes the latter one.
+			 * If in the latter one there're objects which don't correspond to
+			 * the ones in the former one, they'll be moved to the former one.
+			 */
+			if ( object.type === 'SkinnedMesh' ) {
+
+				function copyBone ( bone, bone2 ) {
+
+					bone.position.copy( bone2.position );
+					bone.rotation.copy( bone2.rotation );
+					bone.scale.copy( bone2.scale );
+					bone.updateMatrixWorld();
+
+				}
+
+				function traverseBones ( object, object2 ) {
+
+					for ( var i = 0; i < object2.children.length; i ++ ) {
+
+						var child2 = object2.children[ i ];
+
+						var found = false;
+
+						if ( child2.type === 'Bone' ) {
+
+							for ( var j = 0; j < object.children.length; j ++ ) {
+
+								var child = object.children[ j ];
+
+								if ( child.type === 'Bone' && child.name === child2.name ) {
+
+									copyBone( child, child2 );
+									traverseBones( child, child2 );
+									found = true;
+
+									break;
+
+								}
+
+							}
+
+						}
+
+						if ( ! found ) {
+
+							object.add( child2 );
+
+						}
+
+					}
+
+				}
+
+				for ( var i = 0; i < object.children.length; i ++ ) {
+
+					var child = object.children[ i ];
+
+					if ( child.type === 'Bone' ) {
+
+						for ( var j = i + 1; j < object.children.length; j ++ ) {
+
+							var child2 = object.children[ j ];
+
+							if ( child2.type === 'Bone' && child.name === child2.name ) {
+
+								copyBone( child, child2 );
+								traverseBones( child, child2 );
+								object.remove( child2 );
+								break;
+
+							}
+
+						}
+
+					}
+
+				}
+
+			}
+
 			return object;
 
 		};

src/materials/Material.js

@@ -199,6 +199,8 @@ THREE.Material.prototype = {
 		if ( this.wireframe === true ) data.wireframe = this.wireframe;
 		if ( this.wireframeLinewidth > 1 ) data.wireframeLinewidth = this.wireframeLinewidth;
 
+		if ( this.skinning !== undefined ) data.skinning = this.skinning;
+
 		// TODO: Copied from Object3D.toJSON
 
 		function extractFromCache ( cache ) {