hw6-2

by jason870509

HTML

<div id="info">
  <br> hw6-2
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/geometries/TeapotBufferGeometry.js"></script>
<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/geometries/TeapotBufferGeometry.js"></script>
<script id="myVertexShader" type="x-shader/x-vertex">
  uniform vec3 lightpos;
  varying float ndotl;
  varying vec3 lightdir;
  varying vec3 eyenorm;
  
  void main() {
    gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
    
    //vec4 worldpos = modelMatrix * vec4 (position, 1.0);
    //ndotl = dot (normalize(lightpos.xyz - worldpos.xyz), normal);
    vec4 eyepos = modelViewMatrix * vec4 (position, 1.0);
    vec4 lighteye = viewMatrix * vec4 (lightpos, 1.0);
    lightdir = lighteye.xyz - eyepos.xyz;
    eyenorm = normalMatrix * normal;
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
  varying float ndotl;
  varying vec3 lightdir;
  varying vec3 eyenorm;
  
  void main() {
    float nn = dot (normalize(lightdir), normalize(eyenorm));
    if (nn > 0.8) {
      nn= 1.0;
    } else if (nn > 0.6) {
      nn = 0.6;
    } else {
      nn = 0.2;
    }
    gl_FragColor = vec4 (nn*.52/.255,nn*.216/.255,nn*.235/.225, 1.0);
  }
</script>
<script id="myVertexShader-mono" type="x-shader/x-vertex">
  varying vec2 vUv; 
  void main() { 
     gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0); 
     vUv = uv; 
  }
</script>
<script id="myFragmentShader-mono" type="x-shader/x-fragment">
  uniform sampler2D texture; 
  varying vec2 vUv; 
  
  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 -...

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	  position: absolute;
	}

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

JavaScript

javascript: (function() {
  var script = document.createElement('script');
  script.onload = function() {
    var stats = new Stats();
    document.body.appendChild(stats.dom);
    requestAnimationFrame(function loop() {
      stats.update();
      requestAnimationFrame(loop)
    });
  };
  script.src = 'https://mrdoob.github.io/stats.js/build/stats.min.js';
  document.head.appendChild(script);
})()

var scene, renderer, camera;
var material_shh;
var sceneRTT, cameraRTT;
var renderTarget;
var planeXX;
var subject, subjectClone, teapotMesh;
var pointLight, teapotMaterial;
var angle = 0;
init();
animate();

function init() {
  width = window.innerWidth;
  height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  renderer.setClearColor(0x888888);
  renderer.autoClear = false;

  // scene & camera: for final result
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 80, 300);

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


  window.addEventListener('resize', onWindowResize, false);
  //////////////////////////////////////////////////////////////////
  sceneGrey = new THREE.Scene();
  var floor = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshPhongMaterial({
    side: THREE.DoubleSide,
    color: 0x888888
  }));
  floor.position.y = -0.01
  floor.rotation.x = -Math.PI / 2


  var table = buildTable();
  var lamp = buildLamp();
  var pencilBox = buildPencilbox();
  var drink = buildDrink();
  var chair = buildChair();
  drink.position.set(20, 77, 10)
  drink.rotation.y = -Math.PI / 5

  sceneGrey.add(floor, table, lamp, pencilBox, drink, chair);


  sceneColor = new THREE.Scene();
  //////////////////////////////////////////////////////////////////////

  renderTarget = new THREE.WebGLRenderTarget(width, height);...