soardex · June 23, 2014 17:10
diff --git a/SIMPLE_THREEJS_SAMPLE.html b/SIMPLE_THREEJS_SAMPLE.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<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-color: #ffffff;
 				margin: 0;
 				overflow: hidden;
 			}
 			
 			#stats { position: absolute; top:0; left: 0 }
 			#stats #fps { background: transparent !important }
 			#stats #fps #fpsText { color: #aaa !important }
 			#stats #fps #fpsGraph { display: none }
 		</style>
 	</head>
 	<body>
 		<script src="assets/js/stats.min.js"></script>
 		<script src="assets/js/three.js"></script>
 		<script>
 			var sets = {
 				camera0: null,
 				camera1: null
 			};
 			
 			var scene, renderer, stats;
 			var loader;
 			var light0, light1, ilight0, ilight1;
 			var ground;
 			
 			var clock = new THREE.Clock();
 			
 			var stageSceneMenu = function () {
 				sets.camera0 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
 				sets.camera0.position.set(0, 20, 60);
 				sets.camera0.lookAt(new THREE.Vector3());
 				
 				sets.camera1 = new THREE.OrthographicCamera(0, window.innerWidth, window.innerHeight, 0, -1, 1);
 				
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog(0x040306, 10, 1000);
 				scene.add(new THREE.AmbientLight(0xffffff));
 								
 				light0 = new THREE.PointLight(0xff0040, 2, 50);				
 				scene.add(light0);

 				light1 = new THREE.PointLight(0xffff40, 2, 50);
 				light1.position.y = 10.0;
 				light1.position.z = 30.0;
 				scene.add(light1);
 				
 				var sphere = new THREE.SphereGeometry(0.5, 16, 8);
 				ilight0 = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff0040 }));
 				ilight0.position = light0.position;
 				scene.add(ilight0);

 				/// DOTH: disable visible light
 				//ilight1 = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xffff00 }));
 				//ilight1.position = light1.position;
 				//scene.add(ilight1);
 				
 				loader = new THREE.JSONLoader();
 				//loader.load('assets/models/shadow.js', function (geometry) {
 				//	material = new THREE.MeshPhongMaterial({
 				//		map: THREE.ImageUtils.loadTexture('assets/models/texture000.png'),
 				//		ambient: 0x555555,
 				//		color: 0x555555,
 				//		diffuse: 0x555555,
 				//		specular: 0xffffff,
 				//		shinines: 50,
 				//		shading: THREE.SmoothShading
 				//	});
 				//	
 				//	mesh = new THREE.Mesh(geometry, material);
 				//	mesh.scale.set(0.1, 0.1, 0.1);
 				//	mesh.castShadow = true;
 				//	mesh.receiveShadow = true;
 				//	scene.add(mesh);
 				//});
 				
 				loader.load('assets/models/logo.js', function (geometry, materials) {
 					var material = new THREE.MeshFaceMaterial(materials);
 					var mesh = new THREE.Mesh(geometry, material);
 					mesh.position.y = 7.0;
 					mesh.position.z = 20.0;
 					mesh.scale.set(4.0, 4.0, 4.0);
 					mesh.castShadow = true;
 					mesh.receiveShadow = true;
 					scene.add(mesh);
 				});				
 				
 				loader.load('assets/models/sample_backdraft.js', function (geometry, materials) {
 					var material = new THREE.MeshLambertMaterial({
 						map: THREE.ImageUtils.loadTexture('assets/models/sample_backdraft.png'),
 						ambient: 0x555555,
 						color: 0x555555,
 						diffuse: 0x555555,
 						specular: 0xffffff,
 						shinines: 50,
 					});
 					
 					var mesh = new THREE.Mesh(geometry, material);
 					mesh.position.y = 5.0;
 					mesh.position.z = 15.0;
 					mesh.scale.set(4.0, 4.0, 4.0);
 					mesh.castShadow = true;
 					mesh.receiveShadow = true;
 					scene.add(mesh);
 				});				
 				
 				var texture = THREE.ImageUtils.loadTexture('assets/images/ground.jpg');
 				texture.wrapT = THREE.RepeatWrapping;
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.repeat.set(2.5, 2.5);
 				
 				var ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 100, 2, 2), new THREE.MeshLambertMaterial({
 					color: 0xffffff,
 					ambient: 0x444444,
 					map: texture
 				}));
 				
 				ground.position.y = -10;
 				ground.rotation.x = - Math.PI / 2;
 				ground.overdraw = true;
 				ground.receiveShadow = true;
 				scene.add(ground);				
 			};
 			
 			var stageSceneInGame = function () {
 				console.log('ingame');
 			};
 			
 			var init = function () {
 				stageSceneMenu();
 				
 				renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor(0x33334d, 1);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;
 				document.body.appendChild(renderer.domElement);

 				stats = new Stats();
 				document.body.appendChild(stats.domElement);
 			}

 			var animate = function () {
 				requestAnimationFrame(animate);
 				render();
 				stats.update();
 			}
 			
 			var render = function() {
 				var delta = clock.getDelta();
 				var time = new Date().getTime() * 0.0005;
 				
 				if (light0 !== undefined) {
 					light0.position.x = Math.sin(time * 2.0) * 10;
 					light0.position.y = Math.sin(time * 2.0) * 5;
 					light0.position.z = -Math.cos(time * 2.0) * 10;
 				}
 				
 				renderer.render(scene, sets.camera0);
 			};

 			init();
 			animate();
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<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-color: #ffffff;
	margin: 0;
	overflow: hidden;
	}

	#stats { position: absolute; top:0; left: 0 }
	#stats #fps { background: transparent !important }
	#stats #fps #fpsText { color: #aaa !important }
	#stats #fps #fpsGraph { display: none }
	</style>
	</head>
	<body>
	<script src="assets/js/stats.min.js"></script>
	<script src="assets/js/three.js"></script>
	<script>
	var sets = {
	camera0: null,
	camera1: null
	};

	var scene, renderer, stats;
	var loader;
	var light0, light1, ilight0, ilight1;
	var ground;

	var clock = new THREE.Clock();

	var stageSceneMenu = function () {
	sets.camera0 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
	sets.camera0.position.set(0, 20, 60);
	sets.camera0.lookAt(new THREE.Vector3());

	sets.camera1 = new THREE.OrthographicCamera(0, window.innerWidth, window.innerHeight, 0, -1, 1);

	scene = new THREE.Scene();
	scene.fog = new THREE.Fog(0x040306, 10, 1000);
	scene.add(new THREE.AmbientLight(0xffffff));

	light0 = new THREE.PointLight(0xff0040, 2, 50);
	scene.add(light0);

	light1 = new THREE.PointLight(0xffff40, 2, 50);
	light1.position.y = 10.0;
	light1.position.z = 30.0;
	scene.add(light1);

	var sphere = new THREE.SphereGeometry(0.5, 16, 8);
	ilight0 = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff0040 }));
	ilight0.position = light0.position;
	scene.add(ilight0);

	/// DOTH: disable visible light
	//ilight1 = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xffff00 }));
	//ilight1.position = light1.position;
	//scene.add(ilight1);

	loader = new THREE.JSONLoader();
	//loader.load('assets/models/shadow.js', function (geometry) {
	// material = new THREE.MeshPhongMaterial({
	// map: THREE.ImageUtils.loadTexture('assets/models/texture000.png'),
	// ambient: 0x555555,
	// color: 0x555555,
	// diffuse: 0x555555,
	// specular: 0xffffff,
	// shinines: 50,
	// shading: THREE.SmoothShading
	// });
	//
	// mesh = new THREE.Mesh(geometry, material);
	// mesh.scale.set(0.1, 0.1, 0.1);
	// mesh.castShadow = true;
	// mesh.receiveShadow = true;
	// scene.add(mesh);
	//});

	loader.load('assets/models/logo.js', function (geometry, materials) {
	var material = new THREE.MeshFaceMaterial(materials);
	var mesh = new THREE.Mesh(geometry, material);
	mesh.position.y = 7.0;
	mesh.position.z = 20.0;
	mesh.scale.set(4.0, 4.0, 4.0);
	mesh.castShadow = true;
	mesh.receiveShadow = true;
	scene.add(mesh);
	});

	loader.load('assets/models/sample_backdraft.js', function (geometry, materials) {
	var material = new THREE.MeshLambertMaterial({
	map: THREE.ImageUtils.loadTexture('assets/models/sample_backdraft.png'),
	ambient: 0x555555,
	color: 0x555555,
	diffuse: 0x555555,
	specular: 0xffffff,
	shinines: 50,
	});

	var mesh = new THREE.Mesh(geometry, material);
	mesh.position.y = 5.0;
	mesh.position.z = 15.0;
	mesh.scale.set(4.0, 4.0, 4.0);
	mesh.castShadow = true;
	mesh.receiveShadow = true;
	scene.add(mesh);
	});

	var texture = THREE.ImageUtils.loadTexture('assets/images/ground.jpg');
	texture.wrapT = THREE.RepeatWrapping;
	texture.wrapS = THREE.RepeatWrapping;
	texture.repeat.set(2.5, 2.5);

	var ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 100, 2, 2), new THREE.MeshLambertMaterial({
	color: 0xffffff,
	ambient: 0x444444,
	map: texture
	}));

	ground.position.y = -10;
	ground.rotation.x = - Math.PI / 2;
	ground.overdraw = true;
	ground.receiveShadow = true;
	scene.add(ground);
	};

	var stageSceneInGame = function () {
	console.log('ingame');
	};

	var init = function () {
	stageSceneMenu();

	renderer = new THREE.WebGLRenderer();
	renderer.setClearColor(0x33334d, 1);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.shadowMapEnabled = true;
	document.body.appendChild(renderer.domElement);

	stats = new Stats();
	document.body.appendChild(stats.domElement);
	}

	var animate = function () {
	requestAnimationFrame(animate);
	render();
	stats.update();
	}

	var render = function() {
	var delta = clock.getDelta();
	var time = new Date().getTime() * 0.0005;

	if (light0 !== undefined) {
	light0.position.x = Math.sin(time * 2.0) * 10;
	light0.position.y = Math.sin(time * 2.0) * 5;
	light0.position.z = -Math.cos(time * 2.0) * 10;
	}

	renderer.render(scene, sets.camera0);
	};

	init();
	animate();
	</script>
	</body>
	</html>