OrbitControls & Resize

buttons

by 蔡 育曄

HTML

<div id="info">HW5 helper (shadowmap)
  <br>
  <button id="toggle" style="width:20%">Toggle Light</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/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 scene, renderer, camera;
var controls;
var isOn, spotLight;
var angle = 0;
var torusKnot;

init();
animate();

$("#toggle").click(function() {
	isOn = ! isOn;
});

function init() {
  isOn = true;
  
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x404040);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  //////////////////////////////////
  // lighting
  var light = new THREE.AmbientLight(0x888888); // soft white light
  scene.add(light);


  spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(100, 300, 100);
	
  spotLight.angle = Math.PI / 16;
  spotLight.penumbra = 0.25;
  //spotLight.intensity = 0.3;
  var lighthelper = new THREE.SpotLightHelper(spotLight, 5);
 	scene.add(lighthelper);
  spotLight.castShadow = true;
  spotLight.shadow.mapSize.width = 1024;
  spotLight.shadow.mapSize.height = 1024;

  spotLight.shadow.camera.near = 50;
  spotLight.shadow.camera.far = 1000;
  spotLight.shadow.camera.fov = 30;

  scene.add(spotLight);

  //scene.add(new THREE.SpotLightHelper(spotLight));
  ////////////////////////////////////////////

  var geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
  var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
  });
  torusKnot = new THREE.Mesh(geometry, material);
  scene.add(torusKnot);
  torusKnot.position.y = 40;

  var floor = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 140, 140), new THREE.MeshLambertMaterial());
  floor.rotation.x = -Math.PI / 2;
  scene.add(floor);

  /////////////////////////////////////
  // shadow related
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  floor.receiveShadow = true;
  torusKnot.castShadow = true;
 ...