I write an app with three.js, where I want to detect some circles when the mouse clicks on them. The problem is that it works great only if I opened (and then close it or not, doesn't matter) the Chrome developer tools! If I don't it detects the clicking on the circle very difficultly (one at 5 times)!
I read this Why does JavaScript only work after opening developer tools in IE once?
and I erased my console calls (even though I don't run it on IE). Although, in the three.js file that I downloaded there are many many console calls but I don't think this is the problem.
What can I do?!
CODE to crate circles:
for (var i = 0; i <6; i++) {
for (var j = 0; j < 16; j++) {
var crcl = {};
crcl.obj = new THREE.Mesh( new THREE.CircleGeometry( 1.7, 30, 0, Math.PI * 2 ), mat);
crcl.obj.position.set(j*4.5+7, 277-i*3, 250);
crcl.obj.scale.set(1,1,1);
scene.add(crcl.obj);
SlotsToDetect.push(crcl.obj); // array to help detect click
PlayingSlotMatrix[i][j]=crcl; // array that hold circles for future handling
}
}
CODE to find the circle:
var intersectsSLOTS = raycaster.intersectObjects(SlotsToDetect, true);
if(intersectsSLOTS.length>0 ){
clickedObject=intersectsSLOTS[0].object;
updateSlots(clickedObject.id);
}
EDIT: I want to add that sometimes I get the error "Cannot read property 'getDescendants' of undefined " for the var intersectDescendants = function ( object, raycaster, intersects ) {..} function in the Three.js file.
EDIT 2: Chrome does not show alert() anymore at all. Though, it shows the console calls. what does that mean?