JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
	<canvas id="canvas"></canvas>

	<script type="x-shader/x-vertex" id="vertex-shader">
		uniform mat4 projectionMatrix;
		uniform mat4 modelViewMatrix;
		attribute vec3 position;
		uniform vec3 normal;
		varying vec3 vNormal;

		void main() {
			vNormal = normal;
		  	gl_Position = projectionMatrix *
		                modelViewMatrix *
		                vec4(position,1.0);
		}
	</script>

	<script type="x-shader/x-fragment" id="fragment-shader">
		varying mediump vec3 vNormal;

		void main() {
			mediump vec3 light = vec3(0.5, 0.2, 1.0);

			// ensure it's normalized
			light = normalize(light);

			// calculate the dot product of
			// the light to the vertex normal
			mediump float dProd = max(0.0, dot(vNormal, light));

			// feed into our frag colour
			gl_FragColor = vec4(dProd, // R
			                    dProd, // G
			                    dProd, // B
			                    1.0);  // A
		}
	</script>

JavaScript

var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('webgl');
	var renderer, scene, geometry, mesh, camera;
	var width = canvas.width;
	var height = canvas.width;


	function init() {

		scene = new THREE.Scene();

		renderer = new THREE.WebGLRenderer({
			canvas: canvas,
			context: ctx
		});

		renderer.setSize(width, height);
		renderer.setClearColor(0x444444, 1);

		camera = new THREE.PerspectiveCamera(50, width/height, 1, 100000);
		camera.position.set(0, 0, 300);
		scene.add(camera);

		// set up the sphere vars
		var radius = 50, segments = 16, rings = 16;

		// create the sphere's material
		var shaderMaterial = new THREE.RawShaderMaterial({
			vertexShader:   document.getElementById('vertex-shader').innerHTML,
			fragmentShader: document.getElementById('fragment-shader').innerHTML
		});
		
		// create a new mesh with sphere geometry -
		// we will cover the sphereMaterial next!
		var sphere = new THREE.Mesh(
		   new THREE.SphereGeometry(radius, segments, rings),
		   shaderMaterial);
		sphere.geometry.computeFaceNormals();
		sphere.geometry.computeVertexNormals();

		scene.add(sphere);
	}


	init();
	renderer.render(scene, camera);