pick: right or left buttons?

by jmchen

HTML

<div id="info">left & right button?</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

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

JavaScript

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

init();
animate();

function init()
{
	var width = window.innerWidth;
	var height = window.innerHeight;

	renderer = new THREE.WebGLRenderer({antialias: true});
	renderer.setSize (width, height);
	renderer.setClearColor (0x777777);
	
	document.body.appendChild (renderer.domElement);
	
	scene = new THREE.Scene();

	// picking problem comes from far/near ratio too big (was 0.1, 100000000)
	camera = new THREE.PerspectiveCamera (45, width/height, 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 (5,5,2,32);
	redCyl = new THREE.Mesh (cyl_geom, new THREE.MeshLambertMaterial ({color: 0xff2211}));
	blueCyl= new THREE.Mesh (cyl_geom, new THREE.MeshLambertMaterial ({color: 0x1122ff}));

	// 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( 'mousedown', onDocumentMouseDown, false );

}

function onDocumentMouseDown ( event ) {
	event.preventDefault();
	mouse.x = ( event.clientX / window.innerWidth ) * 2 -...