OrbitControls & Resize

buttons

by Millieyan

HTML

<div id="info">Hw2 Helper (surveillance camera)
<br>
<button id = "toggle">
toggle
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/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 cameraObj;
var safety = false;

var keys = [
  [0, 0], [0.4, 0.6], [0.5, 0.6], [0.9, 0], [1, 0]
];
var T = 2;
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();

init();
animate();

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

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, 12000);
  camera.position.z = 300;
  let controls = new THREE.OrbitControls(camera, renderer.domElement);

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

  window.addEventListener('resize', onWindowResize, false);
  
  scene.add (new THREE.Mesh (new THREE.SphereGeometry (10,20,20), new THREE.MeshNormalMaterial()))
	///////////////////////////////////
  
  sCam = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    
  cameraObj = new THREE.Object3D();
  cameraBody = new THREE.Mesh (new THREE.BoxGeometry (20,12,5), new THREE.MeshNormalMaterial());
  lens = new THREE.Mesh (new THREE.CylinderGeometry (5,5,10), new THREE.MeshNormalMaterial());
  lens.position.z = -5;
  lens.rotation.x = Math.PI/2;
  cameraObj.add (cameraBody, lens);
	

  cameraCase = new THREE.Object3D();
  cameraCase.add (cameraObj);
	cameraCase.position.set (-50, 40, 50);
  scene.add (cameraCase);

  // manual aiming
  cameraCase.rotation.y = -Math.PI/4;
  cameraCase.rotation.x = -Math.PI/6;
  cameraCase.rotation.order = 'YXZ'
}

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

function keyframe(t) {
  var s = ((t - ts) % T) / T;
  //console.log(s);

  for (var i = 1; i < keys.length; i++) {
    if...