Three.js BASE

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<div id="canvas">
<div id="hits">

CSS

body {
    font-family: Monospace;
    background-color: #fff;
    margin: 0px;
    overflow: hidden;
}

#canvas {
    background-color: #000;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 100px;
    padding: 0px;
    position: static; /* fixed or static */
    top: 100px;
    left: 100px;
}
#hits {
    position: absolute;
    background-color: transparent;
    width: 100%;
    text-align: 'center';
    color: #f00;
    font-family: Monospace;

    margin: 100px;
    padding: 0px;
    
    top: 30px;
    left: 100px;
}

JavaScript

// Three.js ray.intersects with offset canvas

var container, camera, scene, renderer, mesh,

    objects = [],
    
    count = 0,

    CANVAS_WIDTH = 400,
    CANVAS_HEIGHT = 400;

// info
info = document.createElement( 'div' );
info.style.zIndex = '1';
info.innerHTML = 'INTERSECT Count: ' + count;
info.style.userSelect = "none";
info.style.webkitUserSelect = "none";
info.style.MozUserSelect = "none";
document.body.appendChild( info );

container = document.getElementById( 'canvas' );
document.body.appendChild( container );

renderer = new THREE.WebGLRenderer();
renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container.appendChild( renderer.domElement );

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 45, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
camera.lookAt( scene.position );
scene.add( camera );

scene.add( new THREE.AmbientLight( 0x222222 ) );

var light = new THREE.PointLight( 0xffffff, 1 );
camera.add( light );

mesh = new THREE.Mesh( 
	new THREE.BoxGeometry( 200, 220, 200), 
	new THREE.MeshPhongMaterial( { color : 0x0080ff } 
) );
scene.add( mesh );
edgelines = new THREE.EdgesHelper( mesh, 0xffffff, 90 );
scene.add( edgelines );

objects.push( mesh );
objects.push( edgelines );

// find intersections
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// mouse listener
document.addEventListener( 'mousemove', function( event ) {
    
    // For the following method to work correctly, set the canvas position *static*; margin > 0 and padding > 0 are OK
    mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
    
    // For this alternate method, set the canvas position *fixed*; set top > 0, set left > 0; padding must be 0; margin > 0 is OK
    //mouse.x = ( ( event.clientX - container.offsetLeft ) /...