three js raycaster not working for css2drenderer - three.js

Question

I m trying to add 2d hotspots to a 3d model. For this, i have added a WebGLRendere for 3d model and a CSS2DRenderer for te hotspot.
I m using raycaster to detect the hotspot but it is not detecting the hotspot.
This is my code -
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 7;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var platform;
var loader = new THREE.ColladaLoader();
loader.load('model/platform.dae', function(dae){
platform = dae.scene;
platform.position.set(0, -3.5, 0.5);
scene.add(platform);
scene.add(hotSpot);
});
var hotSpotDiv = document.createElement('div');
hotSpotDiv.className = 'hotSpot';
var hotSpot = new THREE.CSS2DObject(hotSpotDiv);
hotSpot.position.set(-1, 4.2, 0);
var renderer2D = new THREE.CSS2DRenderer();
renderer2D.setSize( window.innerWidth, window.innerHeight );
renderer2D.domElement.style.position = 'absolute';
renderer2D.domElement.style.top = 0;
renderer2D.domElement.style.backgroundColor = 0xff0000;
document.body.appendChild( renderer2D.domElement );
var light = new THREE.AmbientLight( 0x555555 ); // soft white light
scene.add( light );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(-0.5, 0.5, -1);
scene.add( directionalLight );
var mouse = new THREE.Vector2();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
var raycaster = new THREE.Raycaster();
var INTERSECTED;
function renderLoop(){
requestAnimationFrame(renderLoop);
render();
}
renderLoop();
function render(){
camera.lookAt( scene.position );
camera.updateMatrixWorld();
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children, true );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
console.log(intersects.length + " -- " + intersects[0].object);
INTERSECTED = intersects[ 0 ].object;
}
} else {
INTERSECTED = null;
}
renderer.render(scene, camera);
renderer2D.render(scene, camera);
console.log(body);
}
var camControls = new THREE.OrbitControls(camera);
camControls.enableDamping = true;
camControls.dampingFactor = 1;
Please let me know if there is any other better way to add 2d clickable buttons over the 3d model.
Thanks for all the help in advance!

Answer 1

Just a code version of what Andy has already provided as an answer.
This is in context to Amod's code.
hotSpotDiv.addEventListener('click', function(){
// Do your stuff here
});