Embed THREE.JS

Modifications: picking, resize

HTML

<h1> Picking with Embedded JS</h1>
<hr>
<div id="container">
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<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>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera, controls;
var plane, cyl;
var mouse = new THREE.Vector2(), raycaster = new THREE.Raycaster();

init();
animate();

function init() {

  var ww = $("#container").innerWidth();   // is a method, not property
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
	$('#container').append (renderer.domElement);
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x555555);

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, ww / hh, 1, 10000);
  camera.position.set ( 0, 80, 200);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  var cyl_geom = new THREE.CylinderGeometry(10, 10, 6, 32);
  cyl = new THREE.Mesh(cyl_geom, new THREE.MeshNormalMaterial());
  cyl.position.set(-20, 0, 20);
  scene.add(cyl);

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

  var gridXZ = new THREE.GridHelper(100, 20, 'red', 'white');
  gridXZ.position.set(0, 0, 0);
  scene.add(gridXZ);

  plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(200, 200, 8, 8),
    new THREE.MeshBasicMaterial({
      color: 0xff0000,
      opacity: 0.25,
      transparent: true,
      visible: false
    })
  );
  plane.rotation.x = -Math.PI / 2;
  scene.add(plane);

	window.addEventListener('resize', onWindowResize, false);
  window.addEventListener('mousemove', onDocumentMouseMove, false);

}

function onWindowResize() {
  var ww = $('#container').innerWidth();
  var hh = $('#container').innerHeight();
  camera.aspect = ww / hh;
  camera.updateProjectionMatrix();
  renderer.setSize(ww, hh);
}

function onDocumentMouseMove(event) {
  event.preventDefault();
  
  mouse.x = ((event.clientX - event.target.offsetLeft) / $("#container").innerWidth()) * 2 - 1;
  mouse.y = -((event.clientY - event.target.offsetTop) / $("#container").innerHeight()) * 2 + 1;
	raycaster.setFromCamera (mouse, camera);
  
  var intersects = raycaster.intersectObject(plane);
  if (intersects.length > 0) {
    var move =...