JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

THREE.FresnelShader = {

	uniforms: {},

	vertexShader: `
  varying vec3 vNormal;
  varying vec3 vEye;
  void main(){
    vNormal = normalize(normalMatrix * normal);
    vEye = normalize(vec3(modelViewMatrix * vec4(position, 1.0)).xyz);
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
  `,

	fragmentShader: `
  varying vec3 vNormal;
  varying vec3 vEye;
  void main(){
  	vec3 fresnelColor = vec3(0, 1, 1);
    float a = ( 1.0 - -min(dot(vEye, normalize(vNormal) ), 0.0) );
    a = pow(a, 2.);
    gl_FragColor = vec4(fresnelColor, a) ;
  }
  `

};


var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
    camera.position.z = 5;

    scene = new THREE.Scene();

    geometry = new THREE.SphereGeometry( 2, 36, 18 );
    material = new THREE.ShaderMaterial( {
			vertexShader: THREE.FresnelShader.vertexShader,
			fragmentShader: THREE.FresnelShader.fragmentShader,
      transparent: true
		});

    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(0, 2, -100);
    scene.add( mesh );
    
    scene.add(new THREE.GridHelper(200, 200));

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
		
		var controls = new THREE.OrbitControls( camera, renderer.domElement );
    camera.position.copy(mesh.position);
    camera.position.z += 10;
    controls.target.copy(mesh.position);
    controls.update();

}

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

}