Scrolling Problem

by Bai Shiuan Huang

HTML

<h1 style="font-size:2em; text-align:center; margin:15px"> 
<b>常見木管樂器展</b>
</h1>
<div id="items">
<button id="lightToggle">Gallery Light Toggle</button>
<select id="mySelect">
  <option value="null">請選擇</option>
　<option value="flute">長笛</option>
　<option value="piccolo">短笛</option>
　<option value="clarinet">單簧管</option>
　<option value="sax">薩克斯風</option>
  <option value="oboe">雙簧管</option>
　<option value="bassoon">低音管</option>
</select>
<br>
Spotlight Intensity <input type="range" id='myRange' min="1" max="100" value="50">
</div>


<hr>

<div id="container">
</div>
<div id="container2">
</div>
<br>
<div>
<b>監視器畫面</b><br>
(點選左手邊畫作或下拉選單選擇畫作)
</div>
<br>
<hr>
<p id = "myPara">
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/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

#container {
  width: 45vw;
  height: 45vw;
  float: left;
  background-color: yellow;
  margin: 10px;
}

#items {
  text-align: center;
}

#container2 {
  width: 40vw;
  height: 40vw;
  float: left;
  background-color: yellow;
  margin: 10px;
}

#lightToggle {
  width: 30vw;
}



p {
  margin: 10px;
  text-align: justify;
}

JavaScript

var scene, renderer, renderer1, sceneHUD, cameraHUD, myCamera, paintings = [];
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var rotateNum = 0, monitors = [];
var rotationOriginals = [];
var pickables = [], lights = [], light1, toggle2 = false;
class makeSpotLight{
  constructor(pos, look){
    this.mesh = new THREE.Object3D();
    let cylinder = new THREE.Mesh(new THREE.CylinderGeometry( 1, 5, 10, 32 ), new THREE.MeshPhongMaterial({color:0x38daff}));
    cylinder.rotation.x = -Math.PI/2; 
    this.mesh.add(cylinder);
    this.mesh.position.copy(pos);
    this.mesh.lookAt(look.position);
    scene.add(this.mesh);
    this.light = new THREE.SpotLight( 0xffffff );
    this.light.target = look;
    this.light.position.copy(pos);
    this.light.castShadow = true;

    this.light.shadow.mapSize.width = 1024;
    this.light.shadow.mapSize.height = 1024;
		this.light.distance = 150;
    this.light.angle = Math.PI/4;
    this.light.shadow.camera.near = 100;
    this.light.shadow.camera.far = 500;
    this.light.shadow.camera.fov = 50;
    scene.add(this.light);
  }

}
$("#mySelect").change(function(){
  switch($("#mySelect").val()){
    case 'null':
    myCamera.position.set( 0, 450, 0);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));
    $('#myPara').text('');
    break;
    case 'piccolo':
    myCamera.position.set(-60, 25, -60);
    myCamera.lookAt(pickables[0].position);
    $('#myPara').text('短笛（piccolo），是長笛家族的一種變種樂器，名稱源自義大利文「flauto piccolo」，長度為普通長笛的一半。音域則比長笛高1個八度，所以部份義大利作曲家亦會以「ottavino」稱呼短笛。');
    break;
    case 'flute':
    myCamera.position.set(-60, 25, -60);
    myCamera.lookAt(pickables[1].position);
    $('#myPara').text('長笛是現代管弦樂和室內樂中主要的高音旋律樂器，外型是一根開有數個音孔的圓柱型長管。早期的長笛是烏木或椰木製，現代多使用金屬的材質，比如普通的鎳銀合金到專業型的銀合金，金（9K、14K、18K、24K）以及白金等，也有表演者使用特殊的玻璃長笛。傳統木質長笛的音色特點是圓潤、溫暖、細膩，而金屬長笛的音色就比較明亮寬廣。不同材料的長笛完全根據演奏者的愛好選擇。到了海頓那個年代（1732-1809年），長笛已成為管絃樂團中不可或缺的一員。19世紀初葉是改善長笛的重要時期，原因是德國人貝姆（Theobald...