JSFiddle - React, Tailwind, and code Playground

by Alvin Chen

HTML

<div id="info">
  hw5 <br>GLSL
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/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">
  uniform int shading;
  uniform int coordinate;
  vec4 posi;
	varying vec3 color;
  varying float x;
	varying float a;
  void perVertexShading() {
    a=1.0;
  	if (posi.x > 0.0) 
    	color = vec3 (1,1,1);
    else
    	color = vec3 (0,0,0);
 	}
	void perPixelShading() {
     a=2.0;
     x=posi.x;
  }
	void main() {
		gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
    if(coordinate==0){
    	posi= vec4(position,1.0);
    }
    if(coordinate==1){
    	posi= modelMatrix * vec4( position, 1.0);
    }
    if(coordinate==2){
    	posi= modelViewMatrix * vec4( position, 1.0);
    }
    if (shading == 0)  // per-vertex shading
    	perVertexShading();
    else
    	perPixelShading();
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
  varying vec3 color;
  varying float x;
  varying float a;
	void main() {
  	if(a==1.0)
			gl_FragColor = vec4 (color, 1.0);
    else{
    	if(x>0.0)
      	gl_FragColor = vec4 (1.0,1.0,1.0,1.0);
     	else
        gl_FragColor = vec4 (0.0,0.0,0.0,1.0);
    }    
	}
</script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}
#gui {
  position: absolute;
  top: 30px;
  right: 1%;
  height: 350px;
  width: 100px;
}
body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls;
var jsonModel, jsonModel2;
var angle = 0;
init();
animate();
function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x333333);
  document.body.appendChild(renderer.domElement);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
  camera.position.z = 200;
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  controls = new THREE.OrbitControls(camera, renderer.domElement);
 var geometry = new THREE.PlaneGeometry( 200, 200, 0 );
 var material = new THREE.MeshLambertMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
  floor = new THREE.Mesh(new THREE.PlaneGeometry(400, 400, 130, 130),
  new THREE.MeshLambertMaterial());
  floor.rotation.x = -Math.PI / 2;
  scene.add(floor);
 SpotLight = new THREE.SpotLight(0xffffff);
 SpotLight.position.set(200, 300, 200);
 scene.add(SpotLight);
 scene.add(new THREE.AmbientLight(0x440000));
 
/////////////////////////////////////////////
	gcontrols = new function() {
    this.shading = 'per-vertex';
    this.coordinate = 'object';
    this.material = 'lambertMaterial';
  }
  var gui = new dat.GUI();
  gui.domElement.id = 'gui';
  var f1 = gui.addFolder("Coordinate System");
  f1.add (gcontrols, 'coordinate', ['object', 'world', 'eye']);
  var f2 = gui.addFolder('Shading Computation');
  f2.add (gcontrols, 'shading', ['per-vertex', 'per-pixel']);
  var f3 = gui.addFolder('Floor Material');
  f3.add (gcontrols, 'material', ['lambertMaterial', 'phongMaterial']);
/////////////////////////////////////////////////////////////////
  teapotMaterial = new THREE.ShaderMaterial({
    uniforms: {
      lightpos: {type:'v3', value: new THREE.Vector3(0, 30, 20) },
	  shading: {type:'i', value: 0},
    coordinate: {type:'i', value: 0},
	},
    vertexShader:...