OrbitControls & Resize

buttons

by otorineko6790

HTML

<div id="info"> Hw2 <a href="javascript:toggleCamera()">change cam</a>
  <br>
  <button id="tView" style="width:20%">Toggle Turn</button>

  <input type=range min=0 max=1 step=0.1 id='intensity'> intensity <br>

</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 useCamera1 = false;
var lightsOff = false;
var lights = [], paints = [], cams = [];
$('#intensity').change(function() {
  console.log($(this).val());
  for (let i = 0; i < lights.length; i++)
    lights[i].spotLight.intensity = $(this).val();
})

$('#tView').click(function() {
  //  toggleCamera();
  lightsOff = !lightsOff;

  if (lightsOff) {
  for (let i = 0; i < lights.length; i++)
    lights[i].spotLight.intensity = 0;
  } else {
      for (let i = 0; i < lights.length; i++)
    lights[i].spotLight.intensity = 0.5;
  }

});

function toggleCamera() {
  useCamera1 = !useCamera1;
}

var scene, renderer, camera;
var camera1;
var walls = [];
//[-125, 30, 0],[125, 30, 0], [0, 30, 60], [0, 30, -60]
function architecture() {
  let len = [400, 400, 1000, 1000, 250];
  for (let i = 0; i < len.length; i++) {
    walls[i] = new THREE.Mesh(new THREE.BoxGeometry(10, 150, len[i]), new THREE.MeshPhongMaterial());
    scene.add(walls[i]);

  }
  walls[0].position.set(-500, 75, 0);
  walls[1].position.set(500, 75, 0);
  walls[2].position.set(0, 75, 200);
  walls[2].rotation.y = Math.PI / 2;
  walls[3].position.set(0, 75, -200);
  walls[3].rotation.y = Math.PI / 2;
  walls[4].position.set(90, 75, 0);
  
}

class Light {
  constructor(target) {
    this.lamp = new THREE.Object3D();
    this.lampbody = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 30), new THREE.MeshPhongMaterial());
    this.lamp.add(this.lampbody);
    //this.lamp.rotation.y = Math.PI/2;
    this.lampbody.rotation.x = Math.PI/2;

    this.spotLight = new THREE.SpotLight(0xffffff, 1, 500);
    this.lamp.add(this.spotLight);
    this.spotLight.position.copy(this.lamp.position);
    this.spotLight.angle = 0.5;
    this.spotLight.penumbra = 0.3;
    //this.spotLight.target = target;

    scene.add(this.lamp);
  }

}

class Paint {
  constructor(h,w, url) {
    this.loader = new THREE.TextureLoader();
    this.loader.crossOrigin = ''
    this.texture = this.loader.load(url);
    this.paint = new...