HW6

by YouTingKuo

HTML

<div id="info"> HW6</div>
<div id='count'></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 id="myVertexShader" type="x-shader/x-vertex">
	uniform vec3 lightpos;
  varying vec3 L;
  varying vec3 N;
  varying vec3 H;
  
	
  void main() {
		gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
    vec4 eyelightP = viewMatrix * vec4(lightpos, 1.0);
  	vec4 eyeP = modelViewMatrix * vec4(position, 1.0);
    L = normalize(eyelightP.xyz - eyeP.xyz);
    N = normalMatrix * normal;
    H = normalize(L - normalize(eyeP.xyz));
    
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
	uniform float opacity;
  varying vec3 L;
  varying vec3 N;
  varying vec3 H;
  
  void main() {
  	float NdotL = dot(normalize(N), L);
    float NdotH = dot(H, normalize(N));
    
  	vec3 specular = pow(abs(NdotH), 40.0) * vec3(1, 0, 0);
  
    vec3 kdiffuse = vec3(1, 1, 1);
    vec3 kcool = vec3(0.0, 0.0, 1.0); 
    vec3 kwarm = vec3(1.0, 1.0, 0.0);
    vec3 kcdiff = kcool + kdiffuse * 0.5;
    vec3 kwdiff = kwarm + kdiffuse * 0.4;
    vec3 kfinal = ((1.0 + NdotL) / 2.0) * kwdiff + (1.0 - (1.0 + NdotL) / 2.0) * kcdiff;
    gl_FragColor = vec4(kfinal + specular, opacity);
	}
</script>

CSS

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

#count {
    position: absolute;
    top: 30px;
    width: 102%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, light, sphere;
var raycaster;
var mouse = new THREE.Vector2();
var pickables = [], teapots = [];
var camera, controls, angle = 0;
var clock = new THREE.Clock();
var pointLight;


init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 100, 200);
	
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

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

  pointLight = new THREE.PointLight(0xffffff);
  scene.add(pointLight);

  //////////////////////////////////////////////////////////
	var ground = new THREE.Mesh (new THREE.PlaneGeometry (200,200),
  new THREE.MeshPhongMaterial({color:0xff7834}));
  scene.add (ground);
  ground.rotation.x = -Math.PI/2;
  
  var platform = new THREE.Mesh (new THREE.BoxGeometry (50,10,80),
  new THREE.MeshLambertMaterial({transparent:true, opacity:0.5}));
	platform.position.set (60,0,30);
  var platform2 = platform.clone();
  platform2.position.set (-60,0,-30);
  scene.add (platform2);
  scene.add (platform);
  
  var jsonLoader = new THREE.JSONLoader();
  var url = "https://youtingkuo.github.io/model/teapot.json";
	jsonLoader.load(url, function(geometry, materials) {
  	Teapot = function () {
    	this.angle = 0;
      this.turn = true;
      this.life = 10;
      this.mesh = new THREE.Mesh(geometry, new THREE.ShaderMaterial({
  	transparent: true,
    uniforms: {
    	lightpos: {type:'v3', value: new THREE.Vector3(150, 150, 0) }, 
      opacity: {type:'f', value: 1.0}
		},
    vertexShader: document.getElementById('myVertexShader').textContent,
    fragmentShader: document.getElementById('myFragmentShader').textContent
  }));
      this.mesh.scale.set(3, 3, 3);
      pickables.push(this.mesh);
    }
    Teapot.prototype.update =...