JSFiddle - React, Tailwind, and code Playground

by Alvin Chen

HTML

<div id="container"></div>
<div id="info">HW8 Final Project
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

<script id="myVertexShader" type="x-shader/x-vertex">
  varying vec2 vUv; 
  void main() { 
  	gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 		1.0); 
    vUv = uv; 
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
  uniform sampler2D picture; 
  varying vec2 vUv; 
  float width = 1.0/float(256); 
  float height = 1.0/float(256); 
  float line =1.0;
  int filter_type =1; 
  
  void main() { 
  float kernel[9]; 
  float gx[9] ,gy[9] ;
  vec3 color ;
  if (filter_type == 1) { 
  	gx[0] = gx[6] = gy[0] = gy[2] = -1.0;
    gx[2] = gx[8] = gy[6] = gy[8] = 1.0;
    gx[3] = gy[1] = -2.0;
    gx[5] = gy[7] = 2.0;
    gx[1] = gx[4] = gx[7] = 0.0;
    gy[3] = gy[4] = gy[5] = 0.0;
    
  	kernel[0] = kernel[2] = kernel[6] = kernel[8] = 1.0/9.0; 
    kernel[1] = kernel[3] = kernel[5] = kernel[7] = 1.0/9.0; 
    kernel[4] = 1.0/9.0; 
  } 
  vec2 offset[9]; 
  offset[0]=vec2(-width, -height); 
  offset[1]=vec2(0.0, -height); 
  offset[2]=vec2(width, -height); 
  offset[3]=vec2(-width, 0.0); 
  offset[4]=vec2(0.0, 0.0);   		  	
  offset[5]=vec2(width, 0.0);
  offset[6]=vec2(-width, height);
  offset[7]=vec2(0.0, height); 
  offset[8]=vec2(width, height); 
  vec3 sum= vec3(0.0);
	if (vUv.s < line-0.01) { 
  	float a[9];
  	for (int i=0 ; i < 9; i++) { 
    	vec3 tmp=texture2D (picture, vUv+offset[i]).rgb; 
      a[i] = tmp.r+tmp.g+tmp.b;
    } 
    float gx1 = gx[0]*a[0]+gx[1]*a[1]+gx[2]*a[2]+gx[3]*a[3]+gx[4]*a[4]+gx[5]*a[5]+gx[6]*a[6]+gx[7]*a[7]+gx[8]*a[8];
    float gy1 = gy[0]*a[0]+gy[1]*a[1]+gy[2]*a[2]+gy[3]*a[3]+gy[4]*a[4]+gy[5]*a[5]+gy[6]*a[6]+gy[7]*a[7]+gy[8]*a[8];
    vec3 x = vec3(1.0,0.0,gx1);
 ...

CSS

body {
  margin: 0px;
  overflow: hidden;
  font-family: Monospace;
  font-size: 20px;
  position: absolute;
}
#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 5px;
	text-align: center;
	color: #ffff00
}

JavaScript

var scene, renderer, camera, controls;
var width, height;
var scene2, camera2, rtTexture;
var angle = 0;

init();
animate();

function init() {
  width = window.innerWidth;
  height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  renderer.setClearColor(0x888888);
  renderer.autoClear = false;

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
  camera.position.y = 100;
  camera.position.z = 450;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  // add control here (after the camera is defined)
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var geometry = new THREE.CylinderGeometry( 200, 200, 3, 32 );
  var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
  var floor = new THREE.Mesh( geometry, material );
  scene.add( floor );
	
  pointLight = new THREE.PointLight();
  pointLight.position.set(0, 300, 200);
  scene.add(pointLight);
  
  var spherelight = new THREE.SphereGeometry(5, 16, 16)
  var spherematerial= new THREE.MeshBasicMaterial({color: 0xffff00})
  lightsphere = new THREE.Mesh(spherelight, spherematerial)
  scene.add(lightsphere);

  window.addEventListener('resize', onWindowResize, false);
  
  var vertShader = document.getElementById('myVertexShader').innerHTML;
  var fragShader = document.getElementById('myFragmentShader').innerHTML;
  THREE.ImageUtils.crossOrigin = '';
  photo = THREE.ImageUtils.loadTexture('https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/10670259_659129860897733_8837841253775570241_n.jpg?oh=3ff404bd4d8d3d7b8fa41a5a668c1a9c&oe=57CA88F3'); // olympic-c:256x256
	var uniforms = {
    picture: {
      type: 't',
      value: photo
    } ,
  };
	materialShador= new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vertShader,
    fragmentShader: fragShader
  });
	var geometry = new THREE.PlaneGeometry(100,100);
 ...