Threejs - Cross Hair

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

JavaScript

var scene, renderer, camera, controls;

init();
animate();

function init()
{	
    renderer = new THREE.WebGLRenderer( {antialias:true} );
	var width = window.innerWidth;
	var height = window.innerHeight;

    renderer.setSize (width, height);
    
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera (60, width/height, 0.01, 10000);
	camera.position.y = 16;
	camera.position.z = 40;
	camera.lookAt (new THREE.Vector3(0,0,0));
    
    var material = new THREE.LineBasicMaterial({ color: 0xAAFFAA });

    // crosshair size
    var x = 0.01, y = 0.01;

    var geometry = new THREE.Geometry();

  	// crosshair
    geometry.vertices.push(new THREE.Vector3(0, y, 0));
    geometry.vertices.push(new THREE.Vector3(0, -y, 0));
    geometry.vertices.push(new THREE.Vector3(0, 0, 0));
    geometry.vertices.push(new THREE.Vector3(x, 0, 0));    
    geometry.vertices.push(new THREE.Vector3(-x, 0, 0));

    var crosshair = new THREE.Line( geometry, material );
    // place it in the center
    var crosshairPercentX = 50;
		var crosshairPercentY = 50;
		var crosshairPositionX = (crosshairPercentX / 100) * 2 - 1;
		var crosshairPositionY = (crosshairPercentY / 100) * 2 - 1;

	crosshair.position.x = crosshairPositionX * camera.aspect;
	crosshair.position.y = crosshairPositionY;
	crosshair.position.z = -0.3;
   
    //camera.add( crosshair );
    
    scene.add( camera );

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    
	var gridXZ = new THREE.GridHelper(100, 10, new THREE.Color(0xffffff), new THREE.Color(0xffffff));
	scene.add(gridXZ);  
  
    
    var plane = createTestPlane();
    var testPoint = new THREE.Vector3(60, 65, 0);
    //point.setFromMatrixPosition( cube.matrixWorld );
    
    createRayCastFromCamera(testPoint);
   
}

function createRayCastFromCamera(testPoint){
		//testPoint.normalize();
    var rayDirection = new THREE.Vector3();
    rayDirection.subVectors(testPoint,...