robertcasanova/colorVertex.html

## colorVertex.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: #ffffff;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js"></script>
		<script>
			var camera, scene, renderer,
		    geometry, material, mesh;

		    var startTime =  Date.now() / 1000 ,
		    	elapsedTime = 0;

		    var distance = 200;

		    init();
		    animate();

		    function init() {

		        scene = new THREE.Scene();

		        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
		        camera.position.z = distance;
		        //camera.up = new THREE.Vector3( 0, 0, 0 );
		        camera.lookAt( scene.position );
		        scene.add( camera );

		        geometry = new THREE.PlaneGeometry( 200, 200, 2,2);

		        for (idx in geometry.faces) {
		         	var f = geometry.faces[idx];

		         	console.log(f);

		         	//geometry.vertices[f['a']];
		         	// geometry.colors[f['a']] = new THREE.Color( "rgb(255,0,0)" );
		         	// geometry.colors[f['b']] = new THREE.Color( "rgb(0,255,0)" );
		         	// geometry.colors[f['c']] = new THREE.Color( "rgb(0,0,255)" );
		         	// geometry.colors[f['d']] = new THREE.Color( "rgb(255,255,255)" );

		         	f.vertexColors[0] = new THREE.Color( "rgb(255,0,0)" );
		         	f.vertexColors[1] = new THREE.Color( "rgb(0,255,0)" );
		         	f.vertexColors[2] = new THREE.Color( "rgb(0,0,255)" );
		         	f.vertexColors[3] = new THREE.Color( "rgb(0,0,0)" );

		        }


		        material = new THREE.MeshLambertMaterial( {  wireframe: false, shading: THREE.FlatShading,vertexColors:  THREE.VertexColors } );

		        geometry.computeFaceNormals();
		        geometry.computeVertexNormals();

		        mesh = new THREE.Mesh( geometry, material );
		        //mesh.rotation.x = - Math.PI / 2;

		        scene.add( mesh );

		        light = new THREE.DirectionalLight( 0xffffff, 1);
		        light.position = camera.position;

		        scene.add( light );

		        renderer = new THREE.WebGLRenderer();
		        renderer.setSize( window.innerWidth, window.innerHeight );

		        document.body.appendChild( renderer.domElement );

		    }

		    function degToRad(alpha) {
		    	// convert degrees to radians

		    	return alpha * Math.PI / 180;
		    }

		    function setCircularCameraPosition(x,y) {
		    	// expect that camera is set on the surface of a sphere

		    	//console.log(x);

		    	if (x) {
		    		var y = Math.sin( Math.acos(x) );
		    		var z = Math.sin( Math.acos(x) );
		    	}

		    	camera.position = new THREE.Vector3( x * distance, y * distance, z * distance );
		    	//camera.position.x = x * distance;
		    	//camera.position.z = z * distance;

		    }

		    function animate() {
		    	elapsedTime = ( Date.now() / 1000 ) - startTime;
		        // note: three.js includes requestAnimationFrame shim
		        requestAnimationFrame( animate );
		        render();
		        //setCircularCameraPosition( Math.sin(Date.now() * 0.001) );

		    }

		    function render() {
		    	//setCircularCameraPosition( Math.sin( elapsedTime / 2 ));
		    	camera.lookAt( scene.position );


		        //mesh.rotation.x += 0.01;
		        //mesh.rotation.y += 0.02;

		        renderer.render( scene, camera );

		    }
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	background-color: #ffffff;
	margin: 0;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js"></script>
	<script>
	var camera, scene, renderer,
	geometry, material, mesh;

	var startTime = Date.now() / 1000 ,
	elapsedTime = 0;

	var distance = 200;

	init();
	animate();

	function init() {

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.z = distance;
	//camera.up = new THREE.Vector3( 0, 0, 0 );
	camera.lookAt( scene.position );
	scene.add( camera );

	geometry = new THREE.PlaneGeometry( 200, 200, 2,2);

	for (idx in geometry.faces) {
	var f = geometry.faces[idx];

	console.log(f);

	//geometry.vertices[f['a']];
	// geometry.colors[f['a']] = new THREE.Color( "rgb(255,0,0)" );
	// geometry.colors[f['b']] = new THREE.Color( "rgb(0,255,0)" );
	// geometry.colors[f['c']] = new THREE.Color( "rgb(0,0,255)" );
	// geometry.colors[f['d']] = new THREE.Color( "rgb(255,255,255)" );

	f.vertexColors[0] = new THREE.Color( "rgb(255,0,0)" );
	f.vertexColors[1] = new THREE.Color( "rgb(0,255,0)" );
	f.vertexColors[2] = new THREE.Color( "rgb(0,0,255)" );
	f.vertexColors[3] = new THREE.Color( "rgb(0,0,0)" );

	}






	material = new THREE.MeshLambertMaterial( { wireframe: false, shading: THREE.FlatShading,vertexColors: THREE.VertexColors } );

	geometry.computeFaceNormals();
	geometry.computeVertexNormals();

	mesh = new THREE.Mesh( geometry, material );
	//mesh.rotation.x = - Math.PI / 2;

	scene.add( mesh );

	light = new THREE.DirectionalLight( 0xffffff, 1);
	light.position = camera.position;

	scene.add( light );

	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );

	document.body.appendChild( renderer.domElement );

	}

	function degToRad(alpha) {
	// convert degrees to radians

	return alpha * Math.PI / 180;
	}

	function setCircularCameraPosition(x,y) {
	// expect that camera is set on the surface of a sphere

	//console.log(x);

	if (x) {
	var y = Math.sin( Math.acos(x) );
	var z = Math.sin( Math.acos(x) );
	}

	camera.position = new THREE.Vector3( x * distance, y * distance, z * distance );
	//camera.position.x = x * distance;
	//camera.position.z = z * distance;

	}

	function animate() {
	elapsedTime = ( Date.now() / 1000 ) - startTime;
	// note: three.js includes requestAnimationFrame shim
	requestAnimationFrame( animate );
	render();
	//setCircularCameraPosition( Math.sin(Date.now() * 0.001) );

	}

	function render() {
	//setCircularCameraPosition( Math.sin( elapsedTime / 2 ));
	camera.lookAt( scene.position );


	//mesh.rotation.x += 0.01;
	//mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

	}
	</script>
	</body>
	</html>