neilus · February 29, 2012 07:29 · neilus · Jun 16, 2014 · neilus · Jun 16, 2014
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 	<head>
 		<title>learningthree.js boiler plate for three.js</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-lalala

 		<script src="vendor/threex/THREEx.screenshot.js"></script>
 		<script src="vendor/threex/THREEx.FullScreen.js"></script>
 		<script src="vendor/threex/THREEx.WindowResize.js"></script>
 		<script src="vendor/threex.dragpancontrols.js"></script>

 		<link  href="css/main.css" rel="stylesheet"/>
 	</head>
 <body>
 	<!-- three.js container -->
    	<div id="container"></div>
 	<!-- info on screen display -->
 	<div id="info">
 		<div class="top">
 			<a href="http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/" target="_blank">LearningThree.js</a>
 			boiler plate for
 			<a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a>
 		</div>
 		<div class="bottom" id="inlineDoc" >
 			- <i>p</i> for screenshot
 		</div> 
 	</div> 

 	<script type="text/javascript">
 		var stats, scene, renderer, composer;
 		var camera, cameraControl;

 		if( !init() )	animate();

 		// init the scene
 		function init(){

 			if( Detector.webgl ){
 				renderer = new THREE.WebGLRenderer({
 					antialias		: true,	// to get smoother output
 					preserveDrawingBuffer	: true	// to allow screenshot
 				});
 				renderer.setClearColorHex( 0xBBBBBB, 1 );
 			}else{
 				renderer	= new THREE.CanvasRenderer();
 			}
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.getElementById('container').appendChild(renderer.domElement);

 			// add Stats.js - https://github.com/mrdoob/stats.js
 			stats = new Stats();
 			stats.domElement.style.position	= 'absolute';
 			stats.domElement.style.bottom	= '0px';
 			document.body.appendChild( stats.domElement );

 			// create a scene
 			scene = new THREE.Scene();

 			// put a camera in the scene
 			camera	= new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
 			camera.position.set(0, 0, 5);
 			scene.add(camera);

 			// create a camera contol
 			cameraControls	= new THREE.TrackballControls( camera )

 			// transparently support window resize
 			THREEx.WindowResize.bind(renderer, camera);
 			// allow 'p' to make screenshot
 			THREEx.Screenshot.bindKey(renderer);
 			// allow 'f' to go fullscreen where this feature is supported
 			if( THREEx.FullScreen.available() ){
 				THREEx.FullScreen.bindKey();		
 				document.getElementById('inlineDoc').innerHTML	+= "- <i>f</i> for fullscreen";
 			}

 			// here you add your objects
 			// - you will most likely replace this part by your own
 			var light	= new THREE.AmbientLight( Math.random() * 0xffffff );
 			scene.add( light );
 			var light	= new THREE.DirectionalLight( Math.random() * 0xffffff );
 			light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
 			scene.add( light );
 			var light	= new THREE.DirectionalLight( Math.random() * 0xffffff );
 			light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
 			scene.add( light );
 			var light	= new THREE.DirectionalLight( Math.random() * 0xffffff );
 			light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
 			scene.add( light );

 			var geometry	= new THREE.TorusGeometry( 1, 0.42, 16, 16 );
 			var material	= new THREE.MeshLambertMaterial({ambient: 0x808080, color: Math.random() * 0xffffff});
 			var mesh	= new THREE.Mesh( geometry, material ); 
 			scene.add( mesh );

 		}

 		// animation loop
 		function animate() {

 			// loop on request animation loop
 			// - it has to be at the begining of the function
 			// - see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 			requestAnimationFrame( animate );

 			// do the render
 			render();

 			// update stats
 			stats.update();
 		}

 		// render the scene
 		function render() {
 			// variable which is increase by Math.PI every seconds - usefull for animation
 			var PIseconds	= Date.now() * Math.PI;

 			// update camera controls
 			cameraControls.update();

 			// animation of all objects
 			for( var i = 0; i < scene.objects.length; i ++ ){
 				scene.objects[ i ].rotation.y = PIseconds*0.0003 * (i % 2 ? 1 : -1);
 				scene.objects[ i ].rotation.x = PIseconds*0.0002 * (i % 2 ? 1 : -1);
 			}
 			// animate DirectionalLight
 			scene.lights.forEach(function(light, idx){
 				if( light instanceof THREE.DirectionalLight === false )	return;
 				var ang	= 0.0005 * PIseconds * (idx % 2 ? 1 : -1);
 				light.position.set(Math.cos(ang), Math.sin(ang), Math.cos(ang*2)).normalize();							
 			});

 			// actually render the scene
 			renderer.render( scene, camera );
 		}
 	</script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>learningthree.js boiler plate for three.js</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-lalala

	<script src="vendor/threex/THREEx.screenshot.js"></script>
	<script src="vendor/threex/THREEx.FullScreen.js"></script>
	<script src="vendor/threex/THREEx.WindowResize.js"></script>
	<script src="vendor/threex.dragpancontrols.js"></script>

	<link href="css/main.css" rel="stylesheet"/>
	</head>
	<body>
	<!-- three.js container -->
	<div id="container"></div>
	<!-- info on screen display -->
	<div id="info">
	<div class="top">
	<a href="http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/" target="_blank">LearningThree.js</a>
	boiler plate for
	<a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a>
	</div>
	<div class="bottom" id="inlineDoc" >
	- <i>p</i> for screenshot
	</div>
	</div>

	<script type="text/javascript">
	var stats, scene, renderer, composer;
	var camera, cameraControl;

	if( !init() ) animate();

	// init the scene
	function init(){

	if( Detector.webgl ){
	renderer = new THREE.WebGLRenderer({
	antialias : true, // to get smoother output
	preserveDrawingBuffer : true // to allow screenshot
	});
	renderer.setClearColorHex( 0xBBBBBB, 1 );
	}else{
	renderer = new THREE.CanvasRenderer();
	}
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.getElementById('container').appendChild(renderer.domElement);

	// add Stats.js - https://github.com/mrdoob/stats.js
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.bottom = '0px';
	document.body.appendChild( stats.domElement );

	// create a scene
	scene = new THREE.Scene();

	// put a camera in the scene
	camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set(0, 0, 5);
	scene.add(camera);

	// create a camera contol
	cameraControls = new THREE.TrackballControls( camera )

	// transparently support window resize
	THREEx.WindowResize.bind(renderer, camera);
	// allow 'p' to make screenshot
	THREEx.Screenshot.bindKey(renderer);
	// allow 'f' to go fullscreen where this feature is supported
	if( THREEx.FullScreen.available() ){
	THREEx.FullScreen.bindKey();
	document.getElementById('inlineDoc').innerHTML += "- <i>f</i> for fullscreen";
	}

	// here you add your objects
	// - you will most likely replace this part by your own
	var light = new THREE.AmbientLight( Math.random() * 0xffffff );
	scene.add( light );
	var light = new THREE.DirectionalLight( Math.random() * 0xffffff );
	light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
	scene.add( light );
	var light = new THREE.DirectionalLight( Math.random() * 0xffffff );
	light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
	scene.add( light );
	var light = new THREE.DirectionalLight( Math.random() * 0xffffff );
	light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
	scene.add( light );

	var geometry = new THREE.TorusGeometry( 1, 0.42, 16, 16 );
	var material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: Math.random() * 0xffffff});
	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	}

	// animation loop
	function animate() {

	// loop on request animation loop
	// - it has to be at the begining of the function
	// - see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
	requestAnimationFrame( animate );

	// do the render
	render();

	// update stats
	stats.update();
	}

	// render the scene
	function render() {
	// variable which is increase by Math.PI every seconds - usefull for animation
	var PIseconds = Date.now() * Math.PI;

	// update camera controls
	cameraControls.update();

	// animation of all objects
	for( var i = 0; i < scene.objects.length; i ++ ){
	scene.objects[ i ].rotation.y = PIseconds0.0003 (i % 2 ? 1 : -1);
	scene.objects[ i ].rotation.x = PIseconds0.0002 (i % 2 ? 1 : -1);
	}
	// animate DirectionalLight
	scene.lights.forEach(function(light, idx){
	if( light instanceof THREE.DirectionalLight === false ) return;
	var ang = 0.0005 * PIseconds * (idx % 2 ? 1 : -1);
	light.position.set(Math.cos(ang), Math.sin(ang), Math.cos(ang*2)).normalize();
	});

	// actually render the scene
	renderer.render( scene, camera );
	}
	</script>
	</body>
	</html>
No results found