JSFiddle - React, Tailwind, and code Playground

by Alvin Chen

HTML

<div id="info">HW7
<br> 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
<script src="https://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 texture;
  uniform float fade;
	varying vec2 vUv;
vec3 rgb2hsv(vec3 c)
{
    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

vec3 hsv2rgb(vec3 c)
{
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}	
	void main() {
		vec4 color = texture2D (texture, vUv);
    vec3 hsv = rgb2hsv (color.rgb);
    hsv.y = fade;
    vec3 rgb = hsv2rgb (hsv.xyz);
		gl_FragColor = vec4 (rgb, 1.0);
	}
</script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera, camera2, controls;
var pointLight;
var rttmaterial, quad;
var angle = 0.04;
var fade;

init();
animate();

function init() {
  rtTexture = new THREE.WebGLRenderTarget(
    1920, 1080, {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.NearestFilter,
      format: THREE.RGBFormat
    }
  );

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

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.y = 100;
  camera.position.z = 300;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

 	camera2 = camera.clone();

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  sceneRTT = new THREE.Scene();
  pointLight = new THREE.PointLight(0xffffff);
  pointLight.position.set(0, 300, 200);
  sceneRTT.add(pointLight);
	
  point = new THREE.Object3D();
  point2 = new THREE.Object3D();
  point3 = new THREE.Object3D();
  ball1 = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32),
    new THREE.MeshLambertMaterial({
      color: 0xff00ff
    }));
  ballc = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32),
    new THREE.MeshLambertMaterial({
      color: 0x009100
  }));
  ballc2 = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32),
    new THREE.MeshLambertMaterial({
      color: 0x977C00
  }));
  ball1.position.set(0,0,80)
  ball2 = ball1.clone();
  ball2.position.set(0,0,-80)
  ball3 = ballc2.clone();
  ball3.position.set(50,0,0)
  ball4 = ballc2.clone();
  ball4.position.set(-50,0,0)
  ball5 = ballc.clone();
  ball5.position.set(0,40,0)
  ball6 = ballc.clone();
  ball6.position.set(0,-40,0)
  point.add(ball1);
  point.add(ball2);
  point3.add(ball3);
  point3.add(ball4);
  point2.add(ball5);
  point2.add(ball6);
	sceneRTT.add(point);
  sceneRTT.add(point2);
	sceneRTT.add(point3);
	
 ...