three.js testbed

with orbitControls, XZgrid, info

by otorineko6790

HTML

<div id="info">Hw2 Helper (spotlight)
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh;
var angle = 0;
var lamp;
var spotLight;

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  axis = new THREE.AxisHelper(20);
  scene.add(axis);

  ceiling = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.2
  }));
  scene.add(ceiling);
  ceiling.rotation.x = Math.PI / 2;
  ceiling.position.y = 80;

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

  ///////////////////////////////////////////////////////////
	// axis of lamp is in +Z axis
  // so that we can use lamp.lookAt to follow mesh
  //
	lamp = new THREE.Object3D();  
  axis = new THREE.AxisHelper(40);
  lamp.add(axis);
  lampbody = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 30), new THREE.MeshNormalMaterial());
  lamp.add(lampbody);
  lampbody.position.set(0, 0, 15);
  lampbody.rotation.x = Math.PI / 2;
  lamp.position.set(30, 80, 40);  // fix to a point on ceiling
  scene.add(lamp);

  mesh = new THREE.Mesh(new THREE.SphereGeometry(10, 20, 20), new THREE.MeshNormalMaterial());
  scene.add(mesh)

  ///////////
  spotLight = new THREE.SpotLight(0xffffff);
  scene.add(spotLight);
  spotLight.position.copy(lamp.position);

  spotLight.angle = 0.8;
  spotLight.penumbra = 0.4;
  //spotLight.distance = 200;
  spotLight.decay = 1;
  spotLight.target = mesh;

	spotLightHelper = new THREE.SpotLightHelper(spotLight);
  scene.add(spotLightHelper);
  
}

function animate() {
  angle +=...