hw7 tryout

blocker

by ak532892

HTML

<div id="info">Homework 7
</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="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/OrbitControls.js"></script>

<script id="monoVS" type="x-shader/x-vertex">
	varying vec2 vUv;
	void main() {
		gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
		vUv = uv;
	}
</script>
<script id="monoFS" type="x-shader/x-fragment">
	uniform sampler2D texture;
	varying vec2 vUv;
  uniform float fade;
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 /= pow(2.,fade);
    //hsv.y = 0.0;
    
    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;
}

#gui {
  position: absolute;
  top: 50px;
  right: 10px;
  height: 500px;
  //text-align: center;
}

JavaScript

var renderer, camera, controls;
var pointLight;
var scene, sceneMono, sceneColor;
var camera2;
var rtTexture;
var torus, skybox, torus2;
var gcontrols;
var teapots = [];

init();
animate();
var Teapot = function(mesh){
	this.mesh = mesh;
};
function init()
{
	rtTexture = new THREE.WebGLRenderTarget( 
		1024, 1024, { 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(45, window.innerWidth/window.innerHeight, 0.1, 10000);
	camera.position.y = 0;
	camera.position.z = 400;
	camera.lookAt(new THREE.Vector3(0,0,0));

	controls = new THREE.OrbitControls(camera, renderer.domElement);
	///////////////////////////////////////////////////////////////////////		
	sceneMono = new THREE.Scene();	
	pointLight = new THREE.PointLight(0xffffff, 1.0);
	pointLight.position.set(0, 100, 500);
	sceneMono.add (pointLight);
	
	gcontrols = {fade: 0.1};
	
	var gui = new dat.GUI();
	gui.domElement.id = 'gui';
	gui.add(gcontrols, 'fade', 0.1, 5.0);
	
	sceneColor = new THREE.Scene();
	THREE.ImageUtils.crossOrigin = '';

	var material = new THREE.MeshLambertMaterial({
		side: THREE.BackSide,
		colorWrite:false
	});
	skybox = new THREE.Mesh( new THREE.BoxGeometry( 500, 500, 500 ), material );
	sceneMono.add (skybox);
	
	var bumpMap = THREE.TextureLoader('https://ak532892.github.io/ComputerGraphics2016/hw/hw7/models/dragon_C.jpg');
	var loader = new THREE.ObjectLoader();
	loader.crossOrigin = '';
	loader.setCrossOrigin('');
	loader.load (
		'https://ak532892.github.io/ComputerGraphics2016/hw/hw7/models/dragon.json', 
		function ( obj ) {
			obj.scale.set (12, 12, 12);
			obj.rotation.y = Math.PI;
			obj.traverse (
				function (mesh) {
					if (mesh instanceof THREE.Mesh)...