ColladaExporter: Honor normal maps.

examples/js/exporters/ColladaExporter.js

@@ -428,6 +428,17 @@ THREE.ColladaExporter.prototype = {
 							: ''
 					) +
 
+					(
+						type !== 'constant' ?
+							'<bump>' +
+
+						(
+							m.normalMap ? '<texture texture="bump-sampler" texcoord="TEXCOORD" />' : ''
+						) +
+						'</bump>'
+							: ''
+					) +
+
 					(
 						type === 'phong' ?
 							`<specular><color sid="specular">${ specular.r } ${ specular.g } ${ specular.b } 1</color></specular>` +
@@ -483,6 +494,15 @@ THREE.ColladaExporter.prototype = {
 							''
 					) +
 
+					(
+						m.normalMap ?
+							'<newparam sid="bump-surface"><surface type="2D">' +
+							`<init_from>${ processTexture( m.normalMap ) }</init_from>` +
+							'</surface></newparam>' +
+							'<newparam sid="bump-sampler"><sampler2D><source>bump-surface</source></sampler2D></newparam>' :
+							''
+					) +
+
 					techniqueNode +
 
 					(

examples/jsm/exporters/ColladaExporter.js

@@ -439,6 +439,17 @@ ColladaExporter.prototype = {
 							: ''
 					) +
 
+					(
+						type !== 'constant' ?
+							'<bump>' +
+
+						(
+							m.normalMap ? '<texture texture="bump-sampler" texcoord="TEXCOORD" />' : ''
+						) +
+						'</bump>'
+							: ''
+					) +
+
 					(
 						type === 'phong' ?
 							`<specular><color sid="specular">${ specular.r } ${ specular.g } ${ specular.b } 1</color></specular>` +
@@ -494,6 +505,15 @@ ColladaExporter.prototype = {
 							''
 					) +
 
+					(
+						m.normalMap ?
+							'<newparam sid="bump-surface"><surface type="2D">' +
+							`<init_from>${ processTexture( m.normalMap ) }</init_from>` +
+							'</surface></newparam>' +
+							'<newparam sid="bump-sampler"><sampler2D><source>bump-surface</source></sampler2D></newparam>' :
+							''
+					) +
+
 					techniqueNode +
 
 					(

examples/misc_exporter_collada.html

@@ -40,7 +40,7 @@
 			var bFitLid;
 			var bNonBlinn;
 			var shading;
-			var wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;
+			var wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, normalMaterial, reflectiveMaterial;
 
 			var teapot, textureCube;
 
@@ -84,11 +84,18 @@
 				cameraControls.addEventListener( 'change', render );
 
 				// TEXTURE MAP
-				var textureMap = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
+				var loader = new THREE.TextureLoader();
+
+				var textureMap = loader.load( 'textures/uv_grid_opengl.jpg' );
 				textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
 				textureMap.anisotropy = 16;
 				textureMap.encoding = THREE.sRGBEncoding;
 
+				// NORMAL MAP
+
+				var diffuseMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
+				var normalMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
+
 				// REFLECTION MAP
 				var path = "textures/cube/pisa/";
 				var urls = [
@@ -114,6 +121,8 @@
 
 				texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, side: THREE.DoubleSide } );
 
+				normalMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: diffuseMap, normalMap: normalMap, side: THREE.DoubleSide } );
+
 				reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: THREE.DoubleSide } );
 
 				// scene itself
@@ -224,7 +233,7 @@
 
 				// shading
 
-				gui.add( effectController, "newShading", [ "wireframe", "flat", "smooth", "glossy", "textured", "reflective" ] ).name( "Shading" ).onChange( render );
+				gui.add( effectController, "newShading", [ "wireframe", "flat", "smooth", "glossy", "textured", "normal", "reflective" ] ).name( "Shading" ).onChange( render );
 
 				var exportButton = document.getElementById( 'export' );
 				exportButton.addEventListener( 'click', exportCollada );
@@ -260,6 +269,7 @@
 				// only if they have. But, these calls are cheap enough and this is just a demo.
 				phongMaterial.shininess = effectController.shininess;
 				texturedMaterial.shininess = effectController.shininess;
+				normalMaterial.shininess = effectController.shininess;
 
 				diffuseColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 				if ( effectController.metallic ) {
@@ -279,10 +289,12 @@
 				gouraudMaterial.color.copy( diffuseColor );
 				phongMaterial.color.copy( diffuseColor );
 				texturedMaterial.color.copy( diffuseColor );
+				normalMaterial.color.copy( diffuseColor );
 
 				specularColor.multiplyScalar( effectController.ks );
 				phongMaterial.specular.copy( specularColor );
 				texturedMaterial.specular.copy( specularColor );
+				normalMaterial.specular.copy( specularColor );
 
 				// Ambient's actually controlled by the light for this demo
 				ambientLight.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness * effectController.ka );
@@ -329,7 +341,8 @@
 						shading === "flat" ? flatMaterial : (
 							shading === "smooth" ? gouraudMaterial : (
 								shading === "glossy" ? phongMaterial : (
-									shading === "textured" ? texturedMaterial : reflectiveMaterial ) ) ) ) );	// if no match, pick Phong
+									shading === "textured" ? texturedMaterial : (
+										shading === "normal" ? normalMaterial : reflectiveMaterial ) ) ) ) ) );	// if no match, pick Phong
 
 				scene.add( teapot );