Embed THREE.JS

Modifications: picking, resize

HTML

<h1 style="text-align:center"> 
Picking with Embedded 3JS, variable width 
</h1>
<hr>
<div id="container">
       <canvas id="cnvs"> </canvas>
</div>

    
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>

CSS

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

body {
    overflow: hidden;
}

JavaScript

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

init();
animate();

function init()
{
    var theCanvas = document.getElementById("cnvs");
    theCanvasFrame = document.getElementById("container");

    renderer = new THREE.WebGLRenderer({
        canvas: theCanvas,
        antialias: true
    });
    var ww = theCanvasFrame.clientWidth;
    var hh = theCanvasFrame.clientHeight;
    renderer.setSize(ww, hh);
    renderer.setClearColor(0x555555);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera (45, ww/hh, 1, 10000);
	camera.position.x = 0;
	camera.position.y = 80;
	camera.position.z = 200;
	camera.lookAt (new THREE.Vector3(0,0,0));

	var cyl_geom = new THREE.CylinderGeometry (10,10,6,32);
	var cyl_mat = new THREE.MeshLambertMaterial ({color: 0xff2211});
	cyl = new THREE.Mesh (cyl_geom, cyl_mat);
	cyl.position.set (0,0,0);
	scene.add (cyl);

	// add control here (after the camera is defined)
	controls = new THREE.OrbitControls (camera, renderer.domElement);
	
	var gridXZ = new THREE.GridHelper(100, 20);
	gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
	gridXZ.position.set (0,0,0); 
	scene.add(gridXZ);

	// build an invisible plane, overlapping the grid
	plane = new THREE.Mesh(
		new THREE.PlaneBufferGeometry( 200, 200, 8, 8 ),
		new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.25, transparent: true } )
	);
	plane.rotation.x = -Math.PI/2;
	plane.visible = false;   // invisible, for picking only
	scene.add( plane );

	var pointLight = new THREE.PointLight (0xffffff);
	pointLight.position.set (0,300,200);
	scene.add (pointLight);

	var ambientLight = new THREE.AmbientLight (0x111111);
	scene.add(ambientLight);
	
	window.addEventListener ('resize', onWindowResize, false);	
	window.addEventListener( 'mousemove', onDocumentMouseMove, false );
}

function onWindowResize ()
{
    var ww = theCanvasFrame.clientWidth;
    var hh =...