Basic implementation of MaterialLoader.

editor/index.html

@@ -80,6 +80,7 @@
 		<script src="../examples/js/loaders/ctm/ctm.js"></script>
 		<script src="../examples/js/loaders/ctm/CTMLoader.js"></script>
 		<script src="../examples/js/exporters/GeometryExporter.js"></script>
+		<script src="../examples/js/exporters/MaterialExporter.js"></script>
 		<script src="../examples/js/exporters/SceneExporter.js"></script>
 		<script src="../examples/js/exporters/OBJExporter.js"></script>
 		<script src="../examples/js/renderers/SoftwareRenderer.js"></script>
@@ -475,7 +476,7 @@
 
 					localStorage.threejsEditor = JSON.stringify( sceneExporter.parse( scene ) );
 
-				}, 5000 );
+				}, 3000 );
 
 			} );
 

examples/js/exporters/MaterialExporter.js

@@ -10,7 +10,61 @@ THREE.MaterialExporter.prototype = {
 
 	parse: function ( material ) {
 
+		var output = {
+			metadata: {
+				version: 4.0,
+				type: 'material',
+				generator: 'MaterialExporter'
+			}
+		};
 
+		if ( material instanceof THREE.MeshBasicMaterial ) {
+
+			output.type = 'MeshBasicMaterial';
+			output.color = material.color.getHex();
+			output.opacity = material.opacity;
+			output.transparent = material.transparent;
+			output.wireframe = material.wireframe;
+
+		} else if ( material instanceof THREE.MeshLambertMaterial ) {
+
+			output.type = 'MeshLambertMaterial';
+			output.color = material.color.getHex();
+			output.ambient = material.ambient.getHex();
+			output.emissive = material.emissive.getHex();
+			output.opacity = material.opacity;
+			output.transparent = material.transparent;
+			output.wireframe = material.wireframe;
+
+		} else if ( material instanceof THREE.MeshPhongMaterial ) {
+
+			output.type = 'MeshPhongMaterial';
+			output.color = material.color.getHex();
+			output.ambient = material.ambient.getHex();
+			output.emissive = material.emissive.getHex();
+			output.specular = material.specular.getHex();
+			output.shininess = material.shininess;
+			output.opacity = material.opacity;
+			output.transparent = material.transparent;
+			output.wireframe = material.wireframe;
+
+		} else if ( material instanceof THREE.MeshNormalMaterial ) {
+
+			output.type = 'MeshNormalMaterial';
+			output.opacity = material.opacity;
+			output.transparent = material.transparent;
+			output.wireframe = material.wireframe;
+
+		} else if ( material instanceof THREE.MeshDepthMaterial ) {
+
+			output.type = 'MeshDepthMaterial';
+			output.opacity = material.opacity;
+			output.transparent = material.transparent;
+			output.wireframe = material.wireframe;
+
+		}
+
+		return output;
 
 	}
 

examples/js/exporters/SceneExporter2.js

@@ -10,6 +10,8 @@ THREE.SceneExporter2.prototype = {
 
 	parse: function ( scene ) {
 
+		// console.log( scene );
+
 		var output = {
 			metadata: {
 				version: 4.0,
@@ -18,8 +20,6 @@ THREE.SceneExporter2.prototype = {
 			}
 		};
 
-		console.log( scene );
-
 		//
 
 		var geometries = {};
@@ -79,16 +79,34 @@ THREE.SceneExporter2.prototype = {
 
 		};
 
-		/*
+		//
+
 		var materials = {};
 		var materialExporter = new THREE.MaterialExporter();
 
 		var parseMaterial = function ( material ) {
 
+			if ( materials[ material.id ] === undefined ) {
+
+				if ( output.materials === undefined ) {
+
+					output.materials = [];
+
+				}
 
+				materials[ material.id ] = output.materials.length;
+
+				var data = { name: material.name, data: materialExporter.parse( material ) };
+
+				output.materials.push( data );
+
+			}
+
+			return materials[ material.id ];
 
 		};
-		*/
+
+		//
 
 		var parseObject = function ( object ) {
 
@@ -154,6 +172,7 @@ THREE.SceneExporter2.prototype = {
 				data.rotation = object.rotation.toArray();
 				data.scale = object.scale.toArray();
 				data.geometry = parseGeometry( object.geometry );
+				data.material = parseMaterial( object.material );
 
 			} else {
 

examples/js/loaders/SceneLoader2.js

@@ -109,6 +109,21 @@ THREE.SceneLoader2.prototype = {
 
 		// materials
 
+		var materials = [];
+		var loader = new THREE.MaterialLoader();
+
+		for ( var i = 0, l = json.materials.length; i < l; i ++ ) {
+
+			var material;
+			var data = json.materials[ i ];
+
+			material = loader.parse( data.data );
+
+			material.name = data.name;
+			materials.push( material );
+
+		}
+
 		// objects
 
 		var parseObject = function ( array, parent ) {
@@ -171,7 +186,7 @@ THREE.SceneLoader2.prototype = {
 
 					case 'Mesh':
 
-						object = new THREE.Mesh( geometries[ data.geometry ] ); // TODO: Material
+						object = new THREE.Mesh( geometries[ data.geometry ], materials[ data.material ] );
 						object.position.fromArray( data.position );
 						object.rotation.fromArray( data.rotation );
 						object.scale.fromArray( data.scale );

src/loaders/MaterialLoader.js

@@ -44,7 +44,82 @@ THREE.MaterialLoader.prototype = {
 
 	parse: function ( json ) {
 
-		
+		var material;
+
+		switch ( json.type ) {
+
+			case 'MeshBasicMaterial':
+
+				material = new THREE.MeshBasicMaterial( {
+
+					color: json.color,
+					opacity: json.opacity,
+					transparent: json.transparent,
+					wireframe: json.wireframe
+
+				} );
+
+				break;
+
+			case 'MeshLambertMaterial':
+
+				material = new THREE.MeshLambertMaterial( {
+
+					color: json.color,
+					ambient: json.ambient,
+					emissive: json.emissive,
+					opacity: json.opacity,
+					transparent: json.transparent,
+					wireframe: json.wireframe
+
+				} );
+
+				break;
+
+			case 'MeshPhongMaterial':
+
+				material = new THREE.MeshPhongMaterial( {
+
+					color: json.color,
+					ambient: json.ambient,
+					emissive: json.emissive,
+					specular: json.specular,
+					shininess: json.shininess,
+					opacity: json.opacity,
+					transparent: json.transparent,
+					wireframe: json.wireframe
+
+				} );
+
+				break;
+
+			case 'MeshNormalMaterial':
+
+				material = new THREE.MeshNormalMaterial( {
+
+					opacity: json.opacity,
+					transparent: json.transparent,
+					wireframe: json.wireframe
+
+				} );
+
+				break;
+
+			case 'MeshDepthMaterial':
+
+				material = new THREE.MeshDepthMaterial( {
+
+					opacity: json.opacity,
+					transparent: json.transparent,
+					wireframe: json.wireframe
+
+				} );
+
+				break;
+
+		}
+
+		return material;
 
 	}