hw5 helper

mirror

by Leoooo

HTML

<h1 style="text-align:center"> Back Mirror </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/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

JavaScript

var camera, scene, renderer;
var cameraB, rendererB;
var rtTexture;
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);

  ////////////////////////////////////////////////

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

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

  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 < 30; i++) {
    alpha += Math.PI * 2 / 30;
    geometry.vertices.push(new THREE.Vector3(R * Math.cos(alpha), 0, -R * Math.sin(alpha)));
  }
  var border = new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: 0xffff00
  }));
  scene.add(border);

  let geometry2 = new THREE.Geometry();
  for (var i = 0, alpha = 0; i < 30; i++) {
    alpha += Math.PI * 2 / 30;
    geometry2.vertices.push(new THREE.Vector3(0.8 * R * Math.cos(alpha), 0, -0.8 * R * Math.sin(alpha)));
  }
  var border2 = new THREE.Line(geometry2, new THREE.LineDashedMaterial({
    color: 0x00ffff,
    dashSize: 20,
    gapSize: 20
  }));
  scene.add(border2);
  border2.computeLineDistances();

 ...