hw5 helper

mirror

by 蔡 育曄

HTML

<h1 style="text-align:center"> Back Mirror (RTT)</h1>
<hr>
<div id="containerL" style="background-color:pink;float:left; margin:3px; width:20vw; height:20vw">
  
</div>
<div id="container" style="background-color:yellow;float:left; margin:3px; width:50vw; height:20vw">
</div>
<div id="containerR" style="background-color:pink;float:left; margin:3px; width:20vw; height:20vw">
</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 cameraL, rendererL,cameraRTTL,sceneRTTL;
var cameraR, rendererR,cameraRTTR,sceneRTTR;
var renderTarget;
var carR, carG;
var theta, R;

init();
animate();

function init() {

  //////////主畫面//////////
  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);
  $("#container").append(renderer.domElement);
  
  //////////後照鏡(左)//////////
  var wwB = $('#containerL').innerWidth();
  var hhB = $('#containerL').innerHeight(); 
  rendererL = new THREE.WebGLRenderer();
  rendererL.setSize(wwB, hhB);
  rendererL.setClearColor(0x888888);
  $("#containerL").append(rendererL.domElement);
   
  //////////後照鏡(右)//////////
  var wwC = $('#containerR').innerWidth();
  var hhC = $('#containerR').innerHeight();  
  rendererR = new THREE.WebGLRenderer();
  rendererR.setSize(wwC, hhC);
  rendererR.setClearColor(0x888888);
   $("#containerR").append(rendererR.domElement);
  
  //////////將renderer東西呈現在材質上所需的東西//////////
   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;

  
  cameraL = new THREE.PerspectiveCamera(90, wwB / hhB, 1, 1000);
	sceneRTTL = new THREE.Scene();
  cameraRTTL = new THREE.OrthographicCamera (-10,10,10,-10, 0,20);
  let plane = new THREE.Mesh (new THREE.PlaneGeometry(20,20),
  new THREE.MeshBasicMaterial({map:renderTarget.texture, side:THREE.DoubleSide}));
  sceneRTTL.add (plane);
  plane.rotation.y = Math.PI;
    
  cameraR = new THREE.PerspectiveCamera(90, wwB / hhB, 1, 1000);
	sceneRTTR = new THREE.Scene();
  cameraRTTR = new THREE.OrthographicCamera (-10,10,10,-10, 0,20);
  plane = new THREE.Mesh (new THREE.PlaneGeometry(20,20),
  new...