User:Δεριζαματζορπρομπλεμιναυστραλια/selfdirectedresearchnikos3

screenshot
Working on a gui controler for the webgl. Still in progress, it is not working yet.
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: #ffffff;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
 
		<script src="js/three.min.js"></script>
		<script src="js/Detector.js"></script>
		<script src="js/dat.gui.min.js"></script>

		<script>
 
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
			var camera, scene, renderer;
			var geometry, material, mesh;
            var parameters;
			
			function setup() {
 
				var W = window.innerWidth, H = window.innerHeight;
				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
				renderer.autoClearColor = false;
 
				renderer.setSize( W, H );
				document.body.appendChild( renderer.domElement );
 
				camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
				camera.position.z = 500;
 
				scene = new THREE.Scene();
 
				map = THREE.ImageUtils.loadTexture('pics/fb.jpg');
				geometry = new THREE.TorusGeometry(100, 40, 40, 40, 6.28);
				material = new THREE.MeshBasicMaterial({shading: THREE.SmoothShading, color: 0xdcdcdc, map: map});
				mesh = new THREE.Mesh(geometry, material);
				map.wrapS = map.wrapT = THREE.RepeatWrapping;
				map.repeat.set( 1.877900084674005, 1.877900084674005 );
				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.36;
				mesh.rotation.x = 4.94;
				mesh.rotation.y = 6.09;
				mesh.rotation.z = 3.44;
				mesh.castShadow = true;
				scene.add(mesh);
 
				renderer.shadowMapEnabled = true;
 
 
				bg = document.body.style;
				bg.background = '#000000';
 
				wgeometry = new THREE.PlaneGeometry( 1000, 1000, 1040, 100 );
				wmaterial = new THREE.MeshBasicMaterial( { color: 0x00CCCC, wireframe: true, wireframeLinewidth: 1 } );
				wireplane = new THREE.Mesh( wgeometry, wmaterial );
				wireplane.rotation.x = - Math.PI / 34;
				scene.add( wireplane );
				geometry = new THREE.Geometry();
				for ( i = 0; i < 500; i ++ ) {
					var vertex = new THREE.Vector3();
					vertex.x = 1000 * Math.random() - 500;
					vertex.y = 1000 * Math.random() - 500;
					vertex.z = 1000 * Math.random() - 500;
					geometry.vertices.push( vertex );
				}
				material = new THREE.ParticleBasicMaterial( { size: 3, sizeAttenuation: false, transparent: true } );
				material.color.setHex( 0xFFFFFF );
				particles = new THREE.ParticleSystem( geometry, material );
				particles.sortParticles = true;
				scene.add( particles );
 
			}
 
			function draw() {
 
				requestAnimationFrame( draw );
 
				camera.lookAt(mesh.position);
 
				mesh.position.x = Math.sin( Date.now() * 0.001103 ) * 30;  
				mesh.rotation.z = Date.now() * 0.00105;
				mesh.position.y = Math.sin( Date.now() * 0.00102 ) * 450;
				particles.rotation.y = Date.now() * 0.002005;
				var time = Date.now() * 0.000105;
				h = ( 360 * ( 51.0 + time ) % 360 ) / 360;
				material.color.setHSL( h, 0.1, 0.1);
				renderer.render( scene, camera );
 
			}
			
			function initGui() {
				parameters = {
					scale: 1,
				};
				
				var gui = new dat.GUI();
				var folder = gui.addFolder("torus controllers");
				
				var torusScale = folder.add(parameters, "scale").min(0).max(100).step(1).name("delta's scaling controller").listen();
				
				folder.open();
				
			}
 
			setup();
			initGui();
			draw();
 
		</script>
 
	</body>
</html>