Pure THREE.JS template

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
<div id="overlay">hello</div>

CSS

#overlay {
    border:3px solid #FF0000;
    background:#fff;
    position:absolute;
}

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));

    controls = new THREE.OrbitControls (camera, renderer.domElement);
    
    mesh = new THREE.Mesh( new THREE.BoxGeometry(10, 10, 10 ) );
    scene.add( mesh );

    //camera.updateMatrixWorld();
    //getCoordinates( mesh, camera );
    
	var gridXZ = new THREE.GridHelper(100, 10);
	gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
	scene.add(gridXZ);  
}

function getCoordinates( element, camera ) {

    var screenVector = new THREE.Vector3();
    element.localToWorld( screenVector );

    screenVector.project( camera );

    var posx = Math.round(( screenVector.x + 1 ) * renderer.domElement.offsetWidth / 2 );
    var posy = Math.round(( 1 - screenVector.y ) * renderer.domElement.offsetHeight / 2 );
    
    var elementStyle = document.getElementById("overlay").style;
	elementStyle.left = posx+"px";
    elementStyle.top = posy+"px";

    //console.log( posx, posy );
}

function animate()
{
    getCoordinates( mesh, camera );
    requestAnimationFrame ( animate );  
	renderer.render (scene, camera);
}