hw5 helper

mirror

by Leoooo

HTML

<h1 style="text-align:center"> Back Mirror (RTT)</h1>
<hr>
<div id="containerL" style="background-color:pink;float:left; margin:3px; width:30vw; height:30vw">
  <canvas id='mirrorView'></canvas>
</div>
<div id="container" style="background-color:yellow;float:left; margin:3px; width:60vw; height:30vw">
  <canvas id='frontView'></canvas>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

JavaScript

var camera, scene, renderer;
var cameraB, rendererB;
var cameraRTT;
var renderTarget;
var carR, carG;
var theta, R;

init();
animate();

function init() {

  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  var fv = document.getElementById('frontView')
  renderer = new THREE.WebGLRenderer({
    canvas: fv
  });
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);

  var wwB = $('#containerL').innerWidth();
  var hhB = $('#containerL').innerHeight();
  var mv = document.getElementById('mirrorView');
  rendererB = new THREE.WebGLRenderer({
    canvas: mv
  });
  rendererB.setSize(wwB, hhB);
  rendererB.setClearColor(0x888888);
  
  renderTarget = new THREE.WebGLRenderTarget(
    1024, 1024, {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.NearestFilter,
      format: THREE.RGBFormat
    }
  );
  
  ////////////////////////////////////////////////

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(90, ww / hh, 1, 1000);
  camera.position.z = 300;

  cameraB = new THREE.PerspectiveCamera(90, wwB / hhB, 1, 1000);

	sceneRTT = new THREE.Scene();
  cameraRTT = new THREE.OrthographicCamera (-10,10,10,-10, 0,20);
  plane = new THREE.Mesh (new THREE.PlaneGeometry(20,20),
  new THREE.MeshBasicMaterial({map:renderTarget.texture, side:THREE.DoubleSide}));
  sceneRTT.add (plane);
  plane.rotation.y = Math.PI;
	/////////////////
  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

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

  let controls = new THREE.OrbitControls(camera, renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);

  R = 60;
  theta = 0;
  let geometry = new THREE.Geometry();
  for (var i = 0, alpha = 0; i <= 60; i++) {
    alpha += Math.PI * 2 / 60;
    geometry.vertices.push(new THREE.Vector3(R * Math.cos(alpha), 0, -R * Math.sin(alpha)));
  }
  var border = new...