Gallery

by 蔡 育曄

HTML

<div id="info">Gallery<br>
  <a href="https://i.imgur.com/WWBp9Jk.jpg" >Gallery floor plan </a><br>
  <button id='switch'>turn off</button>
  <button id = "monitor">monitor: 1</button>
  <button id = "viewpoint">default</button>
  <br> spotLight<br><input type=range min=0 max=1 step=0.1 id='intensity'>
  <br> directionalLight<br><input type=range min=0 max=1.5 step=0.1 id='intensity2'>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

class Light {
  constructor() {
    this.name = 'light';
    this.isOn = true;
    this.mesh = this.lightInit();
  }

  lightInit() {   
    ////////////////////燈罩////////////////////
    let lampshadeTexture = loader.load( "https://i.imgur.com/a0Roczn.jpg");
    let lampshadeMtl = new THREE.MeshPhongMaterial({map: lampshadeTexture,side:THREE.DoubleSide}); 	
    let lampshade = new THREE.Mesh(new THREE.CylinderGeometry(10,15,18,64,64,true),lampshadeMtl);
    lampshade.rotation.x = -Math.PI/2;

    ////////////////////燈泡&光線////////////////////
    this.light = new THREE.SpotLight(0xffffff,1.2);
    this.light.angle = 0.45;
    this.light.penumbra = 0.3;
    this.light.decay = 1;
    this.light.distance = 400;
    this.lightHelper = new THREE.SpotLightHelper(this.light);
    let lightBulb = new THREE.Mesh(new THREE.SphereGeometry(8,32,32),new THREE.MeshPhongMaterial());

    ////////////////////陰影////////////////////
    this.light.castShadow = true;
    this.light.shadow.mapSize.width = 1024;
    this.light.shadow.mapSize.height = 1024;
    this.light.shadow.camera.near = 50;
    this.light.shadow.camera.far = 1000;
    this.light.shadow.camera.fov = 20;
    lampshade.castShadow = true;
    lampshade.receiveShadow = true;
    lightBulb.castShadow = true;
    lightBulb.receiveShadow = true;

    ////////////////////包起來////////////////////
    let obj = new THREE.Object3D();
    lampshade.add(lightBulb,this.light);
    obj.add(lampshade);
    return obj; 
  }

  positionSet(x, y, z) {
    this.mesh.position.set(x, y, z);
  }

  lookAt(point) {
    this.light.target = point;
    this.mesh.lookAt(point.position);
  }

  switch() {
    this.light.intensity = this.isOn ? 1 : 0;
  }

  lightLelper() {
    return this.lightHelper;
  }
}

var camera, scene, renderer;
var loader = new THREE.TextureLoader();
var floor, lights = [], isOn = true;
var monitors = [], sCams = [], cameraobjs = [], vps = [];
var angle = 0, sign = 1,type = 1, tmp=0, tmp2=0;
var...