hw6

by k6e2n0t12

HTML

<div id="info"> Hw6 
</div>
<div id="dataShow"></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 float ndotl;
    varying float ndoth;
    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 = normalize (normalMatrix * normal);
        
        ndotl = dot (eyenormal, eyelightdir);
        vec3 h = normalize (-normalize(eyepos.xyz) + normalize(eyelightdir));
        ndoth = dot (h, eyenormal);
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
    varying vec3 eyelightdir;
    varying vec3 eyenormal;
    varying vec4 eyepos;
    uniform float opacity;
    varying float ndotl;
    varying float ndoth;
    
    void main() {
    		float shininess = 40.0;
        vec3 kcool = vec3(0.0 ,0.0 ,1.0);
        vec3 kwarm = vec3(1.0 ,1.0 ,0.0);
        vec3 kdiffuse = vec3 (1.0, 1.0, 1.0);

				vec3 kcdiff = kcool + 0.5* kdiffuse;
        vec3 kwdiff = kwarm + 0.5* kdiffuse;
        vec3 kfinal = ((1.0+ndotl)/2.0 *kwdiff) + (1.0-(1.0+ndotl)/2.0) *kcdiff;
        vec3 specular = pow(ndoth,shininess)*vec3(1,0,0);

				/*
        float intensity = dot (normalize (eyenormal), normalize (eyelightdir));    
        vec3 diffuse = intensity*vec3 (1,1,1);
    
        vec3 h = normalize(-normalize (eyepos.xyz) + normalize (eyelightdir));
        //float shininess = 40.;    
        vec3 specular = pow (dot (eyenormal, h), shininess) *vec3 (1,0,0);
        gl_FragColor =...

CSS

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

#dataShow {
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}
body {
  overflow: hidden;
}

JavaScript

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

init();
animate();

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;
	
  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);

	lightFrame = new THREE.Object3D();
  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  lightFrame.add(light);
  scene.add(lightFrame);
  //scene.add(light);

  var gridXZ = new THREE.GridHelper(100, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  //scene.add(gridXZ);

  //////////////////////////////////////////////////////////
	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);
  
  pickables.push(ground);
  
  
// Teapot constructor
  
  var jsonLoader = new THREE.JSONLoader();
  var url = "https://k6e2n0t12.github.io/homework-repository/teapot.json";
  jsonLoader.load(url, function(geometry, materials) {
  	//console.log('1');
  	Teapot = function () {
    	var teapotMaterial = new THREE.ShaderMaterial({
    		transparent: true,
  			uniforms: {
  			lightpos: {type:'v3', value: new THREE.Vector3(0, 30, -100) },
				shading: {type:'i', value: 0},
  			coordinate:...