Added lightmap example.

See #2372

examples/obj/lightmap/lightmap.js

@@ -0,0 +1,103 @@
+{
+
+    "metadata" :
+    {
+        "formatVersion" : 3.1,
+        "generatedBy"   : "Blender 2.63 Exporter",
+        "vertices"      : 20,
+        "faces"         : 13,
+        "normals"       : 0,
+        "colors"        : 0,
+        "uvs"           : 4,
+        "materials"     : 1,
+        "morphTargets"  : 0,
+        "bones"         : 0
+    },
+
+    "scale" : 1.000000,
+
+    "materials": [	{
+	"DbgColor" : 15658734,
+	"DbgIndex" : 0,
+	"DbgName" : "redstone",
+	"blending" : "NormalBlending",
+	"colorAmbient" : [0.0, 0.0, 0.0],
+	"colorDiffuse" : [1.0, 1.0, 1.0],
+	"colorSpecular" : [0.5, 0.5, 0.5],
+	"depthTest" : true,
+	"depthWrite" : true,
+	"mapLight" : "lightmap-ao-shadow.png",
+	"mapBump" : "stone.jpg",
+	"mapSpecular" : "stone.jpg",
+	"shading" : "Phong",
+	"specularCoef" : 50,
+	"transparency" : 1.0,
+	"transparent" : false,
+	"vertexColors" : false
+	},
+
+	{
+	"DbgColor" : 15597568,
+	"DbgIndex" : 1,
+	"DbgName" : "floor",
+	"blending" : "NormalBlending",
+	"colorAmbient" : [0.0, 0.0, 0.0],
+	"colorDiffuse" : [1.0, 1.0, 1.0],
+	"colorSpecular" : [0.5, 0.5, 0.5],
+	"depthTest" : true,
+	"depthWrite" : true,
+	"mapLight" : "lightmap-ao-shadow.png",
+	"mapBump" : "stone.jpg",
+	"mapSpecular" : "stone.jpg",
+	"mapBumpRepeat" : [8, 8],
+	"mapSpecularRepeat" : [8, 8],
+	"mapBumpWrap" : ["repeat", "repeat"],
+	"mapSpecularWrap" : ["repeat", "repeat"],
+	"shading" : "Phong",
+	"specularCoef" : 50,
+	"transparency" : 1.0,
+	"transparent" : false,
+	"vertexColors" : false
+	},
+
+	{
+	"DbgColor" : 15597568,
+	"DbgIndex" : 1,
+	"DbgName" : "stone",
+	"blending" : "NormalBlending",
+	"colorAmbient" : [0.0, 0.0, 0.0],
+	"colorDiffuse" : [1.0, 1.0, 1.0],
+	"colorSpecular" : [0.5, 0.5, 0.5],
+	"depthTest" : true,
+	"depthWrite" : true,
+	"mapLight" : "lightmap-ao-shadow.png",
+	"mapBump" : "rocks.jpg",
+	"mapSpecular" : "rocks.jpg",
+	"shading" : "Phong",
+	"specularCoef" : 50,
+	"transparency" : 1.0,
+	"transparent" : false,
+	"vertexColors" : false
+	}],
+
+    "vertices": [1.85679,0.0125948,0.544906,1.85679,0.0125948,-0.544906,2.9466,0.0125948,-0.544906,2.9466,0.0125948,0.544906,1.85679,1.10241,0.544906,1.85679,1.10241,-0.544906,2.9466,1.10241,-0.544906,2.9466,1.10241,0.544906,-8.39711,-3.67049e-07,-8.39711,8.39711,-3.67049e-07,-8.39711,-8.39711,3.67049e-07,8.39711,8.39711,3.67049e-07,8.39711,1,0.0180082,-1,1,0.0180083,1,-1,0.0180083,1,-1,0.0180082,-1,1,2.01801,-1,0.999999,2.01801,1,-1,2.01801,1,-1,2.01801,-1],
+
+    "morphTargets": [],
+
+    "normals": [],
+
+    "colors": [],
+
+    "uvs": [[1,1,0,1,0,0,1,0],[0.001001,0.498999,0.248999,0.498999,0.248999,0.251001,0.001001,0.251001,0.498999,0.001001,0.251001,0.001001,0.251001,0.248999,0.498999,0.248999,0.498999,0.251001,0.251001,0.251001,0.251001,0.498999,0.498999,0.498999,0.501001,0.498999,0.748999,0.498999,0.748999,0.251001,0.501001,0.251001,0.748999,0.001001,0.501001,0.001001,0.501001,0.248999,0.748999,0.248999,0.498999,0.501001,0.251001,0.501001,0.251001,0.748999,0.498999,0.748999,0.001001,0.248999,0.248999,0.248999,0.248999,0.001001,0.001001,0.001001,0.248999,0.501001,0.001001,0.501001,0.001001,0.748999,0.248999,0.748999,0.748999,0.501001,0.501001,0.501001,0.501001,0.748999,0.748999,0.748999,0.748999,0.751001,0.501001,0.751001,0.501001,0.998999,0.748999,0.998999,0.498999,0.751001,0.251001,0.751001,0.251001,0.998999,0.498999,0.998999,0.248999,0.751001,0.001001,0.751001,0.001001,0.998999,0.248999,0.998999,0.998999,0.251001,0.751001,0.251001,0.751001,0.498999,0.998999,0.498999]],
+
+    "faces": [11,1,0,4,5,0,0,1,2,3,0,1,2,3,11,5,6,2,1,0,2,3,0,1,4,5,6,7,11,6,7,3,2,0,2,3,0,1,8,9,10,11,11,0,3,7,4,0,0,1,2,3,12,13,14,15,11,0,1,2,3,0,2,3,0,1,16,17,18,19,11,7,6,5,4,0,2,3,0,1,20,21,22,23,11,9,8,10,11,1,0,1,2,3,24,25,26,27,11,12,13,14,15,2,3,0,1,2,28,29,30,31,	11,16,19,18,17,2,3,0,1,2,32,33,34,35,11,12,16,17,13,2,3,0,1,2,36,37,38,39,11,13,17,18,14,2,3,0,1,2,40,41,42,43,11,14,18,19,15,2,3,0,1,2,44,45,46,47,11,16,12,15,19,2,3,0,1,2, 48,49,50,51],
+
+    "bones" : [],
+
+    "skinIndices" : [],
+
+    "skinWeights" : [],
+
+    "animation" : {}
+
+}

examples/obj/lightmap/readme.txt

@@ -0,0 +1,4 @@
+Textures from:
+
+http://opengameart.org/node/7506
+http://opengameart.org/node/8038

examples/webgl_materials_lightmap.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - materials - lightmap</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background:#fff;
+				padding:0;
+				margin:0;
+				overflow:hidden;
+				font-family:georgia;
+				text-align:center;
+			}
+			h1 { }
+			a { color:skyblue }
+		</style>
+	</head>
+
+	<body>
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/Stats.js"></script>
+
+		<script type="x-shader/x-vertex" id="vertexShader">
+
+			varying vec3 worldPosition;
+
+			void main() {
+
+				vec4 mPosition = modelMatrix * vec4( position, 1.0 );
+
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+				worldPosition = mPosition.xyz;
+
+			}
+
+		</script>
+
+		<script type="x-shader/x-fragment" id="fragmentShader">
+
+			uniform vec3 topColor;
+			uniform vec3 bottomColor;
+			uniform float offset;
+			uniform float exponent;
+
+			varying vec3 worldPosition;
+
+			void main() {
+
+				float h = normalize( worldPosition + offset ).y;
+				gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( h, exponent ), 0.0 ) ), 1.0 );
+
+			}
+
+		</script>
+
+		<script>
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
+
+			var container,stats;
+			var camera, scene, renderer;
+
+			var clock = new THREE.Clock();
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				// CAMERA
+
+				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera.position.x = 700;
+				camera.position.z = -500;
+				camera.position.y = 180;
+
+				// SCENE
+
+				scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0xfafafa, 1000, 10000 );
+				scene.fog.color.setHSV( 0.6, 0.125, 1 );
+
+				// CONTROLS
+
+				controls = new THREE.TrackballControls( camera );
+				controls.target.z = 150;
+
+				// LIGHTS
+
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.475 );
+				directionalLight.position.set( 100, 100, -100 );
+				scene.add( directionalLight );
+
+
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 1.25 );
+				hemiLight.color.setHSV( 0.6, 0.45, 1 );
+				hemiLight.groundColor.setHSV( 0.1, 0.45, 0.95 );
+				hemiLight.position.y = 500;
+				scene.add( hemiLight );
+
+				// SKYDOME
+
+				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
+				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
+				var uniforms = {
+					topColor: 	 { type: "c", value: new THREE.Color( 0x0077ff ) },
+					bottomColor: { type: "c", value: new THREE.Color( 0xffffff ) },
+					offset:		 { type: "f", value: 400 },
+					exponent:	 { type: "f", value: 0.6 }
+				}
+				uniforms.topColor.value.copy( hemiLight.color );
+
+				scene.fog.color.copy( uniforms.bottomColor.value );
+
+				var skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
+				var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );
+
+				var sky = new THREE.Mesh( skyGeo, skyMat );
+				scene.add( sky );
+
+				// RENDERER
+
+				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false, clearColor: 0xfafafa, clearAlpha: 1 } );
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.domElement.style.position = "relative";
+				container.appendChild( renderer.domElement );
+
+				renderer.setClearColor( scene.fog.color, 1 );
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+				renderer.physicallyBasedShading = true;
+
+				// STATS
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				container.appendChild( stats.domElement );
+
+				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#abc";
+				stats.domElement.children[ 0 ].style.background = "transparent";
+				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
+
+				// MODEL
+
+				var loader = new THREE.JSONLoader();
+				var callback = function( geometry ) { createScene( geometry,  0, 0, 0, 0, 100 ) };
+
+				loader.load( "obj/lightmap/lightmap.js", callback );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function createScene( geometry, x, y, z, b, s ) {
+
+				for ( var i = 0; i < geometry.materials.length; i ++ ) {
+
+					var m = geometry.materials[ i ];
+					m.specular.setHex( 0x111111 );
+					m.color.setHex( 0xbbbbbb );
+
+					if ( m.name === "floor" ) m.color.setHSV( 0.1, 0.25, 0.8 );
+					else if ( m.name === "redstone" ) m.color.setHSV( 0.03, 0.65, 0.8 );
+					else if ( m.name === "stone" ) m.color.setHSV( 0.06, 0.55, 0.8 )
+					m.ambient.copy( m.color );
+
+					m.bumpScale = 2;
+					m.shininess = 100;
+
+					m.lightMap.anisotropy = 4;
+					m.bumpMap.anisotropy = 4;
+					m.specularMap.anisotropy = 4;
+
+				}
+
+				var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
+				mesh.position.set( x, y, z );
+				mesh.scale.set( s, s, s );
+				scene.add( mesh );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var delta = clock.getDelta();
+				controls.update( delta );
+
+				renderer.render( scene, camera );
+
+			}
+
+
+		</script>
+
+	</body>
+</html>