HW6

Gooch Shader, Raycaster

by chaiche

HTML

<div id="info">
  hw6 <br>
  剩餘茶壺：<p id="num"></p>
</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="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

<script id="myVertexShader" type="x-shader/x-vertex">
	uniform vec3 lightpos;  // world coordinate
  uniform float op,color_alpha,color_beta;
  uniform vec3 color_a_kdiffuse,color_cool,color_warm;
  	varying float opacity,alpha,beta;
    varying vec3 eyelightdir;
    varying vec3 eyenormal;
    varying vec4 eyepos;
    varying vec3 a_kdiffuse,b_kdiffuse,kcool,kwarm;
    
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
				opacity = op;
        alpha = color_alpha;
        beta = color_beta;
        a_kdiffuse = color_a_kdiffuse;
        kcool = color_cool;
        kwarm = color_warm;
        eyepos = modelViewMatrix * vec4 (position, 1.0);
        vec4 eyelightpos= viewMatrix * vec4 (lightpos, 1.0);
        eyelightdir = normalize (eyelightpos.xyz - eyepos.xyz);
        eyenormal = normalMatrix * normal;
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
		varying float opacity;
    varying vec3 eyelightdir;
    varying vec3 eyenormal;
    varying vec4 eyepos;
    varying float alpha,beta;
    varying vec3 a_kdiffuse,kcool,kwarm;
    vec3 cdiff,wdiff;
    void main() {
        
        cdiff = kcool + alpha * a_kdiffuse;
        
        wdiff = kwarm + beta * a_kdiffuse;
        
        float intensity = dot (normalize (eyenormal), normalize (eyelightdir));
        
        float temp = (1.0+intensity)/2.0 ;
        vec3 final = temp * cdiff + (1.0-temp) * wdiff;
        float shininess = 100.0;  
        vec3 h = normalize(-normalize (eyepos.xyz) + normalize (eyelightdir));
        vec3 specular = pow (dot (eyenormal, h), shininess) *vec3 (1,0,0);
       ...

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;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var teapotMaterial = [];
var num = 0,expire = 0, teapots = [], pickables = [], tea = [];
var pick = [];

init();
animate();

var Teapot = function (mesh) {
	  this.mesh = mesh;
		pickables.push (mesh);
		this.mesh.name = 't'+ num;
    this.angle = 0;
    this.turn = true;
    this.value = 1.0;
    this.anglespeed = 0.5;
    this.has = true;
};
function findTeapot(mesh) {
	for (var i = 0; i < teapots.length; i++) {
  	if (teapots[i].mesh === mesh)
    	return teapots[i];
  }
}
Teapot.prototype.update = function () {
    if (this.turn) {
       this.angle += (this.value/2);
    }
    this.mesh.rotation.y = this.angle;
    this.value-=0.002;
    this.mesh.material.uniforms.op.value = this.value;
    this.mesh.material.uniforms.lightpos.value.copy (pointLight.position);
    if(this.value<0.0){
    	this.expire();
    }
};
Teapot.prototype.expire = function () {
	scene.remove(this.mesh);
  this.mesh.geometry.dispose();
  this.mesh.material.dispose();
  if(this.has){
  	this.has = false;
    expire++;
  }
};
function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x888888);
  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);


/////////////////////////////////////////////////////////////////
  color={
  	color_a_kdiffuse : "#f0f0f0",
    alpha : 0.2,
    beta : 0.6,
    color_cool : "#0000ff",
    color_warm : "#ffff00",
  }
  var gui = new dat.GUI();
  var f1 = gui.addFolder("Teapot Color");
  f1.addColor( color,...