Gallery Scene

gallery, turn on/off lights

by jason870509

HTML

<div id="info"> Hw2 <a href="javascript:toggleCamera()">helper</a>
  <br>
  <button id="tView" style="width:20%">Toggle Turn</button>
  
<input type=range min=0 max=2 step=0.1 id='light1'> light1 <br>
  
</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 = [], spotlight;
$('#light1').change ( function() {
	//console.log ( $(this).val() );
  spotLights[0].spotLight.intensity = $(this).val();
})

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

  } else {
    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.MeshNormalMaterial());
    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;
    //spotLight.distance = 200;
    this.spotLight.decay = 1;

    //spotLightHelper = new THREE.SpotLightHelper(spotLight);
  }
}
function toggleCamera() {
  useCamera1 = !useCamera1;
}

var scene, renderer, camera;
var camera1;

init();
animate();

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, 10000);
  camera.position.y = 600
  camera.position.z = 700;
  controls = new...