hw6

by jason870509

HTML

<div id="info">h</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 id="myVertexShader" type="x-shader/x-vertex">
  varying vec3 color; 
  uniform vec3 lightpos;
  varying float ndotl;
  varying vec3 lightdir;
  varying vec3 eyenorm;
  
  void main() {
    gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
    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 vec3 color;
  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 - min(q.w, q.y);
    float e = 1.0e-10;
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
  }
  vec3 hsv2rgb(vec3 c) {
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3...

CSS

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

body {
  overflow: hidden;
}

JavaScript

var renderer, camera, controls;
var sceneGrey, sceneColor;
var directionLight, directionLight2;
var renderTarget;
var scene0, camera0;

init();
animate();

function init() {
  sceneGrey = new THREE.Scene();
  
  width = window.innerWidth;
  height = window.innerHeight;
  
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  renderer.setClearColor(0x888888);
  renderer.autoClear = false;
  
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 200;
  camera.position.y = 200;
  controls = new THREE.OrbitControls(camera, renderer.domElement);

	window.addEventListener('resize', onWindowResize, false);
  function onWindowResize() {
  	camera.aspect = window.innerWidth / window.innerHeight;
  	camera.updateProjectionMatrix();
  	renderer.setSize(window.innerWidth, window.innerHeight);
  }
  
  let gridXZ = new THREE.GridHelper(200, 20, 'red', 'white')
  var plane = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshPhongMaterial({side: THREE.DoubleSide, color:0x888888}));
  plane.position.y = -0.01
  sceneGrey.add(plane);
  plane.rotation.x = - Math.PI / 2
  plane.receiveShadow = true;

  /////////////////////////////////////////////////////////////////////
  let loader = new THREE.TextureLoader();
  loader.crossOrigin = '';
  let tableTex = loader.load('https://i.imgur.com/p4HtN0u.jpg');
  let lampTex = loader.load('https://i.imgur.com/BDk9cu2.jpg')
  let pencilBoxTex = loader.load('https://i.imgur.com/noISaCj.png')
  pencilBoxTex.wrapS = pencilBoxTex.wrapT = THREE.RepeatWrapping;
  tableTex.wrapS = tableTex.wrapT = THREE.RepeatWrapping;
  var table = new THREE.Object3D();
  
  var tableTop = new THREE.Mesh(new THREE.BoxGeometry(100,60,5, 5), new THREE.MeshPhongMaterial({map:tableTex, color:0xf5a945}));
  table.add(tableTop);
  tableTop.castShadow = true;
  tableTop.receiveShadow = true; 
 ...