hw6 scene

pick and place

by ak532892

HTML

<div id="info"></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;  // world coordinate
	varying vec3 eyelightdir;
	varying vec3 eyenormal;

	varying vec4 eyepos;

	void main() {
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
		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 vec3 eyelightdir;
		varying vec3 eyenormal;
		
		varying vec4 eyepos;
		
		uniform float opacity;
		
		void main() {
			float alpha = 0.2;
			float beta = 0.3;	
			
			vec3 kdiffuse = vec3 (1, 1, 1);
			vec3 kcool = 0.6 * vec3 (1, 1, 0);
			vec3 kwarm = 0.6 * vec3 (0, 0, 1);
			
			vec3 kcdiff = kcool + (alpha * kdiffuse);
			vec3 kwdiff = kwarm + (beta * kdiffuse);
			
			float ndotl = dot (normalize (eyenormal), normalize (eyelightdir)); 
			
			float lambda = (1.0 + ndotl) / 2.0;
			vec3 kfinal = lambda * kwdiff + (1.0 - lambda) * kcdiff;
			
			vec3 h = normalize(-normalize(eyepos.xyz) + normalize (eyelightdir));
			float shininess = 40.;
			vec3 specular = pow (abs(dot(-normalize(eyepos.xyz), h)), shininess) * vec3 (1, 1, 1);
			
			gl_FragColor = vec4(kfinal + specular, opacity);
		}
	</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var scene, renderer;
var raycaster;
var mouse = new THREE.Vector2();
var pickables = [], pickables2 = [];
var camera, controls;
var angle = 0;
var teapots = [];
var teapotNum = 0;
var teapotMaterial;
var pointLight, lightSphere;

init();
animate();

var Teapot = function(mesh){
	this.life = 1;
	this.angle = 0;
	this.turn = true;
	this.mesh = mesh;
	this.mesh.name = 't' + teapotNum;
	teapotNum++;
	pickables.push(mesh);
};
Teapot.prototype.update = function(i) {
	if(this.turn){
		this.angle += (this.life * 0.3);
		this.life -= 0.0025;
	}
	this.mesh.rotation.y = this.angle;
	teapots[i].mesh.material.uniforms.lightpos.value.copy (pointLight.position);
	teapots[i].mesh.material.uniforms.opacity.value = teapots[i].life;
	
	if(this.life <= 0)
		Teapot.prototype.expire(i);
};
Teapot.prototype.expire = function(i) {
	scene.remove(teapots[i].mesh);
	teapots[i].mesh.geometry.dispose();
	teapots[i].mesh.material.dispose();

	teapots.splice(i, 1);
	teapotNum--;
};
function findTeapot(mesh) {
	for (var i = 0; i < teapots.length; i++) {
		if (teapots[i].mesh === mesh)
		return teapots[i];
	}
}

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

	camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.z = 300;
	
	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
	pointLight = new THREE.PointLight(0xffffff);
	scene.add(pointLight);
	lightSphere = new THREE.Mesh(new THREE.SphereGeometry(5),
    new THREE.MeshBasicMaterial({
        color: 0xffff00,
        wireframe: true
    }));
    scene.add(lightSphere);
	
	//ground
	var ground = new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200),
	new THREE.MeshPhongMaterial({color:0x93f1ff}));
	ground.rotation.x = -(Math.PI / 2);
	scene.add (ground);

	//platform
	var platform =...