OrbitControls & Resize

buttons

by Millieyan

HTML

<div id="info">Mirror Geometry
  <br>
  <br>
  <button id="toggle" style="width:20%">Toggle Turn</button>
</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var gloveR, gloveL;
var turn = false;
var angle = 0,
  sign = 1;
  
init();
animate();

$("#toggle").click(function() {
  turn = !turn;
});

function init() {

  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;

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

  gloveR = new THREE.Group();
  let axes = buildAxes();
  gloveR.add(axes);
  scene.add(gloveR);

  gloveR.position.x = 30;

  gloveL = new THREE.Group();

  var mirrorM = (new THREE.Matrix4()).identity();
  mirrorM.elements[0] = -1;   // YZ plane mirrored
  mirrorM.elements[5] = 1;
  mirrorM.elements[10] = 1;

  let axesM = buildAxes();
  axesM.applyMatrix(mirrorM);
  gloveL.add(axesM);
  scene.add(gloveL);

  gloveL.position.x = -30;


  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  var light = new THREE.PointLight(0xffffff, 1);
  light.position.set(0, 50, 50);
  scene.add(light);
  scene.add(new THREE.PointLightHelper(light))
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function buildAxes() {
  let axes = new THREE.Group();
  let xAxis = new THREE.Mesh(new THREE.BoxGeometry(10, 2, 2), new THREE.MeshPhongMaterial({
    color: 0xff0000
  }));
  let yAxis = new THREE.Mesh(new THREE.BoxGeometry(2, 10, 2), new THREE.MeshPhongMaterial({
    color: 0x00ff00
  }));
  let yBall = new THREE.Mesh (new THREE.SphereGeometry(4,20,20), new THREE.MeshPhongMaterial({color:0x00ff00}));
  let zAxis = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 10), new...