Gallery Scene 2

door, chair

by jason870509

HTML

<div id="info"> Hw2_Gallery
  <br>
  <button id = "toggle">camera</button>
  <button id="tView" style="width:20%">Light OFF</button>
  <br>
<input type=range min=0 max=2 step=0.1 id='light1'> 
  <button id = "changeLight">light1</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/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 spotLights = [], lamps = [], meshs = [], sCam = [], toggleCameras = [];
var keys = [
  [0, 0], [0.4, 0.6], [0.5, 0.6], [0.9, 0], [1, 0]
];
var T = 4;
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();
var safety = 0;
var lightNum = 0
$("#toggle").click(function() {
	safety += 1;
  if(safety > 2) safety = 0;
  if(safety == 0) $("#toggle").text('camera')
	else $("#toggle").text('camera'+safety)
});

$('#light1').change ( function() {
	//console.log ( $(this).val() );
  spotLights[lightNum].spotLight.intensity = $(this).val();
});

$('#changeLight').click ( function() {
	lightNum += 1;
  if(lightNum > lamps.length-1)lightNum = 0
  $('#changeLight').text('light'+(lightNum+1))
});

$('#tView').click(function() {
//  toggleCamera();
	lightsOff = !lightsOff;
  console.log(lightsOff)
  if (lightsOff) {
  	$('#tView').text('Light ON')
    spotLights.forEach(function(spotLight){
    	spotLight.spotLight.intensity = 0;
    });

  } else {
  	$('#tView').text ('Light OFF')
    spotLights.forEach(function(spotLight){
    	spotLight.spotLight.intensity = 1;
    }); 
  }
});
class Lamp{
	constructor(x, y, z){
    this.lamp = new THREE.Object3D();  
    var lampbody = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 30), new THREE.MeshBasicMaterial({color:0x917f8f}));
    this.lamp.add(lampbody);
    lampbody.position.set(0, 0, 15);
    lampbody.rotation.x = Math.PI / 2;
    this.lamp.position.set(x, y, z);  // fix to a point on ceiling
    scene.add(this.lamp);
  }
}
class Mesh{
	constructor(x, y, z){
    this.mesh = new THREE.Mesh(new THREE.SphereGeometry(10, 20, 20), new THREE.MeshNormalMaterial({visible:false}));
    this.mesh.position.set(x, y, z)
  	scene.add(this.mesh)
  }
}
class SpotLight{
	constructor(){
  	this.spotLight = new THREE.SpotLight(0xffffff);
    scene.add(this.spotLight);
    this.spotLight.angle = 0.6;
    this.spotLight.penumbra = 0.5;
    this.spotLight.distance = 400;
   ...