onedayitwillmake/THREESketch.html

## THREESketch.html
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="lib/three.js/build/Three.js"></script>
	<script type="text/javascript" src="lib/three.js/examples/js/Detector.js"></script>
	<script type="text/javascript" src="lib/three.js/examples/js/RequestAnimationFrame.js"></script>
	<script type="text/javascript" src="lib/three.js/examples/js/Stats.js"></script>
	<script type="text/javascript" src="js/Sketch.js"></script>
	<link rel="stylesheet" type="text/css" href="lib/reset.css" />
	<style type="text/css">
		#threecontainer {
			margin: 5px;
			width: 1024px;
			height: 768px;
		}
		:focus {
			outline: none;
		}
	</style>
</head>
<body>
<div id="threecontainer"></div>
</body>
</html>

## THREESketch.js
/**
 * Good basic starting point for a THREE.JS sketch
 */
(function(){
	var Sketch = function(){
		this.onBeforeStart();
	};

	Sketch.prototype.onBeforeStart = function() {
		var that = this;
		var onContentLoaded = function(){
			window.removeEventListener('DOMContentLoaded', onContentLoaded);
			that.onLoaded();
		};
		window.addEventListener('DOMContentLoaded', onContentLoaded, true);
	};

	Sketch.prototype.onLoaded = function() {
		var width = window.innerWidth - 10;
		var height = window.innerHeight - 10;

		this._domElement = document.getElementById("threecontainer");
		this._domElement.style.width = width + "px";
		this._domElement.style.height = height  + "px";
		this._scene = new THREE.Scene();

		this._renderer = new THREE.WebGLRenderer({antialias: true});

		this._renderer.autoClear = true;
		this._renderer.sortObjects = true;
		this._renderer.setClearColor(new THREE.Color(0x111111), 1);
		this._renderer.setSize( width, height );
		this._renderer.domElement.tabIndex = "1";
		this._domElement.appendChild(this._renderer.domElement);

		this._camera = new THREE.Camera( 65, width/height, 1, 5000 );
		this._camera.position.y = 0;
		this._camera.position.z = 50;

		this._ambientLight = new THREE.AmbientLight(0x111111);
		this._scene.addLight(this._ambientLight);

		this._pointLight = new THREE.PointLight(0xFF00FF, 0.5, 0);
		this._pointLight.position.set(0, 10, 10);
		this._scene.addLight(this._pointLight);

		this.setupStats();

		var geometry = new THREE.CubeGeometry( 5, 5, 5, 2, 2, 2 );
		this._cube = new THREE.Mesh( geometry, [new THREE.MeshLambertMaterial( {
			color: 0xFF0000,
			shading: THREE.SmoothShading
		})] );
		this._cube.position.set(0, 0,0);

		this._scene.addObject( this._cube );

		var that = this;
		(function loop() {
			that.update();
			that.render();
			window.requestAnimationFrame(loop);
		})();
	};

	/**
	 * Creates a Stats.js instance and adds it to the page
	 */
	Sketch.prototype.setupStats = function() {
		var container = document.createElement('div');
		this.stats = new Stats();
		this.stats.domElement.style.position = 'absolute';
		this.stats.domElement.style.top = '5px';
		this.stats.domElement.style.left= '5px';
		container.appendChild(this.stats.domElement);
		document.body.appendChild(container);
	};

	Sketch.prototype.update = function() {
		this.stats.update();
		this._cube.rotation.y += 0.02;
	};

	Sketch.prototype.render = function() {
		this._renderer.render(this._scene, this._camera);
	};

	var sketch = new Sketch();
})();
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="lib/three.js/build/Three.js"></script>
	<script type="text/javascript" src="lib/three.js/examples/js/Detector.js"></script>
	<script type="text/javascript" src="lib/three.js/examples/js/RequestAnimationFrame.js"></script>
	<script type="text/javascript" src="lib/three.js/examples/js/Stats.js"></script>
	<script type="text/javascript" src="js/Sketch.js"></script>
	<link rel="stylesheet" type="text/css" href="lib/reset.css" />
	<style type="text/css">
	#threecontainer {
	margin: 5px;
	width: 1024px;
	height: 768px;
	}
	:focus {
	outline: none;
	}
	</style>
	</head>
	<body>
	<div id="threecontainer"></div>
	</body>
	</html>
	/**
	* Good basic starting point for a THREE.JS sketch
	*/
	(function(){
	var Sketch = function(){
	this.onBeforeStart();
	};

	Sketch.prototype.onBeforeStart = function() {
	var that = this;
	var onContentLoaded = function(){
	window.removeEventListener('DOMContentLoaded', onContentLoaded);
	that.onLoaded();
	};
	window.addEventListener('DOMContentLoaded', onContentLoaded, true);
	};

	Sketch.prototype.onLoaded = function() {
	var width = window.innerWidth - 10;
	var height = window.innerHeight - 10;

	this._domElement = document.getElementById("threecontainer");
	this._domElement.style.width = width + "px";
	this._domElement.style.height = height + "px";
	this._scene = new THREE.Scene();

	this._renderer = new THREE.WebGLRenderer({antialias: true});

	this._renderer.autoClear = true;
	this._renderer.sortObjects = true;
	this._renderer.setClearColor(new THREE.Color(0x111111), 1);
	this._renderer.setSize( width, height );
	this._renderer.domElement.tabIndex = "1";
	this._domElement.appendChild(this._renderer.domElement);

	this._camera = new THREE.Camera( 65, width/height, 1, 5000 );
	this._camera.position.y = 0;
	this._camera.position.z = 50;

	this._ambientLight = new THREE.AmbientLight(0x111111);
	this._scene.addLight(this._ambientLight);

	this._pointLight = new THREE.PointLight(0xFF00FF, 0.5, 0);
	this._pointLight.position.set(0, 10, 10);
	this._scene.addLight(this._pointLight);

	this.setupStats();

	var geometry = new THREE.CubeGeometry( 5, 5, 5, 2, 2, 2 );
	this._cube = new THREE.Mesh( geometry, [new THREE.MeshLambertMaterial( {
	color: 0xFF0000,
	shading: THREE.SmoothShading
	})] );
	this._cube.position.set(0, 0,0);

	this._scene.addObject( this._cube );

	var that = this;
	(function loop() {
	that.update();
	that.render();
	window.requestAnimationFrame(loop);
	})();
	};

	/**
	* Creates a Stats.js instance and adds it to the page
	*/
	Sketch.prototype.setupStats = function() {
	var container = document.createElement('div');
	this.stats = new Stats();
	this.stats.domElement.style.position = 'absolute';
	this.stats.domElement.style.top = '5px';
	this.stats.domElement.style.left= '5px';
	container.appendChild(this.stats.domElement);
	document.body.appendChild(container);
	};

	Sketch.prototype.update = function() {
	this.stats.update();
	this._cube.rotation.y += 0.02;
	};

	Sketch.prototype.render = function() {
	this._renderer.render(this._scene, this._camera);
	};

	var sketch = new Sketch();
	})();