solsarratea/simple-shader-in-plane.html

## simple-shader-in-plane.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Day 1</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
   </head>
   <style>
      body { margin: 0; }
      canvas { display: block; }
   </style>
   </head>
   <body>
      <script id="vertexShader" type="x-shader/x-fragment">
			uniform float time;
			varying vec2 texCoordVarying;

			void main() {
				texCoordVarying = uv;
				gl_Position =   projectionMatrix *
								modelViewMatrix *
								vec4(position,1.0);
			}
		</script>
      <script id="fragmentShader" type="x-shader/x-fragment">
         uniform float time;
         varying vec2 texCoordVarying;

         void main()	{
         	vec2 st = texCoordVarying;

         	vec3 color = vec3(0.);
         	color = vec3(st.x,st.y,sin(time));

         	gl_FragColor = vec4(color,1);
         }
      </script>
      <script>
         var width = window.innerWidth;
         var height = window.innerHeight;

         var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
         camera.position.y = 0;
         camera.position.z = 10;


         var renderer = new THREE.WebGLRenderer();
         renderer.setSize( window.innerWidth, window.innerHeight );
         document.body.appendChild( renderer.domElement );

         var scene = new THREE.Scene();
         var geometry = new THREE.PlaneBufferGeometry( 7, 4, 2,2);

         material = new THREE.ShaderMaterial( {
         uniforms: {
         "time": { value: 0.0 }
         },
         fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
         vertexShader: document.getElementById( 'vertexShader' ).textContent

         } );

         var plane = new THREE.Mesh( geometry, material );
         scene.add( plane );


         plane.rotation.x = -1.2 ;

         function onWindowResize() {
         width = window.innerWidth;
         height = window.innerHeight;
         camera.aspect = width / height;
         camera.updateProjectionMatrix();
         renderer.setSize(width, height);
         }

         function animate() {
         renderer.render(scene, camera);
         requestAnimationFrame(animate);
         plane.rotation.x += 0.0006;
         var time = performance.now() * 0.00005;
         material.uniforms[ "time" ].value = time;
         }

         window.addEventListener('resize', onWindowResize, false);
         animate();

      </script>
   </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Day 1</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
	</head>
	<style>
	body { margin: 0; }
	canvas { display: block; }
	</style>
	</head>
	<body>
	<script id="vertexShader" type="x-shader/x-fragment">
	uniform float time;
	varying vec2 texCoordVarying;

	void main() {
	texCoordVarying = uv;
	gl_Position = projectionMatrix *
	modelViewMatrix *
	vec4(position,1.0);
	}
	</script>
	<script id="fragmentShader" type="x-shader/x-fragment">
	uniform float time;
	varying vec2 texCoordVarying;

	void main() {
	vec2 st = texCoordVarying;

	vec3 color = vec3(0.);
	color = vec3(st.x,st.y,sin(time));

	gl_FragColor = vec4(color,1);
	}
	</script>
	<script>
	var width = window.innerWidth;
	var height = window.innerHeight;

	var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
	camera.position.y = 0;
	camera.position.z = 10;


	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	var scene = new THREE.Scene();
	var geometry = new THREE.PlaneBufferGeometry( 7, 4, 2,2);

	material = new THREE.ShaderMaterial( {
	uniforms: {
	"time": { value: 0.0 }
	},
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
	vertexShader: document.getElementById( 'vertexShader' ).textContent

	} );

	var plane = new THREE.Mesh( geometry, material );
	scene.add( plane );


	plane.rotation.x = -1.2 ;

	function onWindowResize() {
	width = window.innerWidth;
	height = window.innerHeight;
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
	renderer.setSize(width, height);
	}

	function animate() {
	renderer.render(scene, camera);
	requestAnimationFrame(animate);
	plane.rotation.x += 0.0006;
	var time = performance.now() * 0.00005;
	material.uniforms[ "time" ].value = time;
	}

	window.addEventListener('resize', onWindowResize, false);
	animate();

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